HarmonyOS线性布局指南：Row和Column的详细使用

鹏码纵横

已于 2024-08-21 15:04:04 修改

阅读量1k

点赞数 19

分类专栏：鸿蒙探秘：ArkTs 技术揭秘文章标签： harmonyos 华为

于 2024-08-15 08:15:40 首次发布

本文链接：https://blog.csdn.net/weixin_52489536/article/details/141194917

版权

鸿蒙探秘：ArkTs 技术揭秘专栏收录该内容

3 篇文章 0 订阅

订阅专栏

大家好！今天我们将深入探讨Harmony中的线性布局。无论你是新手还是有经验的开发者，了解如何使用Row和Column布局来设计界面是非常重要的。通过这篇指南，你将掌握这些布局组件的基本概念和实际应用技巧。下面，我将用详细的代码示例和简单的解释，帮助你理解如何在实际开发中灵活运用这些布局。

1. 线性布局基本概念

在Harmony中，Row和Column是两种主要的布局组件，它们帮助我们按不同方向排列界面上的元素。理解这些布局组件的基本概念，将帮助你更好地设计和实现界面。

口诀：从外往里，从大到小，从上往下，从左往右。
主轴（Main Axis）：这是元素排列的主要方向。在Row布局中，主轴是横向的；在Column布局中，主轴是纵向的。
侧轴（Cross Axis）：这是与主轴垂直的方向。在Row布局中，侧轴是纵向的；在Column布局中，侧轴是横向的。
Row：横向排列元素，元素在纵向上居中，不会自动换行。
Column：纵向排列元素，元素在横向上居中，不会自动换行。

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

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

@Component
struct ColumnSpacingExample {
  build() {
    // 使用Column作为顶层容器，将子元素按纵向排列
    Column({space: 20}) { // 设置子元素之间的垂直间距为20vp
      // 在Column中放置两个Row
      Row()
        .width(100)
        .height(100)
        .backgroundColor(Color.Pink)
      Row()
        .width(100)
        .height(100)
        .backgroundColor(Color.Red)
    }
  }
}

解释：Column容器内，子元素（Row）在纵向排列，彼此之间的间距为20vp。

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

@Component
struct RowSpacingExample {
  build() {
    // 使用Row作为顶层容器，将子元素按横向排列
    Row({space: 10}) { // 设置子元素之间的横向间距为10vp
      // 在Row中放置两个Column
      Column()
        .width(100)
        .height(100)
        .backgroundColor(Color.Pink)
      Column()
        .width(100)
        .height(100)
        .backgroundColor(Color.Red)
    }
  }
}

解释：Row容器内，子元素（Column）在横向排列，彼此之间的间距为10vp。

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

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

@Component
struct ColumnAlignExample {
  build() {
    Column() {
      // 在Column中放置两个Row
      Row()
        .width(100)
        .height(100)
        .backgroundColor(Color.Pink)
      Row()
        .width(100)
        .height(100)
        .backgroundColor(Color.Red)
    }
    .alignItems(FlexAlign.Center) // 在水平方向的侧轴上居中对齐
  }
}

解释：Column容器中，子元素在横向侧轴（即水平方向）上居中对齐。

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

@Component
struct RowAlignExample {
  build() {
    Row() {
      // 在Row中放置两个Column
      Column()
        .width(100)
        .height(100)
        .backgroundColor(Color.Pink)
      Column()
        .width(100)
        .height(100)
        .backgroundColor(Color.Red)
    }
    .alignItems(FlexAlign.Center) // 在垂直方向的侧轴上居中对齐
  }
}

解释：Row容器中，子元素在纵向侧轴（即垂直方向）上居中对齐。

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

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

@Component
struct ColumnJustifyExample {
  build() {
    Column({space: 10}) {
      // 在Column中放置三个Row
      Row()
        .width(100)
        .height(100)
        .backgroundColor(Color.Pink)
      Row()
        .width(100)
        .height(100)
        .backgroundColor(Color.Red)
      Row()
        .width(100)
        .height(100)
        .backgroundColor(Color.Blue)
    }
    .justifyContent(FlexAlign.SpaceBetween) // 在垂直主轴上均匀分布子元素
  }
}

解释：Column容器中，子元素在垂直主轴（即纵向）上均匀分布，元素之间的间距为10vp。

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

@Component
struct RowJustifyExample {
  build() {
    Row({space: 20}) {
      // 在Row中放置两个Column
      Column()
        .width(100)
        .height(100)
        .backgroundColor(Color.Pink)
      Column()
        .width(100)
        .height(100)
        .backgroundColor(Color.Red)
    }
    .justifyContent(FlexAlign.SpaceAround) // 在水平主轴上均匀分布子元素，周围有间距
  }
}

解释：Row容器中，子元素在水平主轴（即横向）上均匀分布，元素之间和容器边缘之间都有间距。

4. 自适应拉伸

自适应拉伸：使用flex属性，使子元素在主轴方向上自适应拉伸以填充容器。

代码示例：

@Component
@Preview
struct FlexGrowExample {
  build() {
    Row() {
      Column()
        .width(100)
        .height(100)
        .backgroundColor(Color.Pink)
        .layoutWeight(1) // 在主轴上拉伸以填充剩余空间，比例为1
      Column()
        .width(100)
        .height(100)
        .backgroundColor(Color.Red)
        .layoutWeight(2) // 在主轴上拉伸以填充剩余空间，比例为2
    }
  }
}

解释：第一个Column在主轴方向上占用1份空间，第二个Column占用2份空间，总共拉伸以填充Row容器中的剩余空间。

5. 自适应缩放

自适应缩放：使用flexShrink属性控制子元素在主轴方向上的缩放比例。

代码示例：

@Component
struct FlexShrinkExample {
  build() {
    Row() {
      Column()
        .width(200)
        .height(100)
        .backgroundColor(Color.Pink)
        .flexShrink(1) // 在主轴上可缩放，缩放比例为1
      Column()
        .width(200)
        .height(100)
        .backgroundColor(Color.Red)
        .flexShrink(2) // 在主轴上可缩放，缩放比例为2
    }
  }
}

解释：第一个Column的缩放比例是1，第二个Column的缩放比例是2。在Row容器内，子元素会根据缩放比例来调整其大小。

6. 自适应延伸

自适应缩放：使用flexShrink属性控制子元素在主轴方向上的缩放比例，以便在容器空间不足时调整元素的大小。

代码示例：

@Component
struct FlexBasisExample {
  build() {
    Row() {
      Column()
        .width(100)
        .height(100)
        .backgroundColor(Color.Pink)
        .flexBasis('50%') // 在主轴上基础宽度设置为50%
      Column()
        .width(100)
        .height(100)
        .backgroundColor(Color.Red)
        .flexBasis('50%') // 在主轴上基础宽度设置为50%
    }
  }
}