鸿蒙通用属性介绍
本篇文章主要对纯血鸿蒙中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 类型
写在最后
●如果你觉得这篇内容对你还蛮有帮助,我想邀请你帮我三个小忙:
●点赞,转发,有你们的 『点赞和评论』,才是我创造的动力。
●关注小编,同时可以期待后续文章ing🚀,不定期分享原创知识。
●更多鸿蒙最新技术知识点,请移步前往小编:https://gitee.com/