介绍一下鸿蒙开发常用4种布局

1、线性布局

2、层叠布局

3、网格布局

4、列表布局

1. 线性布局（Column/Row）

线性布局（LinearLayout）是开发中最常用的布局，通过线性容器Row（行）和Column（列）构建，它是其他布局的基础，其子元素在线性方向上（水平或垂直）依次排列，基本形式如下：

Column（列）

@Entry
@Component
struct Index {
  build() {
    Column({space:20}) {
      //一行
      Row() {
      }.width('80%').height(50).backgroundColor(Color.Green)
      Row() {
      }.width('80%').height(50).backgroundColor(Color.Orange)
      Row() {
      }.width('80%').height(50).backgroundColor(Color.Yellow)
      Row() {
      }.width('80%').height(50).backgroundColor(Color.Blue)
      Row() {
      }.width('80%').height(50).backgroundColor(Color.Red)
    }.width('100%').alignItems(HorizontalAlign.Center)
  }
}

效果：

 

Row（行）

@Entry
@Component
struct Index {
  build() {
    Row({space:20}) {
      Column() {
      }.width('15%').height(50).backgroundColor(Color.Red);
      Column() {
      }.width('15%').height(50).backgroundColor(Color.Orange);
      Column() {
      }.width('15%').height(50).backgroundColor(Color.Red);
      Column() {
      }.width('15%').height(50).backgroundColor(Color.Blue);
      Column() {
      }.width('15%').height(50).backgroundColor(Color.Pink);
    }.width('100%').padding(20).backgroundColor('#ccc')
  }
}

 

子元素排列与对齐

● 主轴：线性布局容器在布局方向上的轴线，Row容器主轴为横向，Column容器主轴为纵向。

● 交叉轴：垂直于主轴方向的轴线。Row容器交叉轴为纵向，Column容器交叉轴为横向。

子元素沿主轴方向的排列方式

可以通过justifyContent 属性进行控制，可选值如下：

@Entry
@Component
struct Index {
  build() {
    Column({space:20}) {
      //一行
      Row() {
      }.width('80%').height(50).backgroundColor(Color.Green)
      Row() {
      }.width('80%').height(50).backgroundColor(Color.Red)
    }.width('100%').height('100%').justifyContent(FlexAlign.Center)
  }
}

.justifyContent(FlexAlign.Center)

 

.justifyContent(FlexAlign.Start)

 

.justifyContent(FlexAlign.End)