[HarmonyOS NEXT 实战案例：分割布局] 进阶篇 - RowSplit与ColumnSplit的组合应用

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

效果演示

引言

在前面的教程中，我们分别学习了HarmonyOS NEXT中的水平分割布局RowSplit和垂直分割布局ColumnSplit的基本用法。在实际应用开发中，为了构建更复杂的界面结构，我们常常需要将这两种分割布局组件组合使用。本教程将深入探讨RowSplit与ColumnSplit的组合应用，帮助你掌握更高级的布局技巧。

分割布局的组合策略

在组合使用RowSplit和ColumnSplit时，我们通常采用以下几种策略：

1. 嵌套使用：在一个分割布局的子区域内嵌套另一个分割布局
2. 混合使用：在同一个界面中同时使用两种分割布局，但不嵌套
3. 动态切换：根据用户交互或数据变化，动态切换不同的分割布局

本教程将重点讲解嵌套使用的策略，这是最常见也是最强大的组合方式。

案例分析：设置中心界面

让我们通过一个设置中心界面的案例，来学习RowSplit与ColumnSplit的组合应用：

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

    build() {
   
        RowSplit() {
   
            // 左侧菜单 (40%)
            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')

            // 右侧内容区 (60%)
            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%')
        }
    }

    // 账户设置构建函数
    @Builder
    private buildAccountSettings() {
   
        // 账户设置内容
    }

    // 通知设置构建函数
    @Builder
    private buildNotificationSettings() {
   
        // 通知设置内容
    }
}

在这个案例中，我们使用了RowSplit和ColumnSplit的嵌套组合：

1. 最外层使用RowSplit将界面分为左右两部分：左侧菜单区和右侧内容区
2. 在右侧内容区内，使用ColumnSplit将其进一步分为上中下三部分：标题区、内容区和底部操作区

这种嵌套组合的方式，使得我们可以构建出复杂的多区域布局结构。

代码详解

外层RowSplit

首先，我们使用RowSplit组件将界面分为左右两部分：

RowSplit() {
   
    // 左侧菜单 (40%)
    Column() {
   
        // 菜单内容
    }.width('40%').backgroundColor('#f5f5f5')

    // 右侧内容区 (60%)
    ColumnSplit() {
   
        // 内容区内容
    }.width('60%')
}

在这个RowSplit中：

1. 左侧区域是一个Column组件，宽度为40%，背景色为浅灰色，用于显示菜单项
2. 右侧区域是一个ColumnSplit组件，宽度为60%，用于显示内容

左侧菜单区

左侧菜单区使用Column组件垂直排列内容：

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

在这个Column中：

1. 首先是一个标题文本"设置中心"，设置了字体大小和上下边距
2. 然后使用ForEach循环遍历一个字符串数组，为每个菜单项创建一个按钮
3. 每个按钮都设置了宽度、状态效果、边距和点击事件处理函数

内层ColumnSplit

右侧内容区使用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%')

在这个ColumnSplit中：

1. 顶部是标题区，显示当前选中的菜单项名称加上"设置"后缀
2. 中间是内容区，根据当前选中的菜单项动态显示不同的内容
3. 底部是操作区，包含一个"保存设置"按钮

动态内容切换

在内容区，我们根据当前选中的菜单项动态切换显示不同的内容：

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

这里使用条件语句根据selectedMenu的值来决定调用哪个@Builder方法。当用户点击左侧菜单中的不同按钮时，selectedMenu的值会发生变化，从而触发内容区的更新。

分割布局的嵌套层次

在组合使用RowSplit和ColumnSplit时，我们需要注意嵌套的层次结构。在我们的案例中，嵌套层次如下：

1. 第一层：RowSplit（水平分割）
   • 左侧区域：Column
   • 右侧区域：ColumnSplit（垂直分割）
     • 顶部区域：Text
     • 中间区域：条件内容
     • 底部区域：Button

这种层次结构使得我们可以精确控制界面的每个部分，实现复杂的布局需求。

分割比例的设计原则

在设计分割布局的比例时，我们需要遵循一些原则：

1. 黄金分割：使用接近黄金分割比（约为0.618:0.382）的比例，可以创造出视觉上和谐的布局
2. 功能重要性：根据各区域功能的重要性分配空间，重要的功能区域应该分配更多的空间
3. 内容密度：根据各区域内容的密度分配空间，内容密度高的区域应该分配更多的空间
4. 用户关注点：根据用户的关注点分配空间，用户更关注的区域应该分配更多的空间

在我们的案例中，左侧菜单区和右侧内容区的比例为40%:60%，这是一个接近黄金分割的比例，同时也考虑了右侧内容区需要显示更多信息的需求。

响应式布局的实现

在实际应用中，我们常常需要根据屏幕大小调整分割布局的比例，以适应不同的设备。HarmonyOS提供了媒体查询功能，可以帮助我们实现响应式布局。

以下是一个简化的响应式布局示例：

@Component
export struct ResponsiveSettingsCenter {
   
    @State selectedMenu: string = '账户'
    @State isWideScreen: boolean = true

    aboutToAppear() {
   
        // 根据屏幕宽度判断是否为宽屏
        this.isWideScreen = AppStorage.Get<number>('screenWidth') >= 600
    }

    build() {
   
        if (this.isWideScreen) {
   
            // 宽屏布局：使用RowSplit
            RowSplit() {
   
                // 左侧菜单
                // 右侧内容
            }
        } else {
   
            // 窄屏布局：使用ColumnSplit
            ColumnSplit() {
   
                // 顶部菜单
                // 底部内容
            }
        }
    }
}

在这个示例中，我们根据屏幕宽度动态选择使用RowSplit（宽屏）或ColumnSplit（窄屏）布局，从而适应不同的设备。

分割布局与其他布局组件的组合

除了RowSplit和ColumnSplit的组合，我们还可以将分割布局与其他布局组件组合使用，如Flex、Grid、List等，构建更加复杂和灵活的界面结构。

以下是一些常见的组合方式：

1. 分割布局 + Flex布局：在分割布局的某个区域内使用Flex布局（Row或Column），实现更灵活的内容排列
2. 分割布局 + Grid布局：在分割布局的某个区域内使用Grid布局，实现网格式的内容展示
3. 分割布局 + List布局：在分割布局的某个区域内使用List布局，实现列表式的内容展示

在我们的案例中，我们在RowSplit的左侧区域使用了Column组件，在右侧ColumnSplit的内容区使用了条件渲染的@Builder方法，这些都是分割布局与其他布局组件的组合应用。

小结

在本教程中，我们深入探讨了HarmonyOS NEXT中RowSplit与ColumnSplit的组合应用。通过一个设置中心界面的案例，我们学习了如何使用嵌套的分割布局构建复杂的界面结构，以及如何实现动态内容切换。

组合使用RowSplit和ColumnSplit可以帮助我们构建出更加复杂和灵活的界面布局，满足各种应用场景的需求。在实际应用开发中，你可以根据自己的需求选择适当的组合方式，设计出符合你应用风格的界面布局。