项目已开源，开源地址： https://gitcode.com/nutpi/HarmonyosNextCaseStudyTutorial ， 欢迎fork & star
效果演示
1. 概述
HarmonyOS NEXT提供了丰富的布局组件，其中Row组件是一种常用的水平布局容器，可以将子组件按照水平方向排列。本教程将详细讲解如何使用Row组件创建一个水平排列的功能按钮组，重点介绍基础间距与对齐的设置方法。
2. Row组件基础介绍
Row组件是HarmonyOS NEXT中用于水平布局的容器组件，它可以将子组件沿水平方向排列。在实际应用中，Row组件常用于创建导航栏、工具栏、按钮组等UI元素。
2.1 Row组件的基本语法
Row(value?: { space?: number | string })
参数说明：
参数名 |
参数类型 |
必填 |
参数描述 |
space |
number | string |
否 |
子组件在水平方向的间距。 |
3. 案例分析：水平排列的功能按钮组
本案例展示了如何使用Row组件创建一个水平排列的功能按钮组，包含三个按钮：首页、分类和购物车。下面我们将逐步分析代码实现。
3.1 完整代码
@Component export struct ButtonGroupExample { build() { Row({ space: 16 }) // 间距16vp，居中对齐 { Button('首页') .width(80) .height(40) .fontSize(14) .fontColor(0xFFFFFF) .backgroundColor(0x007DFF) .borderRadius(24) Button('分类') .width(80) .height(40) .fontSize(14) .fontColor(0xFFFFFF) .backgroundColor(0x007DFF) .borderRadius(24) Button('购物车') .width(80) .height(40) .fontSize(14) .backgroundColor(0x007DFF) .fontColor(0xFFFFFF) .borderRadius(24) }.width('100%') .height(80) .backgroundColor(0xFFFFFF) .justifyContent(FlexAlign.Center) .shadow({ radius: 4, color: 0x05000000 }) } }
3.2 代码详解
3.2.1 组件声明
@Component export struct ButtonGroupExample { build() { // 组件内容 } }
这部分代码声明了一个名为ButtonGroupExample的自定义组件，使用@Component装饰器标记，并通过export关键字导出，使其可以在其他文件中被引用。
3.2.2 Row容器设置
Row({ space: 16 }) // 间距16vp，居中对齐 { // 子组件 }.width('100%') .height(80) .backgroundColor(0xFFFFFF) .justifyContent(FlexAlign.Center) .shadow({ radius: 4, color: 0x05000000 })
这部分代码创建了一个Row容器，并设置了以下属性：
属性 |
值 |
说明 |
space |
16 |
子组件之间的间距为16vp |
width |
'100%' |
容器宽度占父容器的100% |
height |
80 |
容器高度为80vp |
backgroundColor |
0xFFFFFF |
背景色为白色 |
justifyContent |
FlexAlign.Center |
子组件在主轴（水平方向）上居中对齐 |
shadow |
{ radius: 4, color: 0x05000000 } |
添加阴影效果，阴影半径为4vp，颜色为带透明度的黑色 |
3.2.3 按钮组件设置
在Row容器内，我们添加了三个Button组件，分别是"首页"、"分类"和"购物车"。每个按钮都设置了相同的样式属性：
Button('首页') .width(80) .height(40) .fontSize(14) .fontColor(0xFFFFFF) .backgroundColor(0x007DFF) .borderRadius(24)
按钮样式属性说明：
属性 |
值 |
说明 |
width |
80 |
按钮宽度为80vp |
height |
40 |
按钮高度为40vp |
fontSize |
14 |
文字大小为14fp |
fontColor |
0xFFFFFF |
文字颜色为白色 |
backgroundColor |
0x007DFF |
背景色为蓝色 |
borderRadius |
24 |
边框圆角为24vp，使按钮呈现为胶囊形状 |
4. Row组件的对齐方式
在本案例中，我们使用了justifyContent(FlexAlign.Center)来设置子组件在主轴（水平方向）上的对齐方式。Row组件支持多种对齐方式，下表列出了常用的对齐属性：
4.1 主轴对齐方式（justifyContent）
值 |
说明 |
FlexAlign.Start |
子组件在主轴方向首端对齐 |
FlexAlign.Center |
子组件在主轴方向中心对齐 |
FlexAlign.End |
子组件在主轴方向末端对齐 |
FlexAlign.SpaceBetween |
子组件在主轴方向均匀分布，首尾子组件与父组件边缘对齐 |
FlexAlign.SpaceAround |
子组件在主轴方向均匀分布，包括首尾子组件到父组件边缘的距离 |
FlexAlign.SpaceEvenly |
子组件在主轴方向等间距分布 |
4.2 交叉轴对齐方式（alignItems）
虽然本案例中没有显式设置交叉轴对齐方式，但Row组件也支持通过alignItems属性设置子组件在交叉轴（垂直方向）上的对齐方式：
值 |
说明 |
ItemAlign.Start |
子组件在交叉轴方向首端对齐 |
ItemAlign.Center |
子组件在交叉轴方向中心对齐 |
ItemAlign.End |
子组件在交叉轴方向末端对齐 |
ItemAlign.Stretch |
子组件在交叉轴方向拉伸填充父容器（需要子组件在交叉轴方向上未设置具体尺寸） |
ItemAlign.Baseline |
子组件在交叉轴方向以第一行文本的基线对齐 |
5. 实现要点与技巧
5.1 间距设置技巧
在Row组件中，可以通过两种方式设置子组件之间的间距：
- 使用space参数：如本案例中的
Row({ space: 16 })，这种方式简单直观，适合子组件间距相等的情况。 - 使用margin属性：可以为每个子组件单独设置margin，实现更灵活的间距控制。例如：
Button('首页') .width(80) .height(40) .margin({ right: 16 })
5.2 阴影效果
本案例中使用了shadow属性为按钮组添加阴影效果，增强视觉层次感：
.shadow({ radius: 4, color: 0x05000000 })
阴影属性说明：
参数 |
说明 |
radius |
阴影模糊半径 |
color |
阴影颜色，支持RGBA格式 |
offsetX |
阴影X方向偏移量（可选） |
offsetY |
阴影Y方向偏移量（可选） |
5.3 按钮样式统一性
在实际开发中，当多个按钮样式相似时，可以考虑提取公共样式，减少代码重复：
// 定义公共样式函数 private commonButtonStyle(button: Button) { button.width(80) .height(40) .fontSize(14) .fontColor(0xFFFFFF) .backgroundColor(0x007DFF) .borderRadius(24) } // 使用公共样式 Button('首页') .apply(this.commonButtonStyle)
6. 总结
本教程详细讲解了如何使用HarmonyOS NEXT的Row组件创建水平排列的功能按钮组，重点介绍了基础间距与对齐的设置方法。
