50.[HarmonyOS NEXT RelativeContainer案例七] 均匀分布的底部导航栏：水平链布局技术详解

项目已开源，开源地址： https://gitcode.com/nutpi/HarmonyosNextCaseStudyTutorial ， 欢迎fork & star

效果演示

1. 引言

底部导航栏是移动应用中最常见的导航元素之一，它通常包含多个均匀分布的图标或按钮，用于在应用的主要功能之间切换。在HarmonyOS NEXT中，RelativeContainer组件提供了强大的链式布局(Chain)功能，能够轻松实现元素的均匀分布，非常适合底部导航栏的实现。本教程将详细讲解如何利用RelativeContainer的水平链布局功能实现一个美观、均匀分布的底部导航栏。

2. 链式布局(Chain)概述

链式布局是RelativeContainer提供的一种特殊的布局方式，它可以将一组组件按照特定的方式排列在一条直线上，并控制它们之间的间距和分布方式。链式布局可以是水平的或垂直的，并支持多种分布模式。

2.1 链式布局的特性

• 方向性：可以是水平的或垂直的
• 分布模式：支持多种分布方式，如均匀分布、两端对齐等
• 组件连接：将多个组件连接成一条链
• 自动间距：根据分布模式自动计算组件之间的间距

3. 案例分析：底部导航栏

3.1 完整代码

@Component
export struct BottomNav {
    build() {
        RelativeContainer() {
            // 首页图标
            Image($r('app.media.home'))
                .width(24)
                .height(24)
                .id("home")
                .alignRules({
                    left: { anchor: "parent", align: HorizontalAlign.Start },
                    bottom: { anchor: "parent", align: VerticalAlign.Bottom }
                })

            // 消息图标
            Image($r('app.media.message'))
                .width(24)
                .height(24)
                .id("message")
                .alignRules({
                    left: { anchor: "parent", align: HorizontalAlign.Center },
                    bottom: { anchor: "parent", align: VerticalAlign.Bottom }
                })

            // 我的图标
            Image($r('app.media.profile'))
                .width(24)
                .height(24)
                .id("profile")
                .alignRules({
                    left: { anchor: "parent", align: HorizontalAlign.End },
                    bottom: { anchor: "parent", align: VerticalAlign.Bottom }
                })
        }
        .chainMode([
            {
                id: "horizontalChain",
                direction: Direction.HORIZONTAL,
                style: ChainStyle.SPREAD,
                components: ["home", "message", "profile"]
            }
        ])
        .width('100%')
        .height(56)
        .backgroundColor('#ffffff')
    }
}

3.2 代码详解

3.2.1 RelativeContainer容器设置

RelativeContainer() {
    // 子组件
}
.chainMode([
    {
        id: "horizontalChain",
        direction: Direction.HORIZONTAL,
        style: ChainStyle.SPREAD,
        components: ["home", "message", "profile"]
    }
])
.width('100%')
.height(56)
.backgroundColor('#ffffff')

这部分代码创建了一个RelativeContainer容器，并设置了以下属性：

这里的关键是chainMode属性，它定义了一个水平链：

• id: “horizontalChain” - 链的唯一标识符
• direction: Direction.HORIZONTAL - 链的方向为水平
• style: ChainStyle.SPREAD - 链的样式为均匀分布
• components: [“home”, “message”, “profile”] - 链中包含的组件ID数组

这个水平链将三个图标组件连接起来，并使它们在容器中均匀分布。

3.2.2 首页图标设置

Image($r('app.media.home'))
    .width(24)
    .height(24)
    .id("home")
    .alignRules({
        left: { anchor: "parent", align: HorizontalAlign.Start },
        bottom: { anchor: "parent", align: VerticalAlign.Bottom }
    })

首页图标的关键属性设置：

这里的关键点是为首页图标设置了一个唯一的ID “home”，这样链式布局就可以引用它。同时，图标被定位在容器的左下角。

3.2.3 消息图标设置

Image($r('app.media.message'))
    .width(24)
    .height(24)
    .id("message")
    .alignRules({
        left: { anchor: "parent", align: HorizontalAlign.Center },
        bottom: { anchor: "parent", align: VerticalAlign.Bottom }
    })

消息图标的关键属性设置：

消息图标被定位在容器的底部中心位置。

3.2.4 我的图标设置

Image($r('app.media.profile'))
    .width(24)
    .height(24)
    .id("profile")
    .alignRules({
        left: { anchor: "parent", align: HorizontalAlign.End },
        bottom: { anchor: "parent", align: VerticalAlign.Bottom }
    })

我的图标的关键属性设置：

我的图标被定位在容器的右下角。

4. 链式布局的高级应用

4.1 链式布局样式

RelativeContainer提供了多种链式布局样式：

4.2 链式布局偏移

可以通过设置链的偏移(bias)来调整链在容器中的位置：

.chainMode([
    {
        id: "horizontalChain",
        direction: Direction.HORIZONTAL,
        style: ChainStyle.SPREAD,
        components: ["home", "message", "profile"],
        bias: 0.3 // 链向左偏移
    }
])

4.3 垂直链式布局

除了水平链，还可以创建垂直链：

.chainMode([
    {
        id: "verticalChain",
        direction: Direction.VERTICAL,
        style: ChainStyle.SPREAD,
        components: ["button1", "button2", "button3"]
    }
])

4.4 多链组合

可以在同一个容器中定义多个链，实现复杂的布局：

.chainMode([
    {
        id: "horizontalChain1",
        direction: Direction.HORIZONTAL,
        style: ChainStyle.SPREAD,
        components: ["home", "message", "profile"]
    },
    {
        id: "verticalChain1",
        direction: Direction.VERTICAL,
        style: ChainStyle.SPREAD,
        components: ["header", "content", "footer"]
    }
])

5. 底部导航栏的最佳实践

5.1 导航项的布局

底部导航栏通常包含图标和文本标签，可以使用以下方式布局：

5.2 导航项的选中状态

可以通过状态变量控制导航项的选中状态：

@State currentTab: number = 0;

// 在构建函数中
Image(this.currentTab === 0 ? $r('app.media.home_selected') : $r('app.media.home'))
    .width(24)
    .height(24)
    .id("home")
    .onClick(() => {
        this.currentTab = 0;
    })

6. 实际应用场景

水平链布局在以下场景中特别有用：

1. 底部导航栏：均匀分布的导航图标
2. 工具栏：均匀分布的工具按钮
3. 标签页：均匀分布的标签
4. 评分组件：均匀分布的星星图标

7. 总结

链式布局是RelativeContainer提供的强大功能，特别适合创建均匀分布的组件布局。