32.[HarmonyOS NEXT Row案例一（上）] 使用Row组件创建水平排列的功能按钮组

项目已开源，开源地址： 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	否	子组件在水平方向的间距。 - number类型时，单位为vp - string类型时，可以设置为CSS长度单位

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组件中，可以通过两种方式设置子组件之间的间距：

1. 使用space参数：如本案例中的Row({ space: 16 })，这种方式简单直观，适合子组件间距相等的情况。

2. 使用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组件创建水平排列的功能按钮组，重点介绍了基础间距与对齐的设置方法。