鸿蒙系列之一ArkTs通用属性与布局

小妖
568 阅读5分钟

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

名称参数说明描述
widthLength设置组件自身的宽度，缺省时使用元素自身内容需要的宽度。若子组件的宽大于父组件的宽，则会画出父组件的范围。从APIversion9开始，该接口支持在ArkTS卡片中使用。
heightLength设置组件自身的高度，缺省时使用元素自身内容需要的高度。若子组件的高大于父组件的高，则会画出父组件的范围。从APIversion9开始，该接口支持在ArkTS卡片中使用。
size{width?:Length,height?:Length}设置高宽尺寸。
paddingPadding|Length设置内边距属性。参数为Length类型时，四个方向内边距同时生效。默认值：0padding设置百分比时，上下左右内边距均以父容器的width作为基础值。从APIversion9开始，该接口支持在ArkTS卡片中使用。
marginMargin|Length设置外边距属性。参数为Length类型时，四个方向外边距同时生效。默认值：0margin设置百分比时，上下左右外边距均以父容器的width作为基础值。从API version9开始，该接口支持在ArkTS卡片中使用。
constraintSize{minWidth?:Length,maxWidth?:Length,minHeight?:Length,maxHeight?:Length设置外边距属性。参数为Length类型时，四个方向外边距同时生效。默认值：0margin设置百分比时，上下左右外边距均以父容器的width作为基础值。从API version9开始，该接口支持在ArkTS卡片中使用。
  1. Length长度类型，用于描述尺寸单位,它是一个复合类型。
类型说明
string需要显式指定像素单位，如'10px'，也可设置百分比字符串，如'100%'。
number默认单位vp。
Resource资源引用类型，引入系统资源或者应用资源中的尺寸。

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

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

  3. 代码实践

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    Column(){
      Row(){
        Row(){
          Row(){}
          .backgroundColor(Color.Blue)
          .size({
            width:'100%',
            height:'100%'
          })
        }
        .width(200)
        .height(200)
        .backgroundColor(Color.Red)
        .padding(10)
        .margin(40)
      }.backgroundColor(Color.Yellow)
      Text('this is textthis is textthis is textthis is' +
        ' textthis is textthis is textthis is textthis is textthis')
        .fontSize(20)
        .width('90%')
        .margin({top:100})
        .constraintSize({
          maxWidth:100
        })
    }
    .width('100%')
    .height('100%')

  }
}

6.布局组件Column详解

Column是沿垂直方向布局的容器，可以包含多个子组件，多个子组件会在垂直方向上按照顺序排列。
Column接口定义 Column(value?:{space?:string|number})

6.1 接口参数说明

参数名参数类型必填参数描述
spacestring|number否纵向布局元素垂直方向间距。从APIversion9开始，space为负数或者justifyContent设置为FlexAlign.SpaceBetween、FlexAlign.SpaceAround、FlexAlign.SpaceEvenly时不生效。默认值：0说明：可选值为大于等于0的数字，或者可以转换为数字的字符串。

6.2 Column属性说明

名称参数类型描述
alignItemsHorizontalAlign设置子组件在交叉轴方向上的对齐格式。默认值HorizontalAlign.Center从APIversion9开始，该接口支持在ArkTS卡片中使用。
justifyContent8+FlexAlign设置子组件在主轴方向上的对齐格式。默认值：
FlexAlign.Start从APIversion9开始，该接口支持在ArkTS卡片中使用。

  1. 布局组件Row详解

     Row为沿水平方向布局容器,可以包含多个子组件，多个子组件会在水平方向上按照顺序排列。
 Row接口定义 Row(value?:{space?:number|string})

7.1 接口参数说明

参数名参数类型必填参数描述
spacestring|number否横向布局元素间距。从APIversion9开始，space为负数或者justifyContent设置为FlexAlign.SpaceBetween、FlexAlign.SpaceAround、FlexAlign.SpaceEvenly时不生效。默认值：0说明：可选值为大于等于0的数字，或者可以转换为数字的字符串。

7.2 Row 属性说明

名称参数类型描述
alignItemsHorizontalAlign设置子组件在交叉轴方向上的对齐格式。默认值HorizontalAlign.Center从APIversion9开始，该接口支持在ArkTS卡片中使用。
justifyContent8+FlexAlign设置子组件在主轴方向上的对齐格式。默认值：
FlexAlign.Start从APIversion9开始，该接口支持在ArkTS卡片中使用。

8.代码实践

@Entry
@Component
struct CommpomtPage {
  @State message: string = 'Hello World'

  build() {
   Column({space:10}){
     Container({color:Color.Blue})
     Container({color:Color.Green})
     Container()
     Row(){
       Text('热门推荐')
         .fontSize(20)
         .fontColor(Color.White)
       Text('更多')
         .fontSize(20)
         .fontColor(Color.White)

     }
     .width('100%')
     .height(100)
     .backgroundColor(Color.Red)
     .justifyContent(FlexAlign.SpaceBetween)//主轴效果
     .alignItems(VerticalAlign.Center)//交叉轴效果
   }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Start)//主轴
    .alignItems(HorizontalAlign.End)//交叉轴
  }
}
//自定义控件
@Component  //表示这个事自定义控件
 struct Container {
  w:number=100;//自定义组件传值
  h:number=100;//自定义组件传值
  color:Color=Color.Red;//自定义组件传值
  image:Resource=$r('app.media.icon');//自定义组件传值

  build(){
    Row(){
      Image(this.image)
        .width(80)
        .height(80)
    }
    .justifyContent(FlexAlign.Center)//主轴居中
    .alignItems(VerticalAlign.Center)//交叉轴居中
    .width(this.w)
    .height(this.h)
    .backgroundColor(this.color)
  }
}
  1. RowColumn结合layoutWeight实现弹性布局
@Entry
@Component
struct LayoutWeightPage {
  @State message: string = 'Hello World'

  build() {
    Column(){
      //row结合layoutWeight做弹性布局
      Row(){

        Row(){

        }
        .width('33%')
        .height(100)
        .backgroundColor(Color.Red)
        .layoutWeight(2)
        Row(){

        }
        .width('33%')
        .height(100)
        .backgroundColor(Color.Blue)
        .layoutWeight(1)
        Row(){

        }
        .width(50)
        .height(100)
        .backgroundColor(Color.Orange)
      }
      .width('100%')
      .height(100)
      .backgroundColor(Color.Yellow)
      Column(){
        Row(){

        }
        .width('33%')
        .height(100)
        .backgroundColor(Color.Red)
        .layoutWeight(2)
        Row(){

        }
        .width('33%')
        .height(100)
        .backgroundColor(Color.Blue)
        .layoutWeight(1)
        Row(){

        }
        .width('33%')
        .height(100)
        .backgroundColor(Color.Orange)
      }
      .width('100%')
      .height(300)
      .backgroundColor(Color.Yellow)
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}
avatar
文章
阅读
粉丝