鸿蒙5：布局组件

注意：博主有个鸿蒙专栏，里面从上到下有关于鸿蒙next的教学文档，大家感兴趣可以学习下

如果大家觉得博主文章写的好的话，可以点下关注，博主会一直更新鸿蒙next相关知识

专栏地址: https://blog.csdn.net/qq_56760790/category_12794123.html

文章所属类目（HarmonyOS 语言-ArkTS）

目录

1. 布局

1.1 基础线性布局

1.1.1 基本介绍

1.1.2 语法

1.1.3 属性

Row

Column

1.1.4 用法

1.1.5 总结

1.2 线性布局小案例-练习题

1.3 线性布局小案例-百度首页

1.4 堆叠布局

1.4.1 基本介绍

1.4.2 语法

1.4.3 用法

---

1. 布局

1.1 基础线性布局

参考地址

文档中心

1.1.1 基本介绍

Row 和Column的布局方式成为线性布局- 不是横向排列就是纵向排列

Row：沿水平方向布局容器

Column：沿垂直方向布局的容器

1.1.2 语法

Row(value?:{space?: string | number })

参数名	类型	必填	说明
value	{space?: string | number }	否	横向布局元素间距。

Column(value?: {space?: string | number})

参数名	类型	必填	说明
value	{space?: string | number}	否	纵向布局元素垂直方向间距。

1.1.3 属性

Row

横向布局-采用Row

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

语法 alignItems(value: VerticalAlign)

VerticalAlign参数枚举

• justifyContent 设置子组件在水平方向上的对齐格式

语法 justifyContent(value: FlexAlign)

FlexAlign参数枚举

Column

纵向布局-采用column

• alignItems 设置子组件在水平方向上的对齐格式

语法：alignItems(value: HorizontalAlign)

参数HorizontalAlign：子组件在水平方向上的对齐格式。默认值：HorizontalAlign.Center

• justifyContent 设置子组件在垂直方向上的对齐格式

语法：justifyContent(value: FlexAlign)

参数FlexAlign：子组件在垂直方向上的对齐格式。默认值：FlexAlign.Start

总结：属性justifyContent 设置子元素在主轴方向的对其格式 参数是 FlexAlign枚举

属性alignItems 设置子元素在交叉轴（垂直主轴方向的轴）方向的对齐格式 Row 容器使用VerticalAlign枚举 Column容器使用HorizontalAlign枚举

1.1.4 用法

• 横向布局

@Entry@Componentstruct Index {build() {Column() {Row({space:15}){Text('第一个').width(100).height(100).backgroundColor(Color.Blue)Text('第二个').width(100).height(100).backgroundColor(Color.Yellow)Text('第三个').width(100).height(100).backgroundColor(Color.Pink)}.width('100%').height('100%').justifyContent(FlexAlign.Center).alignItems(VerticalAlign.Center)}.width('100%').height('100%')}}

• 纵向布局

@Entry@Componentstruct Index {build() {Column() {Column({space:15}){Text('第一个').width(100).height(100).backgroundColor(Color.Blue)Text('第二个').width(100).height(100).backgroundColor(Color.Yellow)Text('第三个').width(100).height(100).backgroundColor(Color.Pink)}.width('100%').height('100%').justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center)}.width('100%').height('100%')}}

1.1.5 总结

Row 和Column的布局方式成为线性布局- 不是横向排列就是纵向排列

• 线性布局中永远不会产生换行
• 均不支持出现滚动条
• 横向排列的垂直居中，总行排列的水平居中
• 主轴-排列方向的轴
• 侧轴-排列方向垂直的轴

1.2 线性布局小案例-练习题

@Entry@Componentstruct Exercise {build() {Row({ space: 10 }) {Row({ space: 2 }) {Text('500').fontWeight(FontWeight.Bold)Text('总访问量')}Row({ space: 2 }) {Text('120').fontWeight(FontWeight.Bold)Text('原创')}Row({ space: 2 }) {Text('200').fontWeight(FontWeight.Bold)Text('排名')}Row({ space: 2 }) {Text('100').fontWeight(FontWeight.Bold)Text('粉丝')}}.justifyContent(FlexAlign.SpaceEvenly).width('100%').height(60)}}

1.3 线性布局小案例-百度首页

@Entry@Componentstruct Baidu {build() {Column() {Image('https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png').width(160)Row() {TextInput().layoutWeight(2).borderRadius({topLeft: 6,bottomLeft: 6}).backgroundColor('#fff').border({ width: 2, color: '#ccc' }).height(40)Button('百度一下').layoutWeight(1).type(ButtonType.Normal).borderRadius({topRight: 6,bottomRight: 6}).backgroundColor('#3274f6')}.padding(20)}.width('100%').height('100%')}}

1.4 堆叠布局

参考地址

文档中心

1.4.1 基本介绍

层叠布局通过Stack容器组件实现位置的固定定位与层叠，容器中的子元素依次入栈，后一个子元素覆盖前一个子元素，子元素可以叠加，也可以设置位置。

层叠布局具有较强的页面层叠、位置定位能力，其使用场景有广告、卡片层叠效果等。

1.4.2 语法

Stack(value?: { alignContent?: Alignment })

1.4.3 用法

@Entry@Componentstruct StackDemo {build() {Column() {Stack({alignContent:Alignment.TopEnd}){Image('https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png').width(160)Text('鸿蒙版').translate({y: 20})}Row() {TextInput().layoutWeight(2).borderRadius({topLeft: 6,bottomLeft: 6}).backgroundColor('#fff').border({ width: 2, color: '#ccc' }).height(40)Button('百度一下').layoutWeight(1).type(ButtonType.Normal).borderRadius({topRight: 6,bottomRight: 6}).backgroundColor('#3274f6')}.padding(20)}.width('100%').height('100%')}}

Stack的参数 可以设置子组件的排列方式-alignContent

• Top(顶部)
• TopStart（左上角）
• TopEnd（右上角）
• Start（左侧）
• End（右侧）
• Center（中间）
• Bottom（底部）
• BottomStart（左下角）
• BottomEnd(右下角)