东莞疫情什么时候解封_微信网页开发教程_江苏seo外包_推广优化

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/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)}
}

注意事项

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

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