鸿蒙布局元素篇（一）-线性布局（Row/Column）

前言

web端开发一般都是div元素梭哈，然后布局由css去实现。鸿蒙应用的布局则是通过赋予布局元素特性对包裹的元素排列布局。

线性布局（Row/Column）

1.Row容器

Row(value?:{space?: number | string })：容器包裹的元素横向排列

• 有一个参数space用来控制子元素的间距
• 除了共有属性，Row容器有两个独有属性alignItems、justifyContent用来指定子元素的对齐方式。

属性	属性类型	值	描述
alignItems	VerticalAlign	Top/Center(默认)/Bottom	垂直方向上的对齐格式。
justifyContent	FlexAlign	StartCenter(默认)/End/SpaceBetween/SpaceAround/SpaceEvenly	水平方向上的对齐格式。

垂直方向对齐alignItems

@Entry
@Component
struct Index {
  build() { 
    Column({space: 10}){ 
      Row({ space: 30 }) { // 设置元素间隔30
        Row().width('20%').height('50%').backgroundColor('red')
        Row().width('20%').height('50%').backgroundColor('green')
        Column().width('20%').height('50%').backgroundColor('blue')
      }
      // 居上对齐
      .alignItems(VerticalAlign.Top).height('30%').width('100%').backgroundColor('#bc8f8f')
      Row({ space: 30 }) {
        Row().width('20%').height('50%').backgroundColor('red')
        Row().width('20%').height('50%').backgroundColor('green')
        Column().width('20%').height('50%').backgroundColor('blue')
      }
      // 居中对齐
      .alignItems(VerticalAlign.Center).height('30%').width('100%').backgroundColor('#bc8f8f')
      Row({ space: 30 }) {
        Row().width('20%').height('50%').backgroundColor('red')
        Row().width('20%').height('50%').backgroundColor('green')
        Column().width('20%').height('50%').backgroundColor('blue')
      }
      // 居下对齐
      .alignItems(VerticalAlign.Bottom).height('30%').width('100%').backgroundColor('#bc8f8f')
    }
  }
}

水平方向对齐justifyContent

@Entry
@Component
struct Index {
  build() { 
    Column({space: 10}){
      Row({ space: 30 }) {
        Row().width('20%').height('50%').backgroundColor('red')
        Row().width('20%').height('50%').backgroundColor('green')
        Column().width('20%').height('50%').backgroundColor('blue')
      }
      // 居左对齐
      .justifyContent(FlexAlign.Start).height('15%').width('100%').backgroundColor('#bc8f8f')
      Row({ space: 30 }) {
        Row().width('20%').height('50%').backgroundColor('red')
        Row().width('20%').height('50%').backgroundColor('green')
        Column().width('20%').height('50%').backgroundColor('blue')
      }
      // 居中对齐
      .justifyContent(FlexAlign.Center).height('15%').width('100%').backgroundColor('#bc8f8f')
      Row({ space: 30 }) {
        Row().width('20%').height('50%').backgroundColor('red')
        Row().width('20%').height('50%').backgroundColor('green')
        Column().width('20%').height('50%').backgroundColor('blue')
      }
      // 居右对齐
      .justifyContent(FlexAlign.End).height('15%').width('100%').backgroundColor('#bc8f8f')
      Row({ space: 30 }) {
        Row().width('20%').height('50%').backgroundColor('red')
        Row().width('20%').height('50%').backgroundColor('green')
        Column().width('20%').height('50%').backgroundColor('blue')
      }
      //两端对齐，元素之间的距离相同
      .justifyContent(FlexAlign.SpaceBetween).height('15%').width('100%').backgroundColor('#bc8f8f')
      Row({ space: 30 }) {
        Row().width('20%').height('50%').backgroundColor('red')
        Row().width('20%').height('50%').backgroundColor('green')
        Column().width('20%').height('50%').backgroundColor('blue')
      }
      //元素之间的距离相同，到两边的距离是元素之间距离的一半
      .justifyContent(FlexAlign.SpaceAround).height('15%').width('100%').backgroundColor('#bc8f8f')
      Row({ space: 30 }) {
        Row().width('20%').height('50%').backgroundColor('red')
        Row().width('20%').height('50%').backgroundColor('green')
        Column().width('20%').height('50%').backgroundColor('blue')
      }
      //元素之间的距离相同，到两边的距离与元素之间也相同
      .justifyContent(FlexAlign.SpaceEvenly).height('15%').width('100%').backgroundColor('#bc8f8f')
  }
}

2.Colume容器

Colume(value?:{space?: number | string })：容器包裹的元素纵向排列，用法和Row容器完全一样，只是水平和垂直反着来

• 有一个参数space用来控制子元素的间距
• 除了共有属性，Colume容器也是有两个独有属性alignItems、justifyContent用来指定子元素的对齐方式。

属性	属性类型	值	描述
alignItems	HorizontalAlign	Top/Center(默认)/Bottom	设置子组件在水平方向上的对齐格式。
justifyContent	FlexAlign	Start/Center(默认)/End/SpaceBetween/SpaceAround/SpaceEvenly	设置子组件在垂直方向上的对齐格式。

用法和Row水平和垂直轴对齐方式反着来就行，就不贴代码了。

总结

仅对横向或纵向这种简单场景使用，不支持换行（换列）。如果需要一些更复杂的场景可以使用后面的Flex布局。