[HarmonyOS NEXT 实战案例：分割布局] 基础篇 - 可调整分割比例的垂直布局

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

效果演示

引言

在HarmonyOS NEXT应用开发中，用户体验是一个非常重要的方面。为了提供更加灵活和个性化的界面布局，我们常常需要让用户能够根据自己的喜好调整界面的布局比例。本教程将详细讲解如何实现一个可调整分割比例的垂直布局，让用户能够通过滑块控制左右两个区域的宽度比例。

基础知识

在开始实现可调整分割比例的垂直布局之前，我们需要了解以下几个关键组件：

组件名称	功能描述
ColumnSplit	垂直分割布局容器，可以将界面在水平方向上分割成多个区域
Slider	滑块控件，允许用户通过滑动来选择一个范围内的值
@State	状态装饰器，用于管理组件内的状态变量，当状态变化时会触发UI更新

代码实现

让我们通过一个完整的示例来了解如何实现可调整分割比例的垂直布局：

@Component
export struct AdjustableColumnSplitExample {
    @State splitRatio: number = 0.3

    build() {
        Column() {
            Text('可调整比例的垂直分割')
                .fontSize(20)
                .fontWeight(FontWeight.Bold)
                .margin({ bottom: 10 })

            Slider({
                value: this.splitRatio,
                min: 0.1,
                max: 0.9,
                step: 0.1,
                style: SliderStyle.OutSet
            })
                .onChange((value: number) => {
                    this.splitRatio = value
                })
                .margin({ bottom: 10 })

            ColumnSplit() {
                Column() {
                    Text('左侧区域')
                        .fontSize(16)
                    Text(`当前比例: ${Math.round(this.splitRatio * 100)}%`)
                }
                .width(`${this.splitRatio * 100}%`)
                .backgroundColor('#fff2cc')

                Column() {
                    Text('右侧区域')
                        .fontSize(16)
                    Text(`当前比例: ${Math.round((1 - this.splitRatio) * 100)}%`)
                }
                .padding(10)
            }
            .height(300)
        }
        .padding(15)
    }
}

代码详解

组件结构

首先，我们定义了一个名为AdjustableColumnSplitExample的自定义组件：

@Component
export struct AdjustableColumnSplitExample {
    // 组件内容
}

状态管理

在组件内部，我们使用@State装饰器定义了一个名为splitRatio的状态变量，用于控制分割比例：

@State splitRatio: number = 0.3

这个状态变量的初始值为0.3，表示左侧区域占总宽度的30%。

外层容器

我们使用Column组件作为最外层的容器，设置了15的内边距：

Column() {
    // 内容
}
.padding(15)

标题文本

在Column容器内，我们首先添加了一个标题文本：

Text('可调整比例的垂直分割')
    .fontSize(20)
    .fontWeight(FontWeight.Bold)
    .margin({ bottom: 10 })

这个文本设置了字体大小为20，字体粗细为粗体，底部边距为10。

滑块控件

接下来，我们添加了一个Slider滑块控件，用于调整分割比例：

Slider({
    value: this.splitRatio,
    min: 0.1,
    max: 0.9,
    step: 0.1,
    style: SliderStyle.OutSet
})
    .onChange((value: number) => {
        this.splitRatio = value
    })
    .margin({ bottom: 10 })

在这个Slider控件中：

• value属性绑定到splitRatio状态变量，表示滑块的当前值
• min属性设置为0.1，表示最小值为10%
• max属性设置为0.9，表示最大值为90%
• step属性设置为0.1，表示每次调整的步长为10%
• style属性设置为SliderStyle.OutSet，表示滑块的样式

我们还为Slider添加了一个onChange事件处理函数，当用户拖动滑块时，会更新splitRatio状态变量的值，从而触发UI更新。

ColumnSplit容器

然后，我们添加了一个ColumnSplit容器，用于实现垂直分割布局：

ColumnSplit() {
    // 左侧区域
    // 右侧区域
}
.height(300)

我们为ColumnSplit容器设置了高度为300。

左侧区域

在ColumnSplit容器内，我们首先添加了左侧区域的内容：

Column() {
    Text('左侧区域')
        .fontSize(16)
    Text(`当前比例: ${Math.round(this.splitRatio * 100)}%`)
}
.width(`${this.splitRatio * 100}%`)
.backgroundColor('#fff2cc')

在这个Column中：

• 我们添加了两个文本，一个显示"左侧区域"，另一个显示当前的比例值
• 我们使用Math.round(this.splitRatio * 100)将比例值转换为百分比，并四舍五入为整数
• 我们为Column设置了宽度为${this.splitRatio * 100}%，表示宽度随splitRatio的值动态变化
• 我们为Column设置了背景色为#fff2cc（浅黄色）

右侧区域

接下来，我们添加了右侧区域的内容：

Column() {
    Text('右侧区域')
        .fontSize(16)
    Text(`当前比例: ${Math.round((1 - this.splitRatio) * 100)}%`)
}
.padding(10)

在这个Column中：

• 我们添加了两个文本，一个显示"右侧区域"，另一个显示当前的比例值
• 我们使用Math.round((1 - this.splitRatio) * 100)计算右侧区域的比例值，并四舍五入为整数
• 我们为Column设置了内边距为10

动态调整原理

在这个示例中，我们实现了动态调整分割比例的功能，主要通过以下几个步骤：

1. 使用@State装饰器定义一个状态变量splitRatio，用于控制分割比例
2. 使用Slider控件让用户可以通过滑动来调整splitRatio的值
3. 将左侧区域的宽度绑定到splitRatio，使其随splitRatio的值动态变化
4. 在左右两个区域内显示当前的比例值，提供视觉反馈

当用户拖动滑块时，onChange事件处理函数会更新splitRatio的值，从而触发UI更新。左侧区域的宽度会根据新的splitRatio值进行调整，右侧区域会自动占据剩余的空间。同时，左右两个区域内显示的比例值也会更新，提供实时的视觉反馈。

数据绑定与响应式更新

在HarmonyOS NEXT中，数据绑定和响应式更新是非常重要的概念。在这个示例中，我们使用了以下几种数据绑定方式：

1. 属性绑定：将Slider的value属性绑定到splitRatio状态变量
2. 样式绑定：将左侧区域的宽度绑定到splitRatio状态变量
3. 文本插值：在文本中使用${...}语法插入动态计算的值

当splitRatio状态变量的值发生变化时，所有绑定到它的UI元素都会自动更新，这就是响应式更新的原理。

小结

在本教程中，我们详细讲解了如何实现一个可调整分割比例的垂直布局。通过使用ColumnSplit、Slider和@State等组件和特性，我们实现了一个可以让用户通过滑块控制左右两个区域宽度比例的界面。