[HarmonyOS NEXT 实战案例：分割布局] 基础篇 - 三栏垂直分割布局

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

效果演示

引言

在现代应用界面设计中，多栏布局是一种常见且实用的布局方式，特别是在大屏设备上。三栏布局可以有效地组织和展示不同类型的内容，提高信息的可读性和可访问性。本教程将详细讲解如何使用HarmonyOS NEXT的ColumnSplit组件实现一个三栏垂直分割布局，并在中间栏中嵌套使用ColumnSplit进行上下分割。

基础知识

在开始实现三栏垂直分割布局之前，我们需要了解以下几个关键组件：

组件名称	功能描述
ColumnSplit	垂直分割布局容器，可以将界面在水平方向上分割成多个区域
Column	垂直布局容器，可以将子组件垂直排列
Text	文本组件，用于显示文字内容
ForEach	循环渲染组件，用于根据数据数组重复渲染UI元素

代码实现

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

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

            ColumnSplit() {
                // 左侧导航
                Column() {
                    Text('导航菜单')
                        .fontSize(18)
                        .margin({ top: 20, bottom: 15 })
                    ForEach(['首页', '消息', '设置', '个人中心'], (item: string) => {
                        Text(item)
                            .fontSize(16)
                            .margin({ top: 10, bottom: 10 })
                            .width('100%')
                            .textAlign(TextAlign.Center)
                    })
                }
                .width('20%')
                .backgroundColor('#f8f9fa')

                // 中间内容区
                ColumnSplit() {
                    // 上部内容
                    Column() {
                        Text('主要内容区域')
                            .fontSize(18)
                            .margin({ top: 20 })
                        Text('这里是应用的主要内容展示区')
                            .margin({ top: 10 })
                    }
                    .height('70%')

                    // 下部内容
                    Column() {
                        Text('底部信息栏')
                            .fontSize(16)
                        Text('版本号: 1.0.0')
                            .margin({ top: 5 })
                    }
                    .height('30%')
                    .backgroundColor('#e9ecef')
                }
                .width('60%')

                // 右侧边栏
                Column() {
                    Text('推荐内容')
                        .fontSize(18)
                        .margin({ top: 20 })
                    ForEach(['热门文章', '最新活动', '好友动态'], (item: string) => {
                        Text(item)
                            .fontSize(16)
                            .margin({ top: 15 })
                    })
                }
                .width('20%')
                .backgroundColor('#f8f9fa')
            }
            .height(400)
        }
        .padding(15)
    }
}

代码详解

组件结构

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

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

外层容器

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

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

标题文本

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

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

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

主要ColumnSplit容器

接下来，我们添加了一个ColumnSplit容器，用于实现三栏垂直分割布局：

ColumnSplit() {
    // 左侧导航
    // 中间内容区
    // 右侧边栏
}
.height(400)

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

左侧导航栏

在ColumnSplit容器内，我们首先添加了左侧导航栏的内容：

Column() {
    Text('导航菜单')
        .fontSize(18)
        .margin({ top: 20, bottom: 15 })
    ForEach(['首页', '消息', '设置', '个人中心'], (item: string) => {
        Text(item)
            .fontSize(16)
            .margin({ top: 10, bottom: 10 })
            .width('100%')
            .textAlign(TextAlign.Center)
    })
}
.width('20%')
.backgroundColor('#f8f9fa')

在这个Column中：

• 我们添加了一个标题文本"导航菜单"，设置了字体大小和上下边距
• 我们使用ForEach循环渲染了一个菜单项数组，每个菜单项都是一个文本组件
• 每个菜单项文本都设置了字体大小、上下边距、宽度和文本对齐方式
• 我们为Column设置了宽度为总宽度的20%，背景色为#f8f9fa（浅灰色）

中间内容区

接下来，我们添加了中间内容区，这里我们嵌套使用了另一个ColumnSplit容器，将中间区域分为上下两部分：

ColumnSplit() {
    // 上部内容
    Column() {
        Text('主要内容区域')
            .fontSize(18)
            .margin({ top: 20 })
        Text('这里是应用的主要内容展示区')
            .margin({ top: 10 })
    }
    .height('70%')

    // 下部内容
    Column() {
        Text('底部信息栏')
            .fontSize(16)
        Text('版本号: 1.0.0')
            .margin({ top: 5 })
    }
    .height('30%')
    .backgroundColor('#e9ecef')
}
.width('60%')

在这个嵌套的ColumnSplit中：

• 上部区域是一个Column，包含两个文本组件，高度占中间区域的70%
• 下部区域也是一个Column，包含两个文本组件，高度占中间区域的30%，背景色为#e9ecef（浅灰色）
• 整个中间内容区的宽度为总宽度的60%

右侧边栏

最后，我们添加了右侧边栏的内容：

Column() {
    Text('推荐内容')
        .fontSize(18)
        .margin({ top: 20 })
    ForEach(['热门文章', '最新活动', '好友动态'], (item: string) => {
        Text(item)
            .fontSize(16)
            .margin({ top: 15 })
    })
}
.width('20%')
.backgroundColor('#f8f9fa')

在这个Column中：

• 我们添加了一个标题文本"推荐内容"，设置了字体大小和上边距
• 我们使用ForEach循环渲染了一个推荐内容数组，每个推荐内容都是一个文本组件
• 每个推荐内容文本都设置了字体大小和上边距
• 我们为Column设置了宽度为总宽度的20%，背景色为#f8f9fa（浅灰色）

布局结构分析

在这个三栏垂直分割布局中，我们使用了嵌套的ColumnSplit组件来实现复杂的布局结构。整个布局可以分为以下几个部分：

1. 外层容器：使用Column组件作为最外层的容器，包含标题和主要内容区
2. 主要分割区：使用ColumnSplit组件将界面分为左、中、右三栏
   • 左侧导航栏：宽度为20%，包含导航菜单
   • 中间内容区：宽度为60%，包含主要内容
   • 右侧边栏：宽度为20%，包含推荐内容
3. 中间内容区：使用嵌套的ColumnSplit组件将中间区域分为上下两部分
   • 上部内容：高度为70%，包含主要内容
   • 下部内容：高度为30%，包含底部信息

这种嵌套的分割布局结构可以帮助我们实现更加复杂和灵活的界面设计。

宽度和高度设置

在这个示例中，我们使用了百分比来设置各个区域的宽度和高度，这样可以使布局更加灵活，能够适应不同大小的屏幕。具体的设置如下：

区域	宽度	高度
左侧导航栏	20%	100% (默认)
中间内容区	60%	100% (默认)
右侧边栏	20%	100% (默认)
中间上部内容	100% (默认)	70%
中间下部内容	100% (默认)	30%

通过这种方式，我们可以确保各个区域的大小比例保持一致，无论屏幕大小如何变化。

背景色设置

为了使不同区域有视觉上的区分，我们为左侧导航栏、中间下部内容和右侧边栏设置了背景色：

.backgroundColor('#f8f9fa')  // 左侧导航栏和右侧边栏
.backgroundColor('#e9ecef')  // 中间下部内容

这些背景色的设置可以帮助用户更清晰地识别不同的功能区域。

嵌套ColumnSplit的使用

在这个示例中，我们展示了如何嵌套使用ColumnSplit组件来实现更复杂的布局结构。在中间内容区，我们使用了一个嵌套的ColumnSplit将其分为上下两部分：

ColumnSplit() {
    // 上部内容
    // 下部内容
}

这种嵌套使用的方式可以帮助我们实现更加复杂和灵活的布局设计。例如，我们可以在左侧导航栏中再嵌套一个ColumnSplit，将其分为上下两部分；或者在右侧边栏中嵌套一个RowSplit，将其分为左右两部分。

小结

在本教程中，我们详细讲解了如何使用HarmonyOS NEXT的ColumnSplit组件实现一个三栏垂直分割布局，并在中间栏中嵌套使用ColumnSplit进行上下分割。通过这个示例，我们了解了：

• 如何使用ColumnSplit组件进行垂直分割布局
• 如何嵌套使用ColumnSplit组件实现复杂的布局结构
• 如何使用百分比设置各个区域的宽度和高度
• 如何使用背景色区分不同的功能区域

这种三栏布局在许多应用场景中都非常有用，例如：

• 内容管理系统的后台界面
• 社交媒体应用的主界面
• 新闻阅读应用的文章页面
• 电子邮件客户端的主界面

通过掌握这种布局技术，你可以为用户提供更加清晰和组织良好的界面体验，提升应用的用户体验。