鸿蒙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 @Component struct 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 @Component struct 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 @Component struct 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 @Component struct 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 @Component struct 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(右下角)
