1.尺寸设置

用于设置组件的宽高、边距。

  • width：设置组件自身的宽度，缺省时使用元素自身内容需要的宽度。若子组件的宽大于父组件的宽，则会画出父组件的范围。单位：vp。
  • height:设置组件自身的高度，缺省时使用元素自身内容需要的高度。若子组件的高大于父组件的高，则会画出父组件的范围。单位：vp。
  • size:设置高宽尺寸。单位：vp。示例：{width:100,height:100}。
  • padding:设置内边距属性。默认值：0vp。padding设置百分比时，上下左右内边距均以父容器的width作为基础值。
  • margin:设置外边距属性。默认值：0vp。margin设置百分比时，上下左右外边距均以父容器的width作为基础值。

  • layoutWeight:父容器尺寸确定时，设置了layoutWeight属性的子元素与兄弟元素占主轴尺寸按照权重进行分配，忽略元素本身尺寸设置，表示自适应占满剩余空间。默认值：0。这个属性和android中的layout_weight属性是一样的用途。

    注意：仅在Row/Column/Flex布局中生效。可选值为大于等于0的数字，或者可以转换为数字的字符串。

  • constraintSize:设置约束尺寸，组件布局时，进行尺寸范围限制。constraintSize的优先级高于Width和Height。若设置的minWidth大于maxWidth，则minWidth生效，minHeight与maxHeight同理。

  1. //默认值：
  2. {
  4. minWidth: 0,
  6. maxWidth: Infinity,
  8. minHeight: 0,
  10. maxHeight: Infinity
  12. }

示例代码如下：

  1. @Entry
  2. @Component
  3. struct TextStyle{
  5.   build() {
  6.     Column({space:10}) {
  7.       Text('我是文本组件')
  8.         .size({width:300,height:100}) //设置组件的宽高
  9.         .backgroundColor(Color.Pink)
  10.         .fontColor(Color.White)
  11.         .textAlign(TextAlign.Center)  //文本内容在组件中的对齐方式，类似于android中的gravity属性
  12.         .padding(20)  //设置内边距
  13.         .margin(50)   //设置外边距
  14.     }
  15.   }
  16. }

尺寸设置

2.位置设置

设置组件的对齐方式、布局方向和显示位置。

2.1 对齐方式align

设置元素内容的对齐方式，只有当设置的 width 和 height 大小超过元素本身内容大小时生效。参数类型：Alignment。默认值：Alignment.Center。

特别注意：align属性与textAlign属性的区别，textAlign属性是专门用于文本对齐的，参数类型为TextAlign，其值为：Start、Center、End、JUSTIFY。从它的属性值可以看出：文本的位置只能出现在纵轴的中点的水平方向的左侧、中间、右侧。如下图：

文本对齐方式

通过align属性也可以让文本在左侧垂直方向的上、中、下显示，但不能实现在右侧垂直方向的上、和下显示。如图：

align文本对齐

  1. @Entry
  2. @Component
  3. struct PositionExample{
  5.   build() {
  6.     Column({ space: 10 }) {
  7.       Text("align")                    
  8.         .fontSize(20)
  9.         .backgroundColor((Color.Pink))
  11.       Text("align")
  12.         .fontSize(20)
  13.         .size({width: 200, height: 260})
  14.         .align(Alignment.Start)     // 设置内容对齐方式
  15.         //.textAlign(TextAlign.Start) //文本对齐方式
  16.         .backgroundColor((Color.Pink))
  17.     }
  18.     .width('100%')
  19.     .height("100%")
  20.     .padding(10)
  21.   }
  22. }

小结：对齐方式有两种，一种是组件的内容的对齐，另一种是组件自身位置的对齐。但是，子组件是父组件的内容，可以通过设置父组件的内容对齐方式来实现子组件位置的对齐。组件内容的对齐方式和组件位置的对齐方式是相对的，子组件的位置对齐可以看作父组件内容的对齐。所以，两种对齐方式可以统一的看成是内容对齐方式，只是容器类的内容对齐方式和非容器类对齐方式的属性不一样，同时，容器类对齐方式的属性可能只在某些特定的容器类内生效。

2.2 布局方向direction

设置容器内元素在主轴方向（主要是水平方向，因为在Column上不管怎么设置只有一种从上到下的效果）上的布局方式。默认值：Direction.Auto。

  1. @Entry
  2. @Component
  3. struct PositionExample{
  5.   build() {
  6.     Column({ space: 10 }) {
  7.       // 父容器设置direction为Direction.Ltr，子元素从左到右排列
  8.       Text('从左往右排列：').fontSize(13).fontColor(Color.Green).width('90%')
  9.       Row() {
  10.         Text('1').height(50).width('25%').fontSize(16).backgroundColor(0xF5DEB3)
  11.         Text('2').height(50).width('25%').fontSize(16).backgroundColor(0xD2B48C)
  12.         Text('3').height(50).width('25%').fontSize(16).backgroundColor(0xF5DEB3)
  13.         Text('4').height(50).width('25%').fontSize(16).backgroundColor(0xD2B48C)
  14.       }
  15.       .width('90%')
  16.       .direction(Direction.Ltr) // 从左往右
  18.       Text('从右往左排列：').fontSize(13).fontColor(Color.Green).width('90%')
  19.       Row() {
  20.         Text('1').height(50).width('25%').fontSize(16).backgroundColor(0xF5DEB3)
  21.         Text('2').height(50).width('25%').fontSize(16).backgroundColor(0xD2B48C)
  22.         Text('3').height(50).width('25%').fontSize(16).backgroundColor(0xF5DEB3)
  23.         Text('4').height(50).width('25%').fontSize(16).backgroundColor(0xD2B48C)
  24.       }
  25.       .width('90%')
  26.       .direction(Direction.Rtl) //从右往左
  28.       Text('从右往左排列：').fontSize(13).fontColor(Color.Red).width('90%')
  29.       //换成Column后，不管是Direction.Rtl还是Direction.Ltr，都只有一个效果
  30.       Column() {
  31.         Text('1').height(50).width('25%').fontSize(16).backgroundColor(0xF5DEB3)
  32.         Text('2').height(50).width('25%').fontSize(16).backgroundColor(0xD2B48C)
  33.         Text('3').height(50).width('25%').fontSize(16).backgroundColor(0xF5DEB3)
  34.         Text('4').height(50).width('25%').fontSize(16).backgroundColor(0xD2B48C)
  35.       }
  36.       .width('90%')
  37.       .direction(Direction.Rtl)
  38.     }
  39.     .width('100%')
  40.     .height("100%")
  41.     .padding(10)
  42.   }
  43. }

布局方向

2.3 绝对定位position

绝对定位，设置子元素左上角相对于父容器左上角偏移位置。在布局容器中，设置该属性不影响父容器布局，仅在绘制时进行位置调整。适用于置顶显示、悬浮按钮等组件在父容器中位置固定的场景。

  1. @Entry
  2. @Component
  3. struct PositionExample{
  5.   build() {
  6.     Column({ space: 20 }) {
  7.       Text('默认布局').fontSize(16)
  8.       Row() {
  9.         SubText({text:'1',color:Color.Red})
  10.         SubText({text:'2',color:Color.Green})
  11.         SubText({text:'3',color:Color.Blue})
  13.       }.width('90%').height(100).backgroundColor(Color.Pink)
  15.       Text('绝对定位后的布局').fontSize(16)
  16.       Row() {
  17.         SubText({text:'1',color:Color.Red})
  18.         SubText({text:'2',color:Color.Green})
  19.           .position({x:200,y:0}) // 设置绝对定位
  20.         SubText({text:'3',color:Color.Blue})
  21.           .position({x:100,y:60}) // 设置绝对定位
  23.       }.width('90%').height(100).backgroundColor(Color.Pink)
  25.     }
  26.     .width('100%')
  27.     .height("100%")
  28.     .padding(10)
  29.   }
  30. }
  32. @Component
  33. struct SubText{
  34.   @State text:string = '1'
  35.   @State color:Color = Color.Red
  38.   build() {
  39.     Text(this.text)
  40.       .fontSize(16)
  41.       .fontColor(Color.White)
  42.       .textAlign(TextAlign.Center)
  43.       .backgroundColor(this.color)
  44.       .height(50)
  45.       .width('25%')
  46.   }
  47. }

绝对定位

小结：对使用了绝对定位的子组件，它会相对于父组件左上角进行偏移，对于偏移后“完全空出”的空间会被后面的子组件递补上，同时，如果偏移量大于父组件的大小则会超出父组件，“跑”到父组件外面去。

2.4 相对定位offset

相对定位，设置子素相对于自身的额外偏移量。设置该属性，不影响父容器布局，仅在绘制时进行位置调整。

  1. @Entry
  2. @Component
  3. struct PositionExample{
  5.   build() {
  6.     Column({ space: 20 }) {
  7.       Text('默认布局').fontSize(16)
  8.       Row() {
  9.         SubText({text:'1',color:Color.Red})
  10.         SubText({text:'2',color:Color.Green})
  11.         SubText({text:'3',color:Color.Blue})
  13.       }.width('90%').height(100).backgroundColor(Color.Pink)
  15.       Text('相对定位后的布局').fontSize(16)
  16.       Row() {
  17.         SubText({text:'1',color:Color.Red})
  18.         SubText({text:'2',color:Color.Green})
  19.           .offset({x:200,y:0}) // 设置相对定位
  20.         SubText({text:'3',color:Color.Blue})
  22.       }.width('90%').height(100).backgroundColor(Color.Pink)
  24.     }
  25.     .width('100%')
  26.     .height("100%")
  27.     .padding(10)
  28.   }
  29. }
  31. @Component
  32. struct SubText{
  33.   @State text:string = '1'
  34.   @State color:Color = Color.Red
  37.   build() {
  38.     Text(this.text)
  39.       .fontSize(16)
  40.       .fontColor(Color.White)
  41.       .textAlign(TextAlign.Center)
  42.       .backgroundColor(this.color)
  43.       .height(50)
  44.       .width('25%')
  45.   }
  46. }

相对布局

小结：设置相对布局后，子组件会相对其自身进行偏移，但与绝对定位不同的是，子组件偏移之后其原来的位置依然被占据，后面的子组件不会递补上来，这一点和HTML中的相对布局和绝对布局是一样的。

2.5 设置锚点markAnchor

设置子元素在位置定位时的锚点，以元素左上角作为基准点进行偏移。通常配合position和offset属性使用，单独使用时，效果类似offset。

  1. @Entry
  2. @Component
  3. struct PositionExample{
  5.   build() {
  6.     Column({ space: 20 }) {
  7.       Text('默认布局').fontSize(16)
  8.       Row() {
  9.         SubText({text:'1',color:Color.Red})
  10.         SubText({text:'2',color:Color.Green})
  11.         SubText({text:'3',color:Color.Blue})
  13.       }.width('90%').height(100).backgroundColor(Color.Pink)
  15.       Text('设置锚点后的布局').fontSize(16)
  16.       Row() {
  17.         SubText({text:'1',color:Color.Red})
  18.         SubText({text:'2',color:Color.Green})
  19.           .markAnchor({x:20,y:-60}) // 设置锚点
  20.         SubText({text:'3',color:Color.Blue})
  22.       }.width('90%').height(100).backgroundColor(Color.Pink)
  24.     }
  25.     .width('100%')
  26.     .height("100%")
  27.     .padding(10)
  28.   }
  29. }

设置锚点

3.布局约束

通过组件的宽高比和显示优先级约束组件显示效果。可以用于实现响应式布局效果，如在不同屏幕尺寸、竖屏和横屏等情况下。

3.1 aspectRatio属性

指定当前组件的宽高比，aspectRatio = width/height。

3.2 displayPriority属性

设置当前组件在布局容器中显示的优先级，当父容器空间不足时，低优先级的组件会被隐藏。小数点后的数字不作优先级区分，即区间为[x, x + 1)内的数字视为相同优先级。例如：1.0与1.9为同一优先级。注意：仅在Row/Column/Flex(单行)容器组件中生效。

4.边框设置

设置组件边框样式。可以通过border属性统一设置，也可以通过borderStyle、borderWidth、borderColor、borderRadius分别设置。

  1. @Entry
  2. @Component
  3. struct PositionExample{
  5.   build() {
  6.     Column({ space: 20 }) {
  7.       Text('.border')
  8.         .fontSize(50)
  9.         .width(300)
  10.         .height(300)
  11.         .border({
  12.           width: { left: '5lpx', right: '10lpx', top: '20lpx', bottom: '30lpx' },
  13.           color: { left: '#e3bbbb', right: Color.Blue, top: Color.Red, bottom: Color.Green },
  14.           radius: { topLeft: 10, topRight: 20, bottomLeft: 40, bottomRight: 80 },
  15.           style: {
  16.             left: BorderStyle.Dotted,
  17.             right: BorderStyle.Dotted,
  18.             top: BorderStyle.Solid,
  19.             bottom: BorderStyle.Dashed
  20.           }
  21.         }).textAlign(TextAlign.Center)
  23.     }
  24.     .width('100%')
  25.     .height("100%")
  26.     .padding(10)
  27.   }
  28. }

设置组件边框

5.图片边框设置

设置容器组件的图片边框样式。属性：borderImage，图片边框或者渐变色边框设置接口。参数类型：BorderImageOption

6.背景设置

设置组件的背景样式。

  • backgroundColor：设置组件的背景色。
  • backgroundImage：src：图片地址，支持网络图片资源和本地图片资源地址(不支持svg类型的图片)。repeat：设置背景图片的重复样式，默认不重复。当设置的背景图片为透明底色图片，且同时设置了backgroundColor时，二者叠加显示，背景颜色在最底部。
  • backgroundImageSize：设置背景图像的高度和宽度。当输入为{width: Length, height: Length}对象时，如果只设置一个属性，则第二个属性保持图片原始宽高比进行调整。默认保持原图的比例不变。
  • backgroundImagePosition：设置背景图在组件中显示位置，即相对于组件左上角的坐标。默认值：{x:0,y:0}。x和y值设置百分比时，偏移量是相对组件自身宽高计算的。

7.透明度设置

设置组件的透明度。

  • opacity：元素的不透明度，取值范围为0到1，1表示不透明，0表示完全透明, 达到隐藏组件效果，但是在布局中占位。注意：子组件可以继承父组件的此属性。默认值：1

8.显隐控制

控制组件是否可见。

  • visibility：控制当前组件显示或隐藏。根据具体场景需要可使用条件渲染代替。默认值：Visibility.Visible。其中，Hidden值表示隐藏，但参与布局进行占位。Visible表示显示。None表示隐藏，但不参与布局，不进行占位。

9.禁用控制

组件是否可交互，可交互状态下响应点击事件、触摸事件、拖拽事件、按键事件、焦点事件和鼠标事件。

  • enabled：值为true表示组件可交互，响应点击等操作。值为false表示组件不可交互，不响应点击等操作。

10.浮层

设置组件的遮罩文本。就是在组件的上面覆盖一层文本。

  • overlay：在当前组件上，增加遮罩文本。value: 遮罩文本内容。options: 文本定位，align设置文本相对于组件的方位，offset为文本基于自身左上角的偏移量。文本默认处于组件左上角。

11.Z序控制

组件的Z序，设置组件的堆叠顺序。同一容器中兄弟组件显示层级关系。

  • zIndex：zIndex值越大，显示层级越高，即zIndex值大的组件会覆盖在zIndex值小的组件上方。

12.图形变换

用于对组件进行旋转、平移、缩放、矩阵变换等操作。

13.图像效果

设置组件的模糊，阴影效果以及设置图片的图像效果。

14.形状裁剪

用于对组件进行裁剪、遮罩处理。

  1. @Entry
  2. @Component
  3. struct PositionExample{
  5.   build() {
  6.     Column({ space: 20 }) {
  7.       Text('clip').fontSize(12).width('75%').fontColor('#DCDCDC')
  8.       Row() {
  9.         Image($r('app.media.testImg')).width('500px').height('280px')
  10.       }
  11.       .clip(true) // 如这里不设置clip为true，则Row组件的圆角不会限制其中的Image组件，Image组件的四个角会超出Row
  12.       .borderRadius(20)
  13.       // 用一个280px直径的圆对图片进行裁剪
  14.       Image($r('app.media.testImg'))
  15.         .clip(new Circle({ width: '280px', height: '280px' }))
  16.         .width('500px').height('280px')
  18.       Text('mask').fontSize(12).width('75%').fontColor('#DCDCDC')
  19.       // 给图片添加了一个500px*280px的方形遮罩
  20.       Image($r('app.media.testImg'))
  21.         .mask(new Rect({ width: '500px', height: '280px' }).fill(Color.Gray))
  22.         .width('500px').height('280px')
  24.       // 给图片添加了一个280px*280px的圆形遮罩
  25.       Image($r('app.media.testImg'))
  26.         .mask(new Circle({ width: '280px', height: '280px' }).fill(Color.Gray))
  27.         .width('500px').height('280px')
  29.     }
  30.     .width('100%')
  31.     .height("100%")
  32.     .padding(10)
  33.   }
  34. }

形状裁剪

15.文本样式设置

  • fontColor:设置字体颜色
  • fontSize:设置字体大小，使用fp单位。字体默认大小16。不支持设置百分比字符串。
  • fontStyle:设置字体样式。默认值：FontStyle.Normal
  • fontWeight:设置文本的字体粗细，number类型取值[100, 900]，取值间隔为100，默认为400，取值越大，字体越粗。string类型仅支持number类型取值的字符串形式，例如”400”，以及”bold”、”bolder”、”lighter”、”regular”、”medium”，分别对应FontWeight中相应的枚举值。默认值：FontWeight.Normal
  • fontFamily:设置字体列表。默认字体’HarmonyOS Sans’
  • lineHeight:设置文本的文本行高，设置值不大于0时，不限制文本行高，自适应字体大小，Length为number类型时单位为fp。

  • decoration:设置文本装饰线样式及其颜色。默认值：{type: TextDecorationType.None,color：Color.Black}

    1. @Entry
    2. @Component
    3. struct TextStyle{
    5. build() {
    6.   Column({space:10}){
    7.     Text('我是文本')
    9.     Text('设置字体样式属性')
    10.       .fontColor(Color.Orange)
    11.       .fontSize(20)
    12.       .fontWeight(FontWeight.Bolder)
    13.       .decoration({type:TextDecorationType.Underline,color:Color.Pink})
    15.     Text('今天，关系型数据库最主要的两个代表是闭源的 Oracle 和开源的 MySQL。当然，还有很多了，比如微软的 SQL Server，IBM 的 DB2 等，还有开源的 PostgreSQL。关系型数据库的世界中有好多好多产品。当然，还是 Oracle 和 MySQL 是比较主流的。所以，这里主要介绍更为开放和主流的 MySQL。')
    16.       .lineHeight(30)
    17.       .fontColor(Color.Green)
    18.   }
    19. }
    20. }

    文本样式

16.颜色渐变

设置组件的颜色渐变效果。

17.Popup气泡弹窗控制

给组件绑定popup弹窗，并设置弹窗内容，交互逻辑和显示状态。

  1. @Entry
  2. @Component
  3. struct PositionExample{
  4.   @State handlePopup: boolean = false
  6.   build() {
  7.     Column({ space: 20 }) {
  8.       // PopupOptions 类型设置弹框内容
  9.       Button('PopupOptions')
  10.         .onClick(() => {
  11.           this.handlePopup = !this.handlePopup
  12.         })
  13.         //绑定气泡弹窗
  14.         .bindPopup(this.handlePopup, {
  15.           message: '你确定执行当前操作吗？',
  16.           placementOnTop: true,
  17.           showInSubWindow:false,
  18.           primaryButton: {
  19.             value: '确定',
  20.             action: () => {
  21.               this.handlePopup = !this.handlePopup
  22.               console.info('confirm Button click')
  23.             }
  24.           },
  25.           // 第二个按钮
  26.           secondaryButton: {
  27.             value: '取消',
  28.             action: () => {
  29.               this.handlePopup = !this.handlePopup
  30.               console.info('cancel Button click')
  31.             }
  32.           },
  33.           onStateChange: (e) => {
  34.             console.info(JSON.stringify(e.isVisible))
  35.             if (!e.isVisible) {
  36.               this.handlePopup = false
  37.             }
  38.           }
  39.         })
  40.         .position({ x: 100, y: 50 })
  42.     }
  43.     .width('100%')
  44.     .height("100%")
  45.     .padding(10)
  46.   }
  47. }

气泡弹窗控制

18.菜单控制

为组件绑定弹出式菜单，弹出式菜单以垂直列表形式显示菜单项，可通过长按、点击或鼠标右键触发。

  1. @Entry
  2. @Component
  3. struct PositionExample{
  5.   build() {
  6.     Column({ space: 20 }) {
  7.       Text('弹出菜单')
  8.         .backgroundColor(Color.Orange)
  9.         .width(150)
  10.         .height(60)
  11.         .fontColor(Color.White)
  12.         .textAlign(TextAlign.Center)
  13.         .bindMenu([
  14.           {
  15.             value: 'Menu1',
  16.             action: () => {
  17.               console.info('handle Menu1 select')
  18.             }
  19.           },
  20.           {
  21.             value: 'Menu2',
  22.             action: () => {
  23.               console.info('handle Menu2 select')
  24.             }
  25.           },
  26.         ])
  28.     }
  29.     .width('100%')
  30.     .height("100%")
  31.     .padding(10)
  32.   }
  33. }

菜单控制

19.组件标识

id为组件的唯一标识，在整个应用内唯一。本模块提供组件标识相关接口，可以获取指定id组件的属性，也提供向指定id组件发送事件的功能。组件的唯一标识，唯一性由使用者保证。默认值：’’

20.点击控制

设置组件是否可以响应点击事件、触摸事件等手指交互事件。

  • touchable：设置当前组件是否可以响应点击事件、触摸事件等手指交互事件。