1

HarmonyOS鸿蒙开发常用4种布局详细说明

 1 month ago
source link: https://blog.51cto.com/u_16506820/10228441
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

介绍一下鸿蒙开发常用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)
  }
}

效果：

HarmonyOS鸿蒙开发常用4种布局详细说明_鸿蒙应用开发

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')
  }
}

HarmonyOS鸿蒙开发常用4种布局详细说明_鸿蒙应用开发_02

子元素排列与对齐

● 主轴：线性布局容器在布局方向上的轴线，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)

HarmonyOS鸿蒙开发常用4种布局详细说明_HarmonyOS_03

.justifyContent(FlexAlign.Start)

HarmonyOS鸿蒙开发常用4种布局详细说明_OpenHarmony_04

.justifyContent(FlexAlign.End)

HarmonyOS鸿蒙开发常用4种布局详细说明_HarmonyOS_05

.justifyContent(FlexAlign.SpaceBetween)

HarmonyOS鸿蒙开发常用4种布局详细说明_鸿蒙_06

.justifyContent(FlexAlign.SpaceAround)

HarmonyOS鸿蒙开发常用4种布局详细说明_鸿蒙应用开发_07

.justifyContent(FlexAlign.SpaceEvenly)

HarmonyOS鸿蒙开发常用4种布局详细说明_鸿蒙应用开发_08

子元素沿交叉轴方向的对齐方式

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

@Entry
@Component
struct Index {
  build() {
    Column() {
      Row() {
      }.width('80%').height(50).backgroundColor(Color.Red)
      Row() {
      }.width('80%').height(50).backgroundColor(Color.Orange)
      Row() {
      }.width('80%').height(50).backgroundColor(Color.Yellow)
    }.width('100%').height('100%').alignItems(HorizontalAlign.Start)
  }
}

.alignItems(HorizontalAlign.Start)

HarmonyOS鸿蒙开发常用4种布局详细说明_OpenHarmony_09

.alignItems(HorizontalAlign.Center)

HarmonyOS鸿蒙开发常用4种布局详细说明_鸿蒙应用开发_10

.alignItems(HorizontalAlign.End)

HarmonyOS鸿蒙开发常用4种布局详细说明_鸿蒙应用开发_11

2、 层叠布局（Stack）

Stack布局是一种常用的布局方式，它允许将子元素沿垂直于屏幕的方向堆叠在一起，类似于图层的叠加。子元素可以按照其添加顺序依次叠加在一起，后添加的子元素会覆盖之前添加的子元素，层叠布局具有较强的页面层叠、位置定位能力，其使用场景有广告、卡片层叠效果等。
Stack容器中的子组件可通过zIndex属性设置其所在的层级，zIndex值越大，层级越高，即zIndex值大的组件会覆盖在zIndex值小的组件上方

Stack 布局通常会和 position绝对定位配合使用，设置元素左上角相对于父容器左上角偏移位置配合使用，position语法示例：.position({ x: 180, y: 130 })

@Entry
@Component
struct StackAlign {
  @State alignment: Alignment = Alignment.Center;
  build() {
    Column() {
      Stack() {
        Row() {
          Text('1')
        }
        .width(300).height(300).backgroundColor(Color.Yellow)
        Row() {
          Text('2')
        }
        .width(150).height(150).backgroundColor(Color.Red)
        Row() {
          Text('3')
        }
        .width(75).height(75).backgroundColor(Color.Green)
      }
    }
    .width('100%')
  }
}
HarmonyOS鸿蒙开发常用4种布局详细说明_鸿蒙应用开发_12

.alignContent(Alignment.TopStart）

@Entry
@Component
struct StackAlign {
  @State alignment: Alignment = Alignment.Center;
  build() {
    Column() {
      Stack() {
        Row() {
          Text('1')
        }
        .width(300).height(300).backgroundColor(Color.Blue)
        Row() {
          Text('2')
        }
        .width(150).height(150).backgroundColor(Color.Red)
        Row() {
          Text('3')
        }
        .width(75).height(75).backgroundColor(Color.Yellow)
      }
      .width('100%').backgroundColor('#ccc').alignContent(Alignment.TopStart)    }
    .width('100%')
  }
}

Fl.alignContent(Alignment.TopStart）

HarmonyOS鸿蒙开发常用4种布局详细说明_HarmonyOS_13

.alignContent(Alignment.TopEnd）

HarmonyOS鸿蒙开发常用4种布局详细说明_HarmonyOS_14

.alignContent(Alignment.Top)

HarmonyOS鸿蒙开发常用4种布局详细说明_OpenHarmony_15

.alignContent(Alignment.Start)

HarmonyOS鸿蒙开发常用4种布局详细说明_HarmonyOS_16

.alignContent(Alignment.Center)

HarmonyOS鸿蒙开发常用4种布局详细说明_HarmonyOS_17

.alignContent(Alignment.End)

HarmonyOS鸿蒙开发常用4种布局详细说明_HarmonyOS_18

.alignContent(Alignment.BottomStart)

HarmonyOS鸿蒙开发常用4种布局详细说明_OpenHarmony_19

.alignContent(Alignment.BottomEnd)

HarmonyOS鸿蒙开发常用4种布局详细说明_OpenHarmony_20

.alignContent(Alignment.Bottom)

HarmonyOS鸿蒙开发常用4种布局详细说明_鸿蒙应用开发_21

3、 网格布局（Grid）

网格布局（Grid）是一种强大的页面排版方式，通过将页面划分为行和列组成的网格，使得子组件可以在这个二维网格中自由定位。网格布局的容器组件为Grid，子组件为GridItem，如下图所示。

1fr表示占一个“单位”

@Entry
@Component
struct Index {
  build() {
    Grid(){
      GridItem(){}.backgroundColor(Color.Red)
      GridItem(){}.backgroundColor(Color.Green)
      GridItem(){}.backgroundColor(Color.Yellow)
      GridItem(){}.backgroundColor(Color.Brown)
      GridItem(){}.backgroundColor(Color.Orange)
      GridItem(){}.backgroundColor(Color.Black)
      GridItem(){}.backgroundColor(Color.Orange)
      GridItem(){}.backgroundColor(Color.Gray)
      GridItem(){}.backgroundColor(Color.Pink)
    }.width('100%').height(400).rowsTemplate('1fr 2fr 1fr').columnsTemplate('1fr 1fr 1fr').rowsGap(10).columnsGap(10)
  }
}
.rowsTemplate('1fr 2fr 1fr')
HarmonyOS鸿蒙开发常用4种布局详细说明_鸿蒙应用开发_22

.columnsTemplate('1fr 2fr 1fr')

HarmonyOS鸿蒙开发常用4种布局详细说明_OpenHarmony_23

.rowStart(1).rowEnd(2)

HarmonyOS鸿蒙开发常用4种布局详细说明_HarmonyOS_24

.rowsGap(10).columnsGap(30)

HarmonyOS鸿蒙开发常用4种布局详细说明_HarmonyOS_25

当显示内容超出显示区域时，有滚动效果

4、 列表布局（List）

列表（List）是一种复杂的容器组件，使用列表可以轻松高效地显示结构化、可滚动的列表信息。列表布局的容器组件为List，子组件为ListItem或者ListItemGroup，其中，ListItem表示单个列表项，ListItemGroup用于列表数据的分组展示，其子组件也是ListItem，如下图所示

.listDirection(Axis.Vertical)
@Entry
@Component
struct Index {
  build() {
    List({space:10}) {
      ListItem() {
        Text('list1')
      }.width('100%').backgroundColor(Color.Red)
      ListItemGroup() {
        ListItem() {
          Text('list2')
        }.width('100%')
        ListItem() {
          Text('list3')
        }.width('100%')
      }.width('100%').backgroundColor(Color.Yellow)
    }.width('100%').listDirection(Axis.Vertical)
  }
}

HarmonyOS鸿蒙开发常用4种布局详细说明_鸿蒙_26

.listDirection(Axis.Horizontal)

HarmonyOS鸿蒙开发常用4种布局详细说明_鸿蒙_27

.alignListItem(ListItemAlign.End)

HarmonyOS鸿蒙开发常用4种布局详细说明_OpenHarmony_28

.alignListItem(ListItemAlign.Start)

HarmonyOS鸿蒙开发常用4种布局详细说明_HarmonyOS_29

.alignListItem(ListItemAlign.Center)

HarmonyOS鸿蒙开发常用4种布局详细说明_HarmonyOS_30

scrollBar属性可控制滚动条样式

@Entry
@Component
struct Index {
  @State contactsGroups: object[] = [
    {
      title: 'A',
      contacts: [
        '赵云',
        '李白',
        '王思'
      ],
    },
    {
      title: 'B',
      contacts: [
        '白叶',
        '伯乐'
      ],
    },
    {
      title: 'C',
      contacts: [
        '王大',
        '张三'
      ],
    },
    {
      title: 'D',
      contacts: [
        '白龙',
        '小明'
      ],
    },
    {
      title: 'E',
      contacts: [
        '盖伦',
        '石头',
        '光辉'
      ],
    }
  ]
  @Builder Header(item){
    Text(item.title).fontSize(30).backgroundColor('#ccc').width('100%')
  }
  build() {
    List(){
      ForEach(this.contactsGroups,(item)=>{
        ListItemGroup({header:this.Header(item)}){
          ForEach(item.contacts,(user)=>{
            ListItem(){
              Text(user)
            }.width('100%').height(50)
          })
        }
      },item=>JSON.stringify(item));
    }.width('100%').height(300).scrollBar(BarState.On)
  }
}
HarmonyOS鸿蒙开发常用4种布局详细说明_HarmonyOS_31

以上就是鸿蒙开发相关布局


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK