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