ArkUI Row 组件介绍与使用指南

什么是 Row 组件？

Row 是 ArkUI 中的基础布局容器组件，用于水平（横向）排列子组件。它与 Column 组件相对应，是构建用户界面最常用的布局方式之一，类似于其他UI框架中的水平线性布局。

Row 的基本属性

1. space：设置子组件之间的水平间距
2. alignItems：设置子组件在垂直方向的对齐方式
   • VerticalAlign.Top（默认）：顶部对齐
   • VerticalAlign.Center：垂直居中
   • VerticalAlign.Bottom：底部对齐
3. justifyContent：设置子组件在水平方向的对齐方式
   • FlexAlign.Start（默认）：左对齐
   • FlexAlign.Center：水平居中
   • FlexAlign.End：右对齐
   • FlexAlign.SpaceBetween：均匀分布，首尾不留空
   • FlexAlign.SpaceAround：均匀分布，首尾留空
   • FlexAlign.SpaceEvenly：完全均匀分布

基本使用方法

@Entry
@Component
struct RowExample {
  build() {
    Row({ space: 20 }) {
      Text('第一个')
        .fontSize(20)
        .backgroundColor('#f0f0f0')
        .height(60)
        .textAlign(TextAlign.Center)
        .layoutWeight(1)
      
      Text('第二个')
        .fontSize(20)
        .backgroundColor('#e0e0e0')
        .height(60)
        .textAlign(TextAlign.Center)
        .layoutWeight(1)
      
      Text('第三个')
        .fontSize(20)
        .backgroundColor('#d0d0d0')
        .height(60)
        .textAlign(TextAlign.Center)
        .layoutWeight(1)
    }
    .width('100%')
    .height(100)
    .margin({ top: 20 })
    .backgroundColor('#ffffff')
  }
}

高级用法

设置对齐方式

Row() {
  // 子组件...
}
.width('100%')
.height(100)
.alignItems(VerticalAlign.Center) // 垂直居中
.justifyContent(FlexAlign.SpaceBetween) // 水平方向均匀分布
.border({ width: 1, color: Color.Black })

嵌套使用

Row({ space: 10 }) {
  Column() {
    Text('列1')
    Text('列1')
  }
  .layoutWeight(1)
  
  Row({ space: 5 }) {
    Text('嵌套行1')
    Text('嵌套行2')
  }
  .layoutWeight(1)
  .margin({ left: 10 })
  .border({ width: 1, color: Color.Gray })
}

与 Scroll 结合实现水平滚动

@State itemList: string[] = ['项目1', '项目2', '项目3', '项目4', '项目5', '项目6', '项目7', '项目8']

build() {
  Scroll() {
    Row({ space: 15 }) {
      ForEach(this.itemList, (item: string) => {
        Text(item)
          .fontSize(18)
          .height(80)
          .width(120)
          .backgroundColor('#f5f5f5')
          .textAlign(TextAlign.Center)
      })
    }
    .height(100)
    .padding(10)
  }
  .scrollable(ScrollDirection.Horizontal) // 水平滚动
  .margin({ top: 20 })
}

权重布局 (layoutWeight)

Row() {
  Text('权重1')
    .backgroundColor('#ffcccc')
    .height(60)
    .layoutWeight(1) // 占据剩余空间的1/3
    
  Text('权重2')
    .backgroundColor('#ccffcc')
    .height(60)
    .layoutWeight(2) // 占据剩余空间的2/3
}
.width('100%')
.margin(20)

实际应用示例

底部导航栏

@Entry
@Component
struct BottomNav {
  @State currentIndex: number = 0

  build() {
    Column() {
      // 内容区域
      Text(`当前页面: ${this.currentIndex + 1}`)
        .fontSize(24)
        .margin(30)
      
      // 底部导航栏
      Row() {
        ForEach([0, 1, 2], (index: number) => {
          Column() {
            Image(this.currentIndex === index ? 'selected_icon' : 'normal_icon')
              .width(24)
              .height(24)
            Text(`页面${index + 1}`)
              .fontSize(12)
              .margin({ top: 4 })
          }
          .onClick(() => {
            this.currentIndex = index
          })
          .layoutWeight(1)
          .alignItems(HorizontalAlign.Center)
        })
      }
      .width('100%')
      .height(60)
      .backgroundColor('#f8f8f8')
      .border({ width: 1, color: '#eeeeee' })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.SpaceBetween)
  }
}

商品卡片布局

@Entry
@Component
struct ProductCard {
  build() {
    Column() {
      // 商品图片
      Image('product_image')
        .width('100%')
        .height(200)
        .objectFit(ImageFit.Cover)
      
      // 商品信息行
      Row() {
        Column() {
          Text('商品名称')
            .fontSize(16)
            .fontWeight(FontWeight.Bold)
          Text('¥199.00')
            .fontSize(14)
            .margin({ top: 4 })
            .fontColor('#ff0000')
        }
        .layoutWeight(1)
        
        Button('购买')
          .width(80)
          .height(36)
          .fontSize(14)
      }
      .padding(10)
      .alignItems(VerticalAlign.Center)
    }
    .width(180)
    .borderRadius(8)
    .backgroundColor(Color.White)
    .shadow({ radius: 4, color: '#1a000000', offsetX: 1, offsetY: 1 })
    .margin(10)
  }
}

注意事项

1. Row 默认会占用所有可用宽度，如果不希望这样，需要明确设置其宽度
2. 子组件默认会占据 Row 的整个可用高度
3. 当内容超出容器宽度时，需要配合 Scroll 组件使用才能实现水平滚动
4. 使用 layoutWeight 时，所有设置了该属性的子组件会按比例分配剩余空间
5. 在性能敏感的场景中，避免过度嵌套 Row 和 Column 组件

Row 组件是 ArkUI 中实现水平布局的核心组件，熟练掌握它的使用可以高效地构建各种用户界面布局，特别是导航栏、按钮组、列表项等常见UI元素。