[HarmonyOS NEXT 实战案例：分割布局] 进阶篇 - 设置中心的动态内容与复用构建

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

效果演示

引言

在上一篇教程中，我们学习了如何使用RowSplit和ColumnSplit组件构建设置中心的基础布局结构。本篇教程将深入探讨如何使用@Builder装饰器创建可复用的UI构建函数，以及如何实现账户设置和通知设置的详细内容，从而打造一个功能完整的设置中心界面。

@Builder装饰器介绍

在HarmonyOS NEXT中，@Builder装饰器是一个强大的工具，它允许我们定义可复用的UI构建函数。这些函数可以在组件的build方法中多次调用，从而实现UI代码的模块化和复用。

@Builder装饰器的基本语法如下：

@Builder
private functionName() {
    // UI构建代码
}

在我们的设置中心案例中，我们使用@Builder装饰器定义了两个UI构建函数：buildAccountSettings和buildNotificationSettings，分别用于构建账户设置和通知设置的界面。

账户设置界面实现

首先，我们来看一下账户设置界面的实现：

@Builder
private buildAccountSettings() {
    Column() {
        List({ space: 12 }) {
            ListItem() {
                Row() {
                    Text('华为账号').fontSize(18)
                    Blank()
                    Text('已绑定').fontColor('#999')
                }
            }

            ListItem() {
                Row() {
                    Text('手机号').fontSize(18)
                    Blank()
                    Text('138****8888').fontColor('#999')
                }
            }

            ListItem() {
                Row() {
                    Text('安全中心').fontSize(18).width('40%')
                    Blank()
                    Image($r('app.media.arrowright'))
                        .width(12)
                        .height(12)
                }.height(40)
                .justifyContent(FlexAlign.SpaceBetween)
            }
        }
    }
}

在这段代码中：

1. 我们使用@Builder装饰器定义了一个名为buildAccountSettings的私有方法
2. 方法内部使用Column组件作为容器，包含一个List组件
3. List组件设置了项目间距为12，包含三个ListItem
4. 每个ListItem内部都是一个Row组件，用于水平排列内容
5. 第一个和第二个ListItem显示账号和手机号信息，使用Blank组件在左右两侧的文本之间创建弹性空间
6. 第三个ListItem显示安全中心选项，右侧有一个箭头图标，表示可以点击进入下一级界面

List组件的使用

在账户设置界面中，我们使用了List和ListItem组件来创建列表。List组件是HarmonyOS提供的用于显示列表数据的容器组件，它可以包含多个ListItem子组件。

List组件的基本用法如下：

List({ space: spacing }) {
    // ListItem子组件
}

其中，space参数指定列表项之间的间距。

Row与Blank组件的配合使用

在每个ListItem中，我们使用了Row和Blank组件的组合来实现两端对齐的布局：

Row() {
    Text('华为账号').fontSize(18)
    Blank()
    Text('已绑定').fontColor('#999')
}

Blank组件会占据Row中的所有可用空间，从而将左右两侧的文本推向两端。这是实现两端对齐布局的一种简单而有效的方式。

使用justifyContent属性

在第三个ListItem中，我们使用了另一种方式来实现两端对齐：

Row() {
    Text('安全中心').fontSize(18).width('40%')
    Blank()
    Image($r('app.media.arrowright'))
        .width(12)
        .height(12)
}.height(40)
.justifyContent(FlexAlign.SpaceBetween)

这里，我们为Row组件设置了justifyContent(FlexAlign.SpaceBetween)属性，这会使得Row中的子组件均匀分布，第一个子组件靠左，最后一个子组件靠右，中间的空间均匀分布。

通知设置界面实现

接下来，我们来看一下通知设置界面的实现：

@Builder
private buildNotificationSettings() {
    Column() {
        ForEach(['应用通知', '消息提醒', '系统更新'], (item:string) => {
            Row() {
                Toggle({ type: ToggleType.Switch })
                    .margin({ right: 15 })
                Text(item).fontSize(18)
            }.margin({ bottom: 20 })
        })
    }
}

在这段代码中：

1. 我们使用@Builder装饰器定义了一个名为buildNotificationSettings的私有方法
2. 方法内部使用Column组件作为容器
3. 使用ForEach循环遍历一个字符串数组，为每个通知类型创建一个包含开关和文本的行
4. 每一行都是一个Row组件，包含一个Toggle开关和一个Text文本
5. Toggle组件设置了类型为ToggleType.Switch，表示显示为开关样式，右侧有15的边距
6. 每个Row组件设置了底部边距为20，使得各行之间有足够的间隔

Toggle组件的使用

在通知设置界面中，我们使用了Toggle组件来创建开关控件。Toggle组件是HarmonyOS提供的用于创建开关控件的组件，它可以用于表示开/关、是/否等二元状态。

Toggle组件的基本用法如下：

Toggle({ type: ToggleType.Switch })

其中，type参数指定开关的类型，ToggleType.Switch表示显示为开关样式。

ForEach的灵活应用

在通知设置界面中，我们使用了ForEach来遍历一个字符串数组，为每个元素创建相同结构的UI：

ForEach(['应用通知', '消息提醒', '系统更新'], (item:string) => {
    Row() {
        Toggle({ type: ToggleType.Switch })
            .margin({ right: 15 })
        Text(item).fontSize(18)
    }.margin({ bottom: 20 })
})

这种方式可以大大减少重复代码，使得UI构建更加简洁和可维护。当需要添加或删除通知类型时，只需修改数组即可，无需修改UI构建代码。

动态内容切换的实现

在设置中心的右侧内容区，我们根据左侧选中的菜单项动态切换显示不同的内容：

// 内容区（根据选择动态变化）
if (this.selectedMenu === '账户') {
    this.buildAccountSettings()
} else if (this.selectedMenu === '通知') {
    this.buildNotificationSettings()
}

这里，我们使用条件语句根据selectedMenu的值来决定调用哪个@Builder方法。当selectedMenu的值为'账户'时，调用buildAccountSettings方法构建账户设置界面；当值为'通知'时，调用buildNotificationSettings方法构建通知设置界面。

这种方式实现了界面的动态切换，使得用户可以通过点击左侧菜单来查看不同类别的设置。

完整代码分析

让我们来看一下设置中心的完整代码：

@Component
export struct SettingsCenter {
    @State selectedMenu: string = '账户'

    build() {
        RowSplit() {
            // 左侧菜单 (40%)
            Column() {
                Text('设置中心').fontSize(20).margin({ top: 20, bottom: 30 })
                ForEach(['账户', '通知', '隐私', '显示', '存储', '关于'], (item:string) => {
                    Button(item)
                        .width('90%')
                        .stateEffect(this.selectedMenu === item)
                        .margin({ bottom: 12 })
                        .onClick(() => { this.selectedMenu = item })
                })
            }.width('40%').backgroundColor('#f5f5f5')

            // 右侧内容区 (60%)
            ColumnSplit() {
                // 标题区
                Text(this.selectedMenu + '设置')
                    .fontSize(24)
                    .margin({ top: 20, bottom: 20 })

                // 内容区（根据选择动态变化）
                if (this.selectedMenu === '账户') {
                    this.buildAccountSettings()
                } else if (this.selectedMenu === '通知') {
                    this.buildNotificationSettings()
                }

                // 底部操作按钮
                Button('保存设置')
                    .width('90%')
                    .margin(20)
            }.width('60%')
        }
    }

    @Builder
    private buildAccountSettings() {
        // 账户设置界面
    }

    @Builder
    private buildNotificationSettings() {
        // 通知设置界面
    }
}

这段代码展示了一个完整的设置中心组件，包括：

1. 使用@Component装饰器定义一个自定义组件
2. 使用@State声明状态变量，用于跟踪当前选中的菜单项
3. 在build方法中使用RowSplit和ColumnSplit组件构建布局结构
4. 使用@Builder装饰器定义可复用的UI构建函数
5. 根据状态变量的值条件渲染不同的内容

布局组件的嵌套使用

在这个案例中，我们看到了布局组件的嵌套使用：

1. 最外层是RowSplit组件，将界面分为左右两部分
2. 左侧使用Column组件垂直排列菜单项
3. 右侧使用ColumnSplit组件，将内容区垂直分割为三个部分
4. 在账户设置界面中，使用Column、List、ListItem和Row组件构建复杂的列表布局
5. 在通知设置界面中，使用Column和Row组件构建开关列表

这种嵌套使用方式展示了HarmonyOS布局系统的灵活性和强大性，可以通过组合不同的布局组件来构建复杂的界面结构。

小结

在本教程中，我们深入探讨了如何使用@Builder装饰器创建可复用的UI构建函数，以及如何实现账户设置和通知设置的详细内容。 在实际应用开发中，你可以根据自己的需求扩展这个设置中心，添加更多的设置类别和选项，或者调整布局和样式，打造出符合你应用风格的设置界面。