HarmonyOS4.0系统性深入开发28线性布局

线性布局（Row/Column）

概述

线性布局（LinearLayout）是开发中最常用的布局，通过线性容器Row和Column构建。线性布局是其他布局的基础，其子元素在线性方向上（水平方向和垂直方向）依次排列。线性布局的排列方向由所选容器组件决定，Column容器内子元素按照垂直方向排列，Row容器内子元素按照水平方向排列。根据不同的排列方向，开发者可选择使用Row或Column容器创建线性布局。

图1 Column容器内子元素排列示意图

图2 Row容器内子元素排列示意图

基本概念

• 布局容器：具有布局能力的容器组件，可以承载其他元素作为其子元素，布局容器会对其子元素进行尺寸计算和布局排列。
• 布局子元素：布局容器内部的元素。
• 主轴：线性布局容器在布局方向上的轴线，子元素默认沿主轴排列。Row容器主轴为水平方向，Column容器主轴为垂直方向。
• 交叉轴：垂直于主轴方向的轴线。Row容器交叉轴为垂直方向，Column容器交叉轴为水平方向。
• 间距：布局子元素的间距。

布局子元素在排列方向上的间距

在布局容器内，可以通过space属性设置排列方向上子元素的间距，使各子元素在排列方向上有等间距效果。

Column容器内排列方向上的间距

图3 Column容器内排列方向的间距图

Column({
    space: 20 }) {
   
  Text('space: 20').fontSize(15).fontColor(Color.Gray).width('90%')
  Row().width('90%').height(50).backgroundColor(0xF5DEB3)
  Row().width('90%').height(50).backgroundColor(0xD2B48C)
  Row().width('90%').height(50).backgroundColor(0xF5DEB3)
}.width('100%')

Row容器内排列方向上的间距

图4 Row容器内排列方向的间距图

Row({
    space: 35 }) {
   
  Text('space: 35').fontSize(15).fontColor(Color.Gray)
  Row().width('10%').height(150).backgroundColor(0xF5DEB3)
  Row().width('10%').height(150).backgroundColor(0xD2B48C)
  Row().width('10%').height(150).backgroundColor(0xF5DEB3)
}.width('90%')

布局子元素在交叉轴上的对齐方式

在布局容器内，可以通过alignItems属性设置子元素在交叉轴（排列方向的垂直方向）上的对齐方式。且在各类尺寸屏幕中，表现一致。其中，交叉轴为垂直方向时，取值为VerticalAlign类型，水平方向取值为HorizontalAlign。

alignSelf属性用于控制单个子元素在容器交叉轴上的对齐方式，其优先级高于alignItems属性，如果设置了alignSelf属性，则在单个子元素上会覆盖alignItems属性。

Column容器内子元素在水平方向上的排列

图5 Column容器内子元素在水平方向上的排列图

• HorizontalAlign.Start：子元素在水平方向左对齐。

  Column({
       }) {
       
    Column() {
       
    }.width('80%').height(50).backgroundColor(0xF5DEB3)
  
    Column() {
       
    }.width('80%').height(50).backgroundColor(0xD2B48C)
  
    Column() {
       
    }.width('80%').height(50).backgroundColor(0xF5DEB3)
  }.width('100%').alignItems(HorizontalAlign.Start).backgroundColor('rgb(242,242,242)')
  

  

• HorizontalAlign.Center：子元素在水平方向居中对齐。

  Column({
       }) {
       
    Column() {
       
    }.width('80%').height(50).backgroundColor(0xF5DEB3)
  
    Column() {
       
    }.width('80%').height(50).backgroundColor(0xD2B48C)
  
    Column() {
       
    }.width('80%').height(50).backgroundColor(0xF5DEB3)
  }.width('100%').alignItems(HorizontalAlign.Center).backgroundColor('rgb(242,242,242)')
  

  

• HorizontalAlign.End：子元素在水平方向右对齐。

  Column({
       }) {
       
    Column() {
       
    }.width('80%').height(50).backgroundColor(0xF5DEB3)
  
    Column() {
       
    }.width('80%').height(50).backgroundColor(0xD2B48C)
  
    Column() {
       
    }.width('80%').height(50).backgroundColor(0xF5DEB3)
  }.width('100%').alignItems(HorizontalAlign.End).backgroundColor('rgb(242,242,242)')
  

  

Row容器内子元素在垂直方向上的排列

图6 Row容器内子元素在垂直方向上的排列图

• VerticalAlign.Top：子元素在垂直方向顶部对齐。

  Row({
       }) {
       
    Column() {