HarmonyOS布局详解：掌握线性布局中的Row与Column

概述

线性布局（LinearLayout）是开发中最常用的布局，通过线性容器 Row 和 Column 构建。线性布局是其他布局的基础，其子元素在主轴方向（水平方向或垂直方向）依次排列。根据排列方向的不同，开发者可以选择使用 Row 或 Column 容器来创建线性布局。

基本概念

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

布局子元素的间距

通过 space 属性可以在 Column 和 Row 容器中设置子元素在主轴方向上的间距。

• 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({ 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%')
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/9ab29366fb02460db4f2a8b2b5c6fdf6.png#pic_center)

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

在 Column 和 Row 容器中，通过 alignItems 属性可以设置子元素在交叉轴上的对齐方式。

• Column 容器中的水平对齐：
  • 左对齐：alignItems(HorizontalAlign.Start)
  • 居中对齐：alignItems(HorizontalAlign.Center)
  • 右对齐：alignItems(HorizontalAlign.End)
• Row 容器中的垂直对齐：
  • 顶部对齐：alignItems(VerticalAlign.Top)
  • 居中对齐：alignItems(VerticalAlign.Center)
  • 底部对齐：alignItems(VerticalAlign.Bottom)

布局子元素在主轴上的排列方式

可以通过 justifyContent 属性设置子元素在容器主轴上的排列方式，如从首端对齐、居中对齐、尾端对齐或均匀分布等。

• Column 容器中的垂直排列：
  • FlexAlign.Start：从上到下排列。
  • FlexAlign.Center：居中排列。
  • FlexAlign.End：从下到上排列。
  • FlexAlign.SpaceBetween：均匀分配空间，首尾对齐。
  • FlexAlign.SpaceAround：均匀分配空间，首尾留有间距。
  • FlexAlign.SpaceEvenly：完全均匀分布。
• Row 容器中的水平排列：
  • FlexAlign.Start：从左到右排列。
  • FlexAlign.Center：居中排列。
  • FlexAlign.End：从右到左排列。
  • FlexAlign.SpaceBetween：均匀分配空间，首尾对齐。
  • FlexAlign.SpaceAround：均匀分配空间，首尾留有间距。
  • FlexAlign.SpaceEvenly：完全均匀分布。

自适应布局

1. 自适应拉伸：通过 Blank 组件自动填充空白空间，实现自适应拉伸效果。

 Row({}) {
  Column().width('30%').height(50).backgroundColor(0xF5DEB3)
  Blank()  // 填充空白区域，实现自适应拉伸
  Column().width('30%').height(50).backgroundColor(0xD2B48C)
}.width('100%').height(50)

4. 自适应缩放：使用 layoutWeight 属性或百分比宽高设置，实现子元素随容器尺寸变化的缩放效果。

6. Row({}) {
 Column()
   .layoutWeight(1)  // 宽度随着剩余空间动态调整
   .height(50)
   .backgroundColor(0xF5DEB3)
 
 Column()
   .layoutWeight(2)  // 宽度为前一列的两倍
   .height(50)
   .backgroundColor(0xD2B48C)
}.width('100%').height(50)

6. 自适应延伸：通过 Scroll 组件或 List 添加滚动条，实现内容超出屏幕后的滚动展示。

   Scroll(this.scroller) {
     Column() {
       ForEach(this.arr, (item:number) => {
         Text(item.toString())
           .width('90%')
           .height(150)
           .backgroundColor(0xFFFFFF)
           .borderWidth(1)
           .borderColor(0x666666)
           .margin({ top: 10 })
           .textAlign(TextAlign.Center)
           .fontSize(20)
       }, (item:number) => item.toString())
     }.width('100%')
   }
   .backgroundColor(0xDCDCDC)
   .scrollable(ScrollDirection.Vertical)
   .scrollBar(BarState.On)
   .scrollBarColor(Color.Black)
   .scrollBarWidth(10)
   .edgeEffect(EdgeEffect.None)
   .onScroll((xOffset: number, yOffset: number) => {
     console.info(xOffset +''+ yOffset)
   })
   .onScrollEdge((side: Edge) => {
     console.info('To the edge')
   })
   .onScrollEnd(() => {
     console.info('Scroll Stop')
   })

以上是 HarmonyOS 中使用 Row 和 Column 进行线性布局的基本方法和应用。