90.[HarmonyOS NEXT 实战案例：分割布局] 基础篇 - 垂直分割布局ColumnSplit详解

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

效果演示

引言

在HarmonyOS NEXT应用开发中，布局是构建用户界面的基础。垂直分割布局ColumnSplit是一种常用的布局方式，它可以将界面在垂直方向上分割成多个区域，每个区域可以包含不同的内容。本教程将详细讲解ColumnSplit组件的基本用法和特点，帮助你掌握这一重要的布局技术。

ColumnSplit组件概述

ColumnSplit是HarmonyOS提供的一种容器组件，用于在垂直方向上分割界面。它的主要特点包括：

1. 垂直分割：将界面在垂直方向（从左到右）分割成多个区域
2. 灵活布局：每个分割区域可以设置不同的宽度比例
3. 内容独立：每个分割区域可以包含独立的内容
4. 嵌套使用：可以与其他布局组件嵌套使用，构建复杂的界面结构

基础垂直分割布局示例

让我们通过一个基础示例来了解ColumnSplit的用法：

@Component
export struct BasicColumnSplitExample {
    build() {
        Column() {
            Text('基础垂直分割布局')
                .fontSize(20)
                .fontWeight(FontWeight.Bold)
                .margin({ bottom: 10 })

            ColumnSplit() {
                // 左侧区域
                Column() {
                    Image($r('app.media.big31'))
                        .width(100)
                        .height(100)
                        .borderRadius(50)
                        .margin({ top: 20 })
                    Text('用户信息')
                        .fontSize(16)
                        .margin({ top: 10 })
                }
                .width('40%')
                .backgroundColor('#f0f0f0')

                // 右侧区域
                Column() {
                    Text('个人资料详情')
                        .fontSize(18)
                        .margin({ top: 20, bottom: 10 })
                    Text('姓名: 张三')
                    Text('年龄: 28')
                    Text('职业: 软件工程师')
                }
                .padding(10)
            }
            .height(300)
        }
        .padding(15)
    }
}

在这个示例中，我们创建了一个基础的垂直分割布局，将界面分为左右两个区域：

1. 左侧区域显示用户头像和标题，宽度占40%
2. 右侧区域显示用户的详细信息，宽度占60%（默认）

代码详解

组件结构

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

@Component
export struct BasicColumnSplitExample {
    build() {
        // 组件内容
    }
}

外层容器

在build方法中，我们使用Column组件作为最外层容器，并设置了内边距：

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

标题文本

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

Text('基础垂直分割布局')
    .fontSize(20)
    .fontWeight(FontWeight.Bold)
    .margin({ bottom: 10 })

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

ColumnSplit容器

接下来，我们使用ColumnSplit组件创建垂直分割布局：

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

ColumnSplit容器设置了高度为300，这意味着整个分割布局的高度为300像素。

左侧区域

在ColumnSplit容器内，我们首先定义了左侧区域：

Column() {
    Image($r('app.media.big31'))
        .width(100)
        .height(100)
        .borderRadius(50)
        .margin({ top: 20 })
    Text('用户信息')
        .fontSize(16)
        .margin({ top: 10 })
}
.width('40%')
.backgroundColor('#f0f0f0')

左侧区域使用Column组件垂直排列内容，包括：

1. 一个圆形图片，宽高为100，边框半径为50（使其呈现为圆形），顶部边距为20
2. 一个文本标签，字体大小为16，顶部边距为10

整个左侧区域设置了宽度为40%，背景色为浅灰色。

右侧区域

然后，我们定义了右侧区域：

Column() {
    Text('个人资料详情')
        .fontSize(18)
        .margin({ top: 20, bottom: 10 })
    Text('姓名: 张三')
    Text('年龄: 28')
    Text('职业: 软件工程师')
}
.padding(10)

右侧区域也使用Column组件垂直排列内容，包括：

1. 一个标题文本，字体大小为18，上下边距分别为20和10
2. 三个信息文本，显示用户的姓名、年龄和职业

整个右侧区域设置了内边距为10。由于我们没有为右侧区域指定宽度，它会自动占据ColumnSplit容器中剩余的宽度，即60%。

ColumnSplit的关键属性

在使用ColumnSplit组件时，有几个关键属性需要了解：

1. 宽度设置

对于ColumnSplit的子组件，可以通过width属性设置其宽度。宽度可以使用以下几种方式指定：

• 百分比：如.width('40%')，表示占据父容器宽度的40%
• 固定像素：如.width(200)，表示宽度为200像素
• 自适应：不设置宽度，子组件会根据内容自动调整宽度

在我们的示例中，左侧区域设置了宽度为40%，右侧区域没有设置宽度，因此右侧区域会自动占据剩余的60%宽度。

2. 高度设置

对于ColumnSplit容器本身，可以通过height属性设置其高度。在我们的示例中，设置了高度为300像素：

ColumnSplit() {
    // 内容
}
.height(300)

3. 背景色设置

可以为ColumnSplit的子组件设置背景色，使不同区域有视觉上的区分。在我们的示例中，左侧区域设置了背景色为浅灰色：

.backgroundColor('#f0f0f0')

4. 内边距设置

可以为ColumnSplit的子组件设置内边距，控制内容与边界的距离。在我们的示例中，右侧区域设置了内边距为10：

.padding(10)

ColumnSplit与其他布局组件的组合使用

在实际应用中，ColumnSplit通常与其他布局组件组合使用，构建复杂的界面结构。在我们的示例中，ColumnSplit与Column组件组合使用：

1. 外层使用Column组件作为容器
2. 中间使用ColumnSplit组件进行垂直分割
3. 在ColumnSplit的每个分割区域内，再次使用Column组件垂直排列内容

这种组合使用方式展示了HarmonyOS布局系统的灵活性和强大性。

ColumnSplit的应用场景

ColumnSplit组件适用于多种应用场景，包括但不限于：

1. 个人资料页面：左侧显示头像和基本信息，右侧显示详细资料
2. 聊天界面：左侧显示联系人列表，右侧显示聊天内容
3. 邮件客户端：左侧显示邮件列表，右侧显示邮件内容
4. 文件管理器：左侧显示文件夹树，右侧显示文件列表
5. 设置界面：左侧显示设置类别，右侧显示具体设置项

ColumnSplit与RowSplit的对比

在HarmonyOS中，除了ColumnSplit，还有一个类似的组件RowSplit，用于在水平方向上分割界面。它们的主要区别是：

特性	ColumnSplit	RowSplit
分割方向	垂直方向（左右分割）	水平方向（上下分割）
子组件排列	从左到右	从上到下
宽度/高度控制	通过width属性控制每个区域的宽度	通过height属性控制每个区域的高度

在选择使用哪种分割布局时，应根据界面的设计需求和内容的排列方式来决定。

小结

在本教程中，我们详细讲解了HarmonyOS NEXT的垂直分割布局ColumnSplit的基本用法和特点。通过一个基础示例，我们了解了如何使用ColumnSplit组件将界面分为左右两个区域，并在每个区域内放置不同的内容。

ColumnSplit是一种灵活而强大的布局组件，可以与其他布局组件组合使用，构建复杂的界面结构。掌握ColumnSplit的用法，将有助于你设计出更加灵活和美观的应用界面。

在实际应用开发中，你可以根据自己的需求调整ColumnSplit的配置，如区域的宽度比例、背景色、内边距等，打造出符合你应用风格的界面布局。