HarmonyOS ArkTS 通用属性

发布于 3 个月前 作者 itying888 122 次浏览 来自 分享

HarmonyOS ArkTS 通用属性用于设置组件的宽高、边距。

名称 参数说明 描述
width Length 设置组件自身的宽度，缺省时使用元素自身内容需要的宽度。若子组件的宽大于父组件的宽，则会画出父组件的范围。从API version 9开始，该接口支持在ArkTS卡片中使用。
height Length 设置组件自身的高度，缺省时使用元素自身内容需要的高度。若子组件的高大于父组件的高，则会画出父组件的范围。从API version 9开始，该接口支持在ArkTS卡片中使用。
size {width?: Length,height?: Length} 设置高宽尺寸。
padding Padding | Length 设置内边距属性。参数为Length类型时，四个方向内边距同时生效。默认值：0padding设置百分比时，上下左右内边距均以父容器的width作为基础值。从API version 9开始，该接口支持在ArkTS卡片中使用。
margin Margin | Length 设置外边距属性。参数为Length类型时，四个方向外边距同时生效。默认值：0margin设置百分比时，上下左右外边距均以父容器的width作为基础值。从API version 9开始，该接口支持在ArkTS卡片中使用。
constraintSize {minWidth?: Length,maxWidth?: Length,minHeight?: Length,maxHeight?: Length} 设置约束尺寸，组件布局时，进行尺寸范围限制。constraintSize的优先级高于Width和Height。若设置的minWidth大于maxWidth，则minWidth生效，minHeight与maxHeight同理。默认值：{minWidth: 0,maxWidth: Infinity,minHeight: 0,maxHeight: Infinity}

Length 长度类型，用于描述尺寸单位。

类型 说明
string 需要显式指定像素单位，如’10px’，也可设置百分比字符串，如’100%’。
number 默认单位vp。
Resource 资源引用类型，引入系统资源或者应用资源中的尺寸。

vp为虚拟像素单位：vp使用虚拟像素，使元素在不同密度的设备上具有一致的视觉体量。

fp字体像素单位：字体像素(font pixel) 大小默认情况下与 vp 相同，即默认情况下 1 fp = 1vp。如果用户在设置中选择了更大的字体，字体的实际显示大小就会在 vp 的基础上乘以用户设置的缩放系数，即 1 fp = 1 vp * 缩放系数。

@Entry
@Component
struct Index {
  build() {
    Column({ space: 10 }) {
      Row() {
        // 宽度200 ,高度200 ,外边距20(蓝色区域），内边距10（白色区域）
        Row() {
          Row().size({ width: '100%', height: '100%' }).backgroundColor(Color.Yellow)
        }
        .width(200)
        .height(200)
        .padding(10)
        .margin(20)
        .backgroundColor(Color.White)
      }.backgroundColor(Color.Blue)

      Text('this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text')
        .width('90%')
        .constraintSize({ maxWidth: 200 })
    
      // 父容器尺寸确定时，设置了layoutWeight的子元素在主轴布局尺寸按照权重进行分配，忽略本身尺寸设置。
      Row() {
        // 权重1，占主轴剩余空间1/3
        Row(){}
          .size({height: 110 }).backgroundColor(0xFFEFD5)
          .layoutWeight(1)
        // 权重2，占主轴剩余空间2/3
        Text('layoutWeight(2)')
          .size({ width: '30%', height: 110 }).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
          .layoutWeight(1)
        // 未设置layoutWeight属性，组件按照自身尺寸渲染
        Text('no layoutWeight')
          .size({ width: '33%', height: 110 }).backgroundColor(0xD2B48C).textAlign(TextAlign.Center)
      }.
      size({ width: '100%', height: 140 })
      .backgroundColor(0xAFEEEE)
    }.width('100%')
    .height('100%')
    .margin({ top: 5 })
    .alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Start)
  }
}
回到顶部