鸿蒙通用属性介绍
本篇文章主要对纯血鸿蒙中ArkUI的通用属性做了一个总结:
- 位置属性
- 尺寸属性
- 边框属性
- 背景属性
- 其他常用属性集合
通用属性
1. 位置属性
1. width
设置组件自身的宽度，若子组件的宽大于父组件的宽，则会画出父组件的范围。
接收参数示例：'50%' 、100vp 、100px 、100
如果直接写数字默认单位是 vp，开发中推荐使用 vp 单位即推荐直接写数字
2. height
设置组件自身的高度，若子组件的高大于父组件的高，则会画出父组件的范围。
接收参数和 width 属性一致
3. size
设置高宽尺寸
接收参数示例：{width: 100, height: 100}
4. padding
设置内边距属性
接收参数示例：
- 100：四个方向的内边距统一设置成100
- {top: 10, bottom: 15, left: 20, right: 25}：给每一个方向的内边距单独设置间隔
5. margin
设置外边距属性
接收参数和 padding 属性一致
6. layoutWeight
对子组件进行重新布局
接收参数示例：1
解释： 该属性可以自动适应父组件的主轴权重，若元素1是 layoutWeight(1)，元素2是 layoutWeight(3)，那么元素1会占主轴长度总4份中的1份，元素2则是占3份。
演示
@Entry
@Component
struct Test {
build() {
Column() {
Text('我的长宽是用width以及height设置的')
.height(30)
.width('100%')
.backgroundColor(Color.Pink)
Text('我的长宽是用size设置的')
.size({ height: 30, width: 300 })
.backgroundColor(Color.Pink)
.margin({ top: 10, bottom: 10 })
Text('宽高自适应')
.padding(10)
.backgroundColor(Color.Orange)
// layoutWeight 属性测试
Row() {
Text()
.height(50)
.backgroundColor(Color.Red)
.layoutWeight(1)
Text()
.height(50)
.backgroundColor(Color.Blue)
.layoutWeight(5)
}
.width('100%')
.margin({ top: 10 })
}
.width('100%')
.height('100%')
.padding(10)
}
}
补充： 如果想要将超出父元素的部分隐藏，这里推荐使用clip属性，参数是boolean类型，即 组件.clip(true) 即可
2. 尺寸属性
1. align
设置容器元素绘制区域内的子元素的对齐方式
接收参数示例：Alignment.TopStart，位置示例如下
约束：只在Stack、Button、Marquee、StepperItem、text、TextArea、TextInput、FolderStack中生效
2. direction
设置容器元素内主轴方向上的布局
接收参数示例：Direction.Ltr，Direction.Rtl，Direction.Auto
- Ltr： 元素从左到右布局
- Rtl：元素从右到左布局
- Auto：使用系统默认布局方向
约束：该属性在Column组件上不生效
3.position
绝对定位，确定子组件相对父组件的位置，定位的起始点在父组件的左上角 即 x=0，y=0 的位置
接收参数示例：
- {x = 0, y = 0}：x 是从左到右的距离，y 是从上到下的距离，可以设置负值
- {top: 0, bottom: 0, right: 0, left: 0}：top 是到顶边距离，bottom 是到底边的距离，right 是到右边的距离，left 是到左边的距离，一般情况下，上下，左右各选其一即可实现定位需求
4.offset
相对偏移，组件相对原本的布局位置进行偏移
接收参数示例：和 position 绝对定位的接收参数一致
演示
@Entry
@Component
struct Index {
build() {
Column() {
// align 测试
Stack() {
Text()
.width(50).height(50).backgroundColor(Color.Red)
}
.align(Alignment.Bottom)
.backgroundColor(Color.Pink)
.margin({ bottom: 10 })
.width('100%')
.layoutWeight(1)
// direction 测试
Row() {
Text()
.width(50).height(50).backgroundColor(Color.Red)
Text()
.width(50).height(50).backgroundColor(Color.Yellow)
}
.direction(Direction.Rtl)
.backgroundColor(Color.Orange)
.margin({ bottom: 10 })
.width('100%')
.layoutWeight(1)
// position 测试
Column() {
Text()
.width(50).height(50).backgroundColor(Color.Red)// .position({ x: 0, y: 0 })
.position({ bottom: 0, left: '50%' })
}
.backgroundColor(Color.Pink)
.margin({ bottom: 10 })
.width('100%')
.layoutWeight(1)
// offset 测试
Column() {
Text()
.width(50).height(50).backgroundColor(Color.Red)
.offset({ x: 100, y: 20 })
}
.backgroundColor(Color.Orange)
.margin({ bottom: 10 })
.width('100%')
.layoutWeight(1)
}
.width('100%')
.height('100%')
}
}
补充： 使用绝对定位之后，该元素不占有原来的位置，可以理解为飘了，元素想放哪都可以自定义；相对定位不同于绝对定位，相对定位之后，该元素还会占据着原有的位置，相当于有一个闲置的房子在这里，就算我不在这里，这块地还是有东西的
3. 边框属性
1. borderStyle
设置元素的边框线条样式
接收参数示例：
-
BorderStyle.Solid：接收的参数是 BorderStyle 的枚举，枚举属性如下：
- Solid（实线）
- Dashed（方形虚线）
- Dotted（圆点）
-
{top: BorderStyle.Solid, bottom: BorderStyle.Solid, left: BorderStyle.Solid, right: BorderStyle.Solid }：这种写法可以分别定义上、下、左、右四条边的线条样式
2. borderWidth
设置边框的宽度
接收参数示例：
- 10：统一设置四条边的宽度
- {top: 10, bottom: 10, left: 10, right: 10}：分别设置四条边的边框宽度，不写或写0都可以隐藏不需要展示的边框
3. borderColor
设置边框的颜色
接收参数（Color枚举、十六进制、rgb格式）示例：
- Color.Red：统一设置四条边的颜色为红色
- {top: Color.Pink, bottom: Color.Pink, left: Color.Pink, right: Color.Pink}：可以分别设置上、下、左、右四条边的颜色
4. borderRadius
设置边框的圆角。圆角大小受组件尺寸限制，最大值为组件宽或高的一半。
接收参数示例：
- 100：统一设置四个角的圆角值为100
- {topLeft: 10, topRight: 10, bottomLeft: 10, bottomRight: 10}：可以分别设置左上、右上、左下、右下四个角的圆角值
圆角值计算图示：
这里我们可以很清晰的看到，当设置了一个50的圆角值，其实就是用了一个半径50圆来将多余的部分裁剪掉的
5. border
设置边框样式
接收参数示例：{width: 参数和 borderWidth 一致, color: 参数和 borderColor 一致, radius: 参数和 borderRadius 一致, style: 参数和 borderStyle 一致}
小技巧： 当我们只想展示某一条边时可以单独设置某一条边的宽度即可
演示
@Entry
@Component
struct Index {
build() {
Column({ space: 20 }) {
Text('分别设置')
.width(100)
.height(100)
.borderWidth(5)
.borderColor(Color.Red)
.borderStyle({
top: BorderStyle.Solid,
left: BorderStyle.Dashed,
bottom: BorderStyle.Dotted
})
.borderRadius({
topLeft: 10,
topRight: 20,
bottomLeft: 20,
bottomRight: 10
})
Text('统一设置')
.width(100)
.height(100)
.border({
width: 5,
color: Color.Pink,
style: BorderStyle.Dotted,
radius: 20
})
}
.padding(100)
}
}
4. 背景属性
1. backgroundColor
设置组件背景色
接收参数示例：
- Color.Red
- 'rgb(255, 100, 255)'
- #ffffff
2. backgroundImage
设置组件的背景图片
接收参数示例：
- $r('app.media.startIcon')：获取本地资源中的图片
- 网络图片地址（字符串）
3. backgroundImageSize
设置组件背景图片的宽高
接收参数示例：
-
{width: 100, height: 100}
-
ImageSize.Cover，ImageSize 的枚举，属性如下：
- Cover：保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界
- Contain：保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内
- Auto：保持原图的比例不变
- FILL：不保持宽高比进行放大缩小，使得图片充满显示边界
4. backgroundImagePosition
设置背景图的位置
接收参数示例：
- {x: 0, y: 0}：类似于 position 绝对定位的方式进行背景位置调整
- Alignment 的枚举，Alignment.Top 等等，九宫格布局
演示
@Entry
@Component
struct Index {
build() {
Column({ space: 20 }) {
Text('')
.width(200)
.height(100)
.backgroundImage($r('app.media.startIcon'))
.backgroundImageSize(ImageSize.Auto)
.backgroundColor(Color.Pink)
.backgroundImagePosition(Alignment.Center)
}
.padding({ top: 100, left: 20 })
}
}
5. 其他常用属性集合
1. opacity
设置组件的不透明度
参数为0~1的数字，默认为1
效果如下：
我们可以很明显的观察到组件中的文字也被透明化了，在实际使用中会导致容器内部的所有组件都都透明化，按需使用
2. visibility
控制组件的显隐
参数：Visibility 的枚举
- Hidden：隐藏，但参与布局进行占位
- Visible：显示
- None： 隐藏，但不参与布局，不进行占位
3. enabled
设置组件是否可交互，可交互状态下响应点击事件、触摸事件、拖拽事件、按键事件、焦点事件和鼠标事件
参数：boolean类型
4. zIndex
设置组件的堆叠顺序
参数：number 类型， 同一容器中兄弟组件显示层级关系，zIndex值大的组件会覆盖在zIndex值小的组件上方
5. 图形变换
-
rotate
设置组件旋转
参数：{angle: 50, centerX: 10, centerY: 10}
- angle：旋转角度
- centerX：旋转的 x 轴坐标
- centerY：旋转的 y 轴坐标
默认旋转中心在 [0, 0] 处，centerX 和 centerY 就是来改变旋转圆心的
-
translate
设置组件平移，类似于 offset，平移后也会占据原有位置，平移初始位置也是原有位置
参数：{x: 10, y: 10}
-
scale
设置组件缩放
参数：{x: 0.5, y: 2, centerX: '50%', centerY: '50%'}
- x 和 y 分别表示在 x 轴和在 y 轴上的缩放倍率，数值在 [0, 1] 区间表示缩小，数值 >1 表示放大
- centerX 和 centerY 设置缩放的原点，即缩放在该原点周围进行
6. shadow
为组件添加阴影效果
简单使用，参数：ShadowStyle 的枚举
- OUTER_DEFAULT_XS：超小阴影
- OUTER_DEFAULT_SM：小阴影
- OUTER_DEFAULT_MD：中阴影
- OUTER_DEFAULT_LG：大阴影
- OUTER_FLOATING_SM：浮动小阴影
- OUTER_FLOATING_MD：浮动中阴影
7. 颜色渐变
-
linearGradient线性渐变
参数：
{ angle?: 线性渐变的起始角度, direction?: 线性渐变的方向, colors: [[颜色1, 颜色1所处位置], [颜色2, 颜色2所处位置], ......], repeating?: 是否重复着色 }direction：参数是 GradientDirection 的枚举
- Left：从右向左
- Top：从下向上
- Right：从左向右
- Bottom：从上向下
- LeftTop：从右下 到 左上
- LeftBottom：从右上 到 左下
- RightTop：从左下 到 右上
- RightBottom：从左上 到 右下
演示
```
@Entry
@Component
struct Index {
build() {
Column({ space: 20 }) {
Column() {
}
.width(200)
.height(100)
.backgroundColor(Color.Red)
.linearGradient({
colors: [[Color.Red, 0], [Color.Blue, 0.1]], // 颜色渐变
direction: GradientDirection.Left, // 从左往右
angle: 90, // 起始角度
repeating: true // 重复着色
})
}
.padding({ top: 100, left: 80 })
}
}
```
2. sweepGradient
角度渐变
参数:
{
center: 角度渐变的中心点,
start?: 角度渐变的起点,
end?: 角度渐变的终点,
rotation?: 角度渐变的旋转角度,
colors: [[颜色1, 颜色1所处位置], [颜色2, 颜色2所处位置], ......],
repeating?: 是否重复着色
}
演示
@Entry
@Component
struct Index {
build() {
Column({ space: 20 }) {
Column() {
}
.width(200)
.height(100)
.backgroundColor(Color.Red)
.sweepGradient({
colors: [[Color.Red, 0], [Color.Blue, 0.1]], // 颜色渐变
center: [80, 50], // 中心
start: 0, // 开始角度
end: 359, // 结束角度
rotation: 45, // 旋转角度
repeating: true, // 渐变颜色是否重复
})
}
.padding({ top: 100, left: 80 })
}
}
3. radialGradient
径向渐变
参数:
{
center: 径向渐变的中心点坐标,
radius: 径向渐变的半径,
colors: [[颜色1, 颜色1所处位置], [颜色2, 颜色2所处位置], ......],
repeating?: 是否重复着色
}
演示
@Entry
@Component
struct Index {
build() {
Column({ space: 20 }) {
Column() {
}
.width(200)
.height(100)
.backgroundColor(Color.Red)
.radialGradient({
colors: [[Color.Red, 0], [Color.Blue, 0.1]], // 颜色渐变
center: [100, 50], // 圆心点
radius: 100, // 径向渐变的半径
repeating: true, // 重复着色
})
}
.padding({ top: 100, left: 80 })
}
}
8. stateStyles
设置组件不同状态的样式
接收参数示例：
{
normal: {
.通用属性
},
pressed: {
.通用属性
},
disabled: {
.通用属性
}
...
}
- normal：组件无状态时的样式
- pressed：组件按下状态的样式
- disabled：组件禁用状态的样式
- focused：组件获焦状态的样式
- clicked：组件点击状态的样式
- selected：组件选中状态的样式
注意：stateStyles 多态样式中只有设置通用属性才能生效！！！
9. clip
是否对子组件超出当前组件范围外的区域进行裁剪
参数：boolean 类型
