一.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:默认，原图尺寸
