三、单个组件的布局

1.设计资源_图标库

1.1 下载图标

developer.huawei.com/consumer/cn…

www.iconfont.cn/

1.2 使用图标

后缀为.svg图标可以用fillColor()属性修改颜色并且放大不会失真

HarmonyOS 图标默认命名以** ic_** 开头

2.布局属性

微信个人中心部分区域

组件布局

属性****	描述
padding	内边距
margin	外边距
boerder	边框线
borderRadius	边框圆角

2.1 内边距 padding

作用：在组件内添加间距，拉开内容与组件边距之间的距离

属性：数字 或 对象

• 数字：上下左右内边距相同
• 对象{}：配合left、right、top、bottom单独设置某个方向内边距

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
      Column() {
        Text('月落乌啼霜满天,江枫渔火对愁眠')
          .backgroundColor(Color.Red)
          .padding(30)
        Text('姑苏城外寒山寺,夜半钟声到客船')
          .backgroundColor(Color.Yellow)
          .padding({
            left:10,
            right:10,
            top:20,
            bottom:20
          })
    }
  }
}

2.2 外边距 margin

作用：在组件外部添加边距，拉开组件与组件的距离

属性：数字 或 对象

• 数字：上下左右外边距相同
• 对象{}：配合left、right、top、bottom单独设置某个方向内边距

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
      Column() {
        Text('月落乌啼霜满天,江枫渔火对愁眠')
          .backgroundColor(Color.Red)
          .margin(30)
        Text('姑苏城外寒山寺,夜半钟声到客船')
          .backgroundColor(Color.Yellow)
          .margin({
            left:10,
            right:10,
            top:20,
            bottom:20
          })
    }
  }
}

2.3边框属性

2.3.1四个方向边框相同

属性：border

border有三个参数：{width?: 数字, color?: '', style?: BorderStyle}，

• width：边框宽度，边框宽度默认值为0，即不显示边框
• color：边框颜色
• style：边框样式，BorderStyle为枚举类型
  • Solid：实线（默认）
  • Dashed：虚线
  • Dotted：点线

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
      Column() {
        Text('大王叫我来巡山')
          .fontSize(20)
          .width(260)
          .height(60)
          .backgroundColor(Color.Red)
          .border({
            width:2,
            color:Color.Black,
            style:BorderStyle.Solid
          })
      }
  }
}

2.3.2四个方向边框不同

书写方法：

border({
  width:{
    left:2,
    right:5,
    top:8,
    bottom:10
  },
  color:{
    
  },
  style:{
    
  }
})

2.4 边框圆角 borderRadius

作用：把角变为圆角

属性：数值 或 对象

• 数字：四个角一样圆
• 对象{}：配合{topLeft：左上角、topRight：右上角、bottomLeft：左下、bottomRight：右下角单独设置某个方向内边距

@Entry
@Component
struct Index {
  build() {
    Column({space: 20}) {
      Text('圆角1')
        .width(100)
        .height(40)
        .backgroundColor('#f60')
        .borderRadius(5)

      // 胶囊状 圆角半径 = 高度 / 2
      Text('圆角2')
        .width(100)
        .height(40)
        .backgroundColor('#fc0')
        .borderRadius(20)

      // 正圆 圆角半径 = 正方形尺寸 / 2
      Image($r('app.media.avatar'))
        .width(100)
        .aspectRatio(1)
        .borderRadius(50)

      // 四个角半径不同写法
      Text('圆角3')
        .width(100)
        .height(40)
        .backgroundColor('#fc0')
        .borderRadius({
          topLeft: 5,
          topRight: 10,
          bottomRight: 20,
          bottomLeft: 40
        })

    }
    .padding(20)
  }
}

2.5背景属性

属性	描述
backgroundColor	背景色
backgroundImage	背景图
backgroundImageSize	背景图尺寸
backgroundImagePosition	背景图位置

2.5.1背景色-backgroundColor

设置组件的背景色

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('组件')
        .width(300)
        .height(100)
        .backgroundColor(Color.Pink)
    }
    .padding(20)
  }
}

组件添加宽高属性或有内容才能观察到背景色

2.5.2背景图-backgroundImage

属性：backgroundImage(背景图地址, 背景图平铺方式 ImageRepeat)

背景图平铺方式:() 默认不平铺

NpRepeat 不平铺
X 横向平铺
Y 纵向平铺
XY 水平垂直均平铺

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('组件')
        .width(300)
        .height(100)
        .backgroundColor(Color.Pink)
        .backgroundImage($r('app.media.flower'))
        .backgroundImage($r('app.media.flower'), ImageRepeat.X)
    }
    .padding(20)
  }
}

2.5.3背景图尺寸-backgroundImageSize

作用：背景图缩放

属性：<font style="color:rgba(0, 0, 0, 0.9);">backgroundImageSize</font>

参数：

• 设置背景图宽高尺寸：<font style="color:rgba(0, 0, 0, 0.9);">{width: 数值, height: 数值}</font>（只设置宽或高，另一个尺寸等比例缩放）
• 枚举 <font style="color:rgba(0, 0, 0, 0.9);">ImageSize</font>：
  • Cover： 等比例缩放背景图至图片完全覆盖组件范围
  • Contain：等比例缩放背景图，当宽或高与组件尺寸相同则停止缩放
  • Auto： 默认，原图尺寸

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('组件')
        .width(300)
        .height(100)
        .backgroundColor(Color.Pink)
        .backgroundImage($r('app.media.flower'))
        .backgroundImageSize({width: 100})
        .backgroundImageSize(ImageSize.Cover)
        .backgroundImageSize(ImageSize.Contain)
    }
    .padding(20)
  }
}

2.5.4背景图位置-backgroundImagePosition

作用：调整背景图在组件内的显示位置，默认显示位置为组件左上角

属性：backgroundImagePosition()

参数：

• 位置坐标： {x: 位置, y: 位置}
• 枚举 Alignment

名称	描述
TopStart	顶部起始端（默认位置）
Top	顶部横向居中
TopEnd	顶部尾端
Start	起始端纵向居中
Center	居中
End	尾端纵向居中
BottomStart	底部起始端
Bottom	底部横向居中
BottomEnd	底部尾端

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('组件')
        .width(300)
        .height(100)
        .backgroundColor(Color.Pink)
        .backgroundImage($r('app.media.flower'))
        .backgroundImagePosition({x: 100, y: 50})
        .backgroundImagePosition(Alignment.Center)
    }
    .padding(20)
  }
}

2.6颜色渐变

2.6.1线性渐变

作用: 设置组件颜色直线方向的渐变效果

属性: linearGradient({ 对象})

.linearGradient({
    //direction与angle设置一个就行了
  	angle?:  线性渐变的起始角度取值范围为(0-360)。默认180°_垂直向下方向
  	direction?: 线性渐变的方向,

  	colors: [[颜色1, 颜色1所处位置], [颜色2, 颜色2所处位置], ......],
  	repeating?: 是否重复着色
})

• <font style="color:rgba(0, 0, 0, 0.9);">angle</font>：线性渐变的起始角度取值范围为(0-360)。

0度垂直向上方向，顺时针旋转为正向角度，默认值：180

• <font style="color:rgba(0, 0, 0, 0.9);">direction</font>: 线性渐变的方向，设置 angle 后direction不生效，值为 枚举类型 <font style="color:rgba(0, 0, 0, 0.9);">GradientDirection</font>
  • Left：从右向左
  • Top：从下向上
  • Right：从左向右
  • Bottom：从上向下
  • LeftTop：从右下 到 左上
  • LeftBottom：从右上 到 左下
  • RightTop：从左下 到 右上
  • RightBottom：从左上 到 右下

@Entry
@Component
struct Index {
  build() {
    Column({ space: 10}) {
      Text('线性')
        .width(100).height(50).backgroundColor(Color.Pink)
        .linearGradient({
          direction: GradientDirection.Right,
          colors: [['red', 0.1], ['#fc0', 0.8]]
        })
    }
      .padding(20)
  }
}

2.6.2径向渐变

作用: 设置组件颜色圆形发散的渐变效果

属性: radialGradient（{}）

.radialGradient({
  	center:  径向渐变的中心点坐标,
  	radius: 径向渐变的半径,
  	colors: [[颜色1, 颜色1所处位置], [颜色2, 颜色2所处位置], ......],
  	repeating?: 是否重复着色
}）

• center：径向渐变的中心点，即相对于当前组件左上角的坐标，写法<font style="color:rgba(0, 0, 0, 0.9);">[x坐标, y坐标]</font>

@Entry
@Component
struct Index {
  build() {
    Column({ space: 10}) {
      Text('径向')
        .width(100).height(50).backgroundColor(Color.Pink)
        .radialGradient({
          center: [40, 0],
          radius: 40,
          // colors: [['red', 0.1], ['#fc0', '0.8']],
          colors: [
            ['rgba(255, 255, 255, 0.6)', 0],
            ['rgba(255, 255, 255, 0)', 1]
          ]
          // repeating:true
        })
    }
      .padding(20)
  }
}

2.7 阴影

作用: 为组件添阴影效果, 使组件视觉上更立体

属性: shadow()

参数: {}

shadow({
  radius: 模糊半径,
  type?: 阴影类型,
  color?: 阴影颜色,
  offsetX?: X轴偏移,
  offsetY?: Y轴偏移,
  fill?: 是否内部填充
})

import { colorSpaceManager } from '@kit.ArkGraphics2D';

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  build() {
    Column() {
      Text('阴影')
        .width(200)
        .height(200)
        .shadow({
          radius:50,//阴影角度半径
          color:'rgba(122.122.122.0.5)',//阴影颜色
          offsetX:10,//阴影水平向右偏移
          offsetY:10,//阴影垂直向下偏移
          fill:false//填充效果
        })
      }
      .height('100%')
      .width('100%')
      .backgroundColor('#eee')
    .padding(50)
    }
  }

2.9 案例 - 华为商品卡片

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    Column() {
      Column(){
        Image($r('app.media.all_x5'))
          .width(150)
        Text('HUAWEI Mate X5')
          .width('100%')
          .fontWeight(800)
          .margin(15)
        Text('¥12999起')
          .fontSize(12)
          .width('100%')
          .margin(5)
        Row(){
          Row(){
            Text('了解更多')
              .fontSize(12)
            Image($r('app.media.ic_public_arrow_right'))
              .width(13)
          }.margin({right:20})
          Row(){
            Text('购买')
              .fontSize(12)
            Image($r('app.media.ic_public_arrow_right'))
              .width(13)
          }
        }.width('100%').margin({top:10,bottom:10})

      }.width(200)
      .shadow({radius:20,color:Color.Grey})
      .borderRadius(8)
      .margin(20)
      .backgroundColor(Color.White)
      .padding(10)

      }
      .height('100%')
      .width('100%')
      .backgroundColor('#eee')
    }
  }