HarmonyOS鸿蒙Next中ArkUI布局容器Column和Row的使用区别是什么？如何实现常见的页面布局？

HarmonyOS鸿蒙Next中ArkUI布局容器Column和Row的使用区别是什么？如何实现常见的页面布局？

  • HarmonyOS 5.0，DevEco Studio 5.0
  • 刚开始学习ArkUI开发，对Column和Row两个布局容器的使用场景不太清楚
  • 想了解这两个容器的区别以及如何组合使用实现常见页面布局

希望能详细说明Column和Row的区别，并提供实际的代码示例

4 回复

【解决方案】

开发者您好，Column是沿垂直方向布局的容器，Row是沿水平方向布局的容器。

Column和Row的具体区别以及实际的代码示例可参考线性布局 (Row/Column)。

更多关于HarmonyOS鸿蒙Next中ArkUI布局容器Column和Row的使用区别是什么？如何实现常见的页面布局？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


一个是容器中子组件在屏幕上竖向排列，另一个是横向，

Column是纵向排列容器，Row是横向排列容器。Column内子组件垂直排列，Row内子组件水平排列。

常见布局实现：

  1. 单列布局：使用Column。
  2. 单行布局：使用Row。
  3. 网格布局：结合Column、Row嵌套与Grid组件。
  4. 层叠布局：使用Stack组件。
  5. 自适应布局：通过尺寸设置（百分比、flex权重）实现。

在HarmonyOS Next的ArkUI框架中，Column和Row是两个最基础的线性布局容器，其核心区别在于主轴方向。

核心区别：

  • Column（列容器）： 主轴为垂直方向。子组件从上到下垂直排列。justifyContent控制垂直方向的对齐，alignItems控制水平方向的对齐。
  • Row（行容器）： 主轴为水平方向。子组件从左到右水平排列。justifyContent控制水平方向的对齐，alignItems控制垂直方向的对齐。

简单示例：

// Column示例：垂直排列三个文本
Column() {
  Text('顶部').fontSize(20)
  Text('中间').fontSize(20)
  Text('底部').fontSize(20)
}
.justifyContent(FlexAlign.Center) // 垂直方向居中对齐
.alignItems(HorizontalAlign.Center) // 水平方向居中对齐
.width('100%')
.height('100%')

// Row示例：水平排列三个文本
Row() {
  Text('左').fontSize(20)
  Text('中').fontSize(20)
  Text('右').fontSize(20)
}
.justifyContent(FlexAlign.SpaceBetween) // 水平方向两端对齐
.alignItems(VerticalAlign.Center) // 垂直方向居中对齐
.width('100%')
.height(100)

实现常见页面布局： 通常通过嵌套组合Column和Row来实现复杂布局。

  1. 顶部标题栏+内容区：
Column() {
  // 顶部标题栏 (Row)
  Row() {
    Image($r('app.media.back')).width(30).height(30)
    Text('页面标题').fontSize(24).fontWeight(FontWeight.Bold)
    Blank() // 占位空间
    Image($r('app.media.more')).width(30).height(30)
  }
  .width('100%')
  .padding(10)
  .backgroundColor(Color.White)

  // 内容区 (可滚动Column)
  Scroll() {
    Column() {
      // 页面主要内容...
      Text('滚动内容...').fontSize(16)
    }
    .width('100%')
  }
  .flexGrow(1) // 占据剩余空间
}
.height('100%')
.backgroundColor('#F5F5F5')
  1. 固定底部导航栏：
Column() {
  // 主内容区 (自适应填充)
  Scroll() {
    Column() {
      // 页面内容...
    }
    .width('100%')
  }
  .flexGrow(1)

  // 底部导航栏 (Row)
  Row() {
    ForEach(this.navItems, (item: NavItem) => {
      Column() {
        Image(item.icon).width(24).height(24)
        Text(item.text).fontSize(12)
      }
      .onClick(() => { /* 处理点击 */ })
    }, (item: NavItem) => item.text)
  }
  .width('100%')
  .height(60)
  .backgroundColor(Color.White)
  .justifyContent(FlexAlign.SpaceAround) // 图标均匀分布
}
.height('100%')
  1. 卡片式布局：
Column() {
  ForEach(this.cardList, (item: CardData) => {
    Column() {
      // 卡片头 (Row)
      Row() {
        Image(item.avatar).width(40).height(40).borderRadius(20)
        Column() {
          Text(item.title).fontSize(18)
          Text(item.subtitle).fontSize(14).fontColor('#666')
        }
        .margin({ left: 10 })
        Blank()
        Text(item.time).fontSize(12).fontColor('#999')
      }
      .width('100%')

      // 卡片内容
      Text(item.content).fontSize(16)
        .margin({ top: 10 })
        .width('100%')

      // 卡片底部操作栏 (Row)
      Row() {
        ForEach(item.actions, (action: string) => {
          Text(action).fontSize(14).fontColor('#007DFF')
            .margin({ right: 15 })
        }, (action: string) => action)
      }
      .margin({ top: 10 })
      .width('100%')
    }
    .padding(15)
    .backgroundColor(Color.White)
    .borderRadius(10)
    .margin({ top: 10, left: 12, right: 12 })
  }, (item: CardData) => item.id.toString())
}
.width('100%')
.backgroundColor('#F0F0F0')

关键布局属性：

  • justifyContent：主轴对齐方式（FlexAlign.Start、Center、End、SpaceBetween、SpaceAround、SpaceEvenly）。
  • alignItems：交叉轴对齐方式（VerticalAlign.Top/Center/Bottom 用于Column；HorizontalAlign.Start/Center/End 用于Row）。
  • space：子组件间距（Column设置垂直间距，Row设置水平间距）。
  • flexGrow、flexShrink、flexBasis：弹性布局权重。

选择依据很简单：需要垂直排列用Column，需要水平排列用Row。复杂布局通过两者的嵌套即可实现。

回到顶部