当前位置：首页 > backend >正文

6.ArkUI Row的介绍和使用

backend 2025/5/11 5:49:48

ArkUI Row 组件介绍与使用指南

什么是 Row 组件？

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

Row 的基本属性

space：设置子组件之间的水平间距
alignItems：设置子组件在垂直方向的对齐方式
- VerticalAlign.Top（默认）：顶部对齐
- VerticalAlign.Center：垂直居中
- VerticalAlign.Bottom：底部对齐
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/3Text('权重2').backgroundColor('#ccffcc').height(60).layoutWeight(2) // 占据剩余空间的2/3
}
.width('100%')
.margin(20)

实际应用示例

底部导航栏

@Entry
@Component
struct BottomNav {@State currentIndex: number = 0build() {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)}
}