ArkUI Row/Column组件

 HarmonyOS开发 页面的排版主要是通过Row/Column组件来实现

Row(行)、Column(列) ，每个组件之间的间隙叫做间距(space)，默认column方向(垂直)为主轴方向。跟他垂直的轴叫交叉轴，默认为Row方向。

 

属性 

1.justifyContent 设置子元素在主轴方向的对齐格式。 

参数(FlexAlign枚举)

2.alignItems 设置子元素在交叉轴方向的对齐格式。  

参数：Column容器使用HorizontailAlign枚举，Row容器使用verticalAlign枚举。  

column实现水平居中 

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'
  @State imageWidth: number = 300
  build() {
    Row() {
      Column({space:20}) {
        Text('item1')
          .fontSize(30)
        Text('item1')
          .fontSize(30)
        Text('item1')
          .fontSize(30)
        Text('item1')
          .fontSize(30)
      }
      .width('100%')
      .height('100%')
      .justifyContent(FlexAlign.Center)
      .alignItems(HorizontalAlign.Center)
    }
    .height('100%')
  }
}

FlexAlign(主轴)属性

start：聚集在方向最上面

center：居中对齐

end：聚集在最下面

SpaceBetween：主轴空间分配到每个元素之间

SpaceAround：首尾元素也分配空间，但是只有中间元素空间的一半

SpaceEvently：每个元素都平均的分配空间。

Row容器也是一样的，只不过变成横向的

alignItems(交叉轴)属性

使用交叉轴属性时候，Column容器使用HorizontailAlign枚举，Row容器使用verticalAlign枚举。

 实现页面布局

使用布局手段来实现一个简单页面的排版

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'
  @State imageWidth: number = 300
  build() {
    Column(){

      //图片行
      Row(){
        Image($r("app.media.hongmeng"))
          .width(this.imageWidth)
      }
      .width('100%')
      .height(400)
      .justifyContent(FlexAlign.Center)

      // 输入框行
      Row(){
        Text($r('app.string.width_label'))
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
        TextInput({text:this.imageWidth.toFixed(0)})
          .width(150)
          .backgroundColor("#fff")
          .type(InputType.Number)
          .onChange(value =>{
            this.imageWidth = Number(value)
          })
      }
      .width('100%')
      .padding({left:20,right:20})
      .justifyContent(FlexAlign.SpaceBetween)

      // 分割线
      Divider()
        .width('90%')

      //按钮行
      Row(){
        Button("缩小")
          .type(ButtonType.Capsule)
          .width(100)
          .height(50)
          .fontSize(20)
          .margin(10)
          .onClick(()=>{
            if(this.imageWidth >= 30){
              this.imageWidth -= 30
            }
          })
        Button("放大")
          .type(ButtonType.Capsule)
          .width(100)
          .height(50)
          .fontSize(20)
          .onClick(()=>{
            if(this.imageWidth <= 300){
              this.imageWidth += 30
            }
          })
      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceEvenly)
      .margin({top:35,bottom:35})
      // 滑块
      Slider({
        min:100,
        max:300,
        value:this.imageWidth,
        step:10
      })
        .width('100%')
        .blockColor("#ff0000")
        .trackThickness(5)
        .showTips(true)
        .onChange(value =>{
          this.imageWidth = value
        })
    }
    .width('100%')
    .height('100%')
  }
}