88.[HarmonyOS NEXT 实战案例：分割布局] 基础篇 - 打造现代化设置中心界面

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

效果演示

引言

在现代应用开发中，设置中心是几乎每个应用都必备的功能模块。一个设计良好的设置中心不仅能提供清晰的导航和功能分类，还能为用户提供直观的操作体验。本教程将详细讲解如何使用HarmonyOS NEXT的布局组件，特别是RowSplit和ColumnSplit组件，来构建一个功能完善的设置中心界面。

设置中心布局概述

我们要实现的设置中心采用了经典的左右分栏设计：

• 左侧为菜单栏，占据屏幕宽度的40%，用于展示各个设置类别
• 右侧为内容区，占据屏幕宽度的60%，根据左侧选择的菜单项动态显示不同的设置内容

这种布局设计在平板和桌面应用中非常常见，能够有效利用屏幕空间，提供更好的用户体验。

核心组件介绍

RowSplit组件

RowSplit是HarmonyOS提供的水平分割布局组件，用于将界面在水平方向上分割成多个区域。在我们的设置中心案例中，RowSplit用于将界面分为左右两部分。

ColumnSplit组件

ColumnSplit是HarmonyOS提供的垂直分割布局组件，用于将界面在垂直方向上分割成多个区域。在我们的案例中，ColumnSplit用于将右侧内容区进一步分割为上中下三个部分。

基础结构实现

首先，我们来看一下设置中心的基础结构实现：

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

    build() {
        RowSplit() {
            // 左侧菜单 (40%)
            Column() {
                Text('设置中心').fontSize(20).margin({ top: 20, bottom: 30 })
                // 菜单项
            }.width('40%').backgroundColor('#f5f5f5')

            // 右侧内容区 (60%)
            ColumnSplit() {
                // 标题区
                // 内容区
                // 底部操作按钮
            }.width('60%')
        }
    }
}

这段代码定义了一个名为SettingsCenter的自定义组件，使用@Component装饰器标记。组件内部使用@State声明了一个状态变量selectedMenu，用于跟踪当前选中的菜单项，默认值为'账户'。

在build方法中，我们使用RowSplit组件将界面分为左右两部分：

• 左侧是一个Column组件，宽度为40%，背景色为浅灰色
• 右侧是一个ColumnSplit组件，宽度为60%

左侧菜单实现

接下来，我们来实现左侧的菜单栏：

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')

在这段代码中：

1. 我们首先添加了一个标题文本"设置中心"，设置了字体大小和上下边距
2. 使用ForEach循环遍历一个字符串数组，为每个菜单项创建一个按钮
3. 每个按钮都设置了宽度为90%，下边距为12，并使用stateEffect属性根据当前选中状态显示不同的视觉效果
4. 为每个按钮添加了点击事件处理函数，当按钮被点击时，更新selectedMenu状态变量的值

右侧内容区实现

右侧内容区使用ColumnSplit组件进行垂直分割，包含三个部分：

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%')

在这段代码中：

1. 顶部是一个标题文本，显示当前选中的菜单项名称加上"设置"后缀

2. 中间是内容区，根据当前选中的菜单项动态显示不同的内容

   • 如果选中的是"账户"，则调用buildAccountSettings方法构建账户设置界面
   • 如果选中的是"通知"，则调用buildNotificationSettings方法构建通知设置界面
3. 底部是一个"保存设置"按钮，宽度为90%，四周有20的边距

状态管理与数据绑定

在这个案例中，我们使用了HarmonyOS的状态管理机制来实现界面的动态更新：

1. @State selectedMenu: string = '账户' - 使用@State装饰器声明一个状态变量，当这个变量的值发生变化时，相关的UI会自动更新
2. 在按钮的点击事件中更新状态变量：.onClick(() => { this.selectedMenu = item })

3. 在右侧内容区根据状态变量的值条件渲染不同的内容：

   if (this.selectedMenu === '账户') {
       this.buildAccountSettings()
   } else if (this.selectedMenu === '通知') {
       this.buildNotificationSettings()
   }

这种状态管理方式使得我们的界面能够响应用户的交互，动态更新显示的内容。

小结

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