[HarmonyOS NEXT 实战案例：设置页面] 基础篇 - 垂直分割布局构建设置中心

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

效果演示

引言

设置页面是几乎所有应用程序中不可或缺的一部分，它允许用户自定义应用的行为和外观。一个设计良好的设置页面应该具有清晰的分类和直观的交互方式，使用户能够轻松找到并调整所需的选项。本教程将详细讲解如何使用HarmonyOS NEXT的ColumnSplit组件构建一个设置页面，通过垂直分割布局将界面分为设置分类和设置内容两个主要部分。

组件概述

在本案例中，我们将使用以下HarmonyOS NEXT组件：

组件名称	功能描述
ColumnSplit	垂直分割布局容器，将界面分为左右两部分
Column	垂直布局容器，用于垂直排列子组件
Row	水平布局容器，用于水平排列子组件
Text	文本组件，用于显示标题和设置项名称
Toggle	开关组件，用于切换设置项的状态
Slider	滑块组件，用于调整数值类型的设置项
Button	按钮组件，用于触发操作
ForEach	循环渲染组件，用于渲染设置分类列表

数据模型

在这个设置页面案例中，我们定义了三个状态变量来管理设置项的值：

@State notificationsEnabled: boolean = true
@State darkModeEnabled: boolean = false
@State fontSize: number = 16

这些状态变量分别用于：

• notificationsEnabled：控制是否接收通知
• darkModeEnabled：控制是否启用深色模式
• fontSize：控制字体大小，范围从12到24像素

布局结构分析

我们的设置页面布局采用了垂直分割的方式，将界面分为左右两个部分：

1. 左侧：设置分类区域，占总宽度的30%，包含不同的设置类别
2. 右侧：设置内容区域，占总宽度的70%，显示当前选中类别的具体设置项

整体布局结构如下：

Column (整体容器)
└── Text (标题)
└── ColumnSplit (垂直分割布局)
    ├── Column (左侧 - 设置分类)
    │   └── ForEach (设置类别列表)
    │       └── Text (类别名称)
    └── Column (右侧 - 设置内容)
        ├── Text (设置类别标题)
        ├── Row (深色模式设置)
        │   ├── Text (设置项名称)
        │   └── Toggle (开关)
        ├── Row (字体大小设置)
        │   ├── Text (设置项名称)
        │   ├── Text (当前值)
        │   └── Slider (滑块)
        ├── Row (通知设置)
        │   ├── Text (设置项名称)
        │   └── Toggle (开关)
        └── Button (清除缓存按钮)

代码详解

组件定义与状态声明

@Component
export struct SettingsPageExample {
    @State notificationsEnabled: boolean = true
    @State darkModeEnabled: boolean = false
    @State fontSize: number = 16

    build() {
        // 组件内容
    }
}

我们使用@Component装饰器定义了一个名为SettingsPageExample的组件，并使用@State装饰器声明了三个状态变量，用于管理设置项的值。

整体布局结构

Column() {
    Text('设置页面布局')
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
        .margin({ bottom: 10 })

    ColumnSplit() {
        // 左侧设置分类
        // 右侧设置内容
    }
    .height(500)
}
.padding(15)

整体布局使用一个Column组件作为容器，包含一个标题文本和一个ColumnSplit组件。ColumnSplit组件的高度设置为500像素，整个Column容器设置了15像素的内边距。

左侧设置分类

Column() {
    ForEach(['通用设置', '通知设置', '隐私设置', '关于'], (item: string) => {
        Text(item)
            .fontSize(16)
            .padding(15)
            .width('100%')
            .borderRadius(5)
            .backgroundColor('#f5f5f5')
            .margin({ bottom: 5 })
    })
}
.width('30%')
.padding(5)

左侧设置分类区域使用一个Column组件，宽度设置为总宽度的30%，内边距为5像素。使用ForEach组件循环渲染四个设置类别：通用设置、通知设置、隐私设置和关于。每个类别使用一个Text组件显示，设置了字体大小、内边距、宽度、圆角、背景色和底部外边距。

右侧设置内容

Column() {
    Text('通用设置')
        .fontSize(18)
        .fontWeight(FontWeight.Bold)
        .margin({ bottom: 20 })

    // 主题设置
    Row() {
        Text('深色模式')
            .fontSize(16)
            .layoutWeight(1)
        Toggle({ type: ToggleType.Switch, isOn: this.darkModeEnabled })
            .onChange((isOn: boolean) => {
                this.darkModeEnabled = isOn
            })
    }
    .padding(15)
    .borderRadius(5)
    .backgroundColor('#f5f5f5')
    .margin({ bottom: 10 })

    // 字体大小
    Row() {
        Text('字体大小')
            .fontSize(16)
            .layoutWeight(1)
        Text(`${this.fontSize}px`)
            .fontSize(16)
            .margin({ right: 10 })
        Slider({
            value: this.fontSize,
            min: 12,
            max: 24,
            step: 1,
            style: SliderStyle.OutSet
        })
            .onChange((value: number) => {
                this.fontSize = value
            })
            .width(150)
    }
    .padding(15)
    .borderRadius(5)
    .backgroundColor('#f5f5f5')
    .margin({ bottom: 10 })

    // 通知设置
    Row() {
        Text('接收通知')
            .fontSize(16)
            .layoutWeight(1)
        Toggle({ type: ToggleType.Switch, isOn: this.notificationsEnabled })
            .onChange((isOn: boolean) => {
                this.notificationsEnabled = isOn
            })
    }
    .padding(15)
    .borderRadius(5)
    .backgroundColor('#f5f5f5')
    .margin({ bottom: 10 })

    // 清除缓存
    Button('清除缓存')
        .width('100%')
        .height(50)
        .fontSize(16)
        .margin({ top: 20 })
}
.padding(15)

右侧设置内容区域使用一个Column组件，内边距为15像素。包含以下内容：

1. 标题：使用Text组件显示"通用设置"，设置了字体大小、字体粗细和底部外边距。

2. 深色模式设置：使用Row组件水平排列一个Text组件和一个Toggle组件。Text组件显示"深色模式"，Toggle组件用于切换深色模式的状态。整个Row设置了内边距、圆角、背景色和底部外边距。

3. 字体大小设置：使用Row组件水平排列一个Text组件、一个显示当前值的Text组件和一个Slider组件。Slider组件用于调整字体大小，设置了最小值、最大值、步长和样式。整个Row设置了内边距、圆角、背景色和底部外边距。

4. 通知设置：使用Row组件水平排列一个Text组件和一个Toggle组件。Text组件显示"接收通知"，Toggle组件用于切换通知的状态。整个Row设置了内边距、圆角、背景色和底部外边距。

5. 清除缓存按钮：使用Button组件显示"清除缓存"，设置了宽度、高度、字体大小和顶部外边距。

布局技巧

1. 比例设置

在本案例中，我们使用百分比设置左侧设置分类区域的宽度：

.width('30%')

这样可以确保在不同屏幕尺寸下，左侧区域始终占据总宽度的30%，右侧区域占据剩余的70%。

2. 边距与圆角

为了使界面更加美观，我们为各个组件设置了适当的边距和圆角：

.padding(15)
.borderRadius(5)
.margin({ bottom: 10 })

这些设置使得界面元素之间有适当的间距，并且边角圆滑，视觉效果更加舒适。

3. 背景色区分

我们为设置项设置了浅灰色背景，与白色背景形成对比，使界面层次更加分明：

.backgroundColor('#f5f5f5')

4. 布局权重

在设置项的Row组件中，我们使用layoutWeight属性使文本组件占据剩余空间：

.layoutWeight(1)

这样可以确保文本组件占据大部分空间，控件组件（如Toggle和Slider）只占据必要的空间。

交互实现

1. 开关控件

Toggle({ type: ToggleType.Switch, isOn: this.darkModeEnabled })
    .onChange((isOn: boolean) => {
        this.darkModeEnabled = isOn
    })

我们使用Toggle组件实现开关控件，通过onChange事件监听用户的操作，并更新对应的状态变量。

2. 滑块控件

Slider({
    value: this.fontSize,
    min: 12,
    max: 24,
    step: 1,
    style: SliderStyle.OutSet
})
    .onChange((value: number) => {
        this.fontSize = value
    })

我们使用Slider组件实现滑块控件，设置了最小值、最大值和步长，通过onChange事件监听用户的操作，并更新对应的状态变量。

小结

在本教程中，我们详细讲解了如何使用HarmonyOS NEXT的ColumnSplit组件构建一个设置页面。通过垂直分割布局，我们将界面分为设置分类和设置内容两个主要部分，使用户能够清晰地看到不同的设置类别和对应的设置项。