一.svg图标

• svg 图标：可任意放大缩小不失真、可以任意改颜色
• 官网地址：https://developer.huawei.com/consumer/cn/design/harmonyos-icon/
• 使用：图标库中选取:选取 → 下载(svg) → 拷贝使用

Image($r('app.media.ic_dianpu')) .width(40) .fillColor('#b0473d')

二.内边距 padding

 Button("四个方向分别设置").padding({right:10,left:10,top:10,bottom:10})
 Button("四个方向统一设置").padding(10)

三.外边距 margin

  Button("四个方向分别设置").margin({right:10,left:10,top:10,bottom:10})
  Button("四个方向统一设置").margin(10)

四.边框 border

Text('边框语法')
        .border({
          width: {
            left: 1, right: 2
          },
          color: {
            left: Color.Red, right: Color.Blue
          }, style: {
            left: BorderStyle.Dashed,
            right: BorderStyle.Dotted
          }
        })

五.圆角 borderRadius

• 普通圆角

  Button("圆角")
        .borderRadius(5) //四个圆角可统一设置
        .borderRadius({ topLeft:10,topRight:20,bottomRight:10,bottomLeft:10 })//四个圆角可单独设置

• 正圆圆角：圆角弧度是宽或高的一半

   Text('正圆')
        .width(100) // 宽度高度一样 .height(100)
        .borderRadius(50) // 圆角是宽或高的一半

• 胶囊圆角：左右半圆

Text('胶囊按钮')
        .width(150) // 宽度大，高度小 
        .height(50)
        .borderRadius(25) // 圆角是高的一半

五.背景属性

• 背景色 backgroundColor
• 背景图 backgroundImage
• 背景图位置 backgroundImagePosition
• 背景图尺寸 backgroundImageSize

Text("背景属性")
        .width(100)
        .height(100)
        .backgroundColor(Color.Red)
        .backgroundImage($r("app.media.foreground"))
        .backgroundImagePosition(Alignment.TopStart)
        .backgroundImageSize(ImageSize.Cover)

枚举 ImageSize:

• Contain:等比例缩放背景图，当宽或高与组件尺寸相同停止缩放
• Cover:等比例缩放背景图至图片完全覆盖组件范围
• Auto:默认，原图尺寸