【HarmonyOS实战开发】鸿蒙常用通用属性详解

鸿蒙通用属性介绍

本篇文章主要对纯血鸿蒙中ArkUI的通用属性做了一个总结:

1. 位置属性
2. 尺寸属性
3. ���框属性
4. 背景属性
5. 其他常用属性集合

通用属性

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. 图形变换

1. rotate

   设置组件旋转

   参数：{angle: 50, centerX: 10, centerY: 10}

   • angle：旋转角度
   • centerX：旋转的 x 轴坐标
   • centerY：旋转的 y 轴坐标

   默认旋转中心在 [0, 0] 处，centerX 和 centerY 就是来改变旋转圆心的

2. translate

   设置组件平移，类似于 offset，平移后也会占据原有位置，平移初始位置也是原有位置

   参数：{x: 10, y: 10}

3. 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. 颜色渐变

1. 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/