[HarmonyOS NEXT 实战案例：分割布局] 基础篇 - 水平分割布局RowSplit详解

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

效果演示

引言

在HarmonyOS NEXT应用开发中，合理的布局设计是创建优秀用户界面的关键。水平分割布局RowSplit是一种常用的布局方式，它可以将界面在水平方向上分割成多个区域，每个区域可以包含不同的内容。本教程将详细讲解RowSplit组件的基本用法和特点，帮助你掌握这一重要的布局技术。

RowSplit组件概述

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

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

基础水平分割布局示例

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

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

            RowSplit() {
                // 上部区域
                Row() {
                    Image($r('app.media.big3'))
                        .width(50)
                        .height(50)
                    Text('今日天气')
                        .fontSize(16)
                        .margin({ left: 10 })
                }
                .height('30%')
                .justifyContent(FlexAlign.Center)
                .backgroundColor('#e6f7ff')

                // 下部区域
                Column() {
                    Text('晴转多云')
                        .fontSize(18)
                    Text('温度: 22°C ~ 30°C')
                        .margin({ top: 5 })
                    Text('湿度: 65%')
                        .margin({ top: 5 })
                }
                .padding(10)
            }
            .height(200)
        }
        .padding(15)
    }
}

在这个示例中，我们创建了一个基础的水平分割布局，将界面分为上下两个区域：

1. 上部区域显示天气图标和标题，高度占30%
2. 下部区域显示天气详细信息，高度占70%（默认）

代码详解

组件结构

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

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

外层容器

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

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

标题文本

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

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

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

RowSplit容器

接下来，我们使用RowSplit组件创建水平分割布局：

RowSplit() {
    // 上部区域
    // 下部区域
}
.height(200)

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

上部区域

在RowSplit容器内，我们首先定义了上部区域：

Row() {
    Image($r('app.media.big3'))
        .width(50)
        .height(50)
    Text('今日天气')
        .fontSize(16)
        .margin({ left: 10 })
}
.height('30%')
.justifyContent(FlexAlign.Center)
.backgroundColor('#e6f7ff')

上部区域使用Row组件水平排列内容，包括：

1. 一个天气图标，宽高为50
2. 一个文本标签，字体大小为16，左侧边距为10

整个上部区域设置了高度为30%，内容居中对齐，背景色为浅蓝色。

下部区域

然后，我们定义了下部区域：

Column() {
    Text('晴转多云')
        .fontSize(18)
    Text('温度: 22°C ~ 30°C')
        .margin({ top: 5 })
    Text('湿度: 65%')
        .margin({ top: 5 })
}
.padding(10)

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

1. 一个天气状况文本，字体大小为18
2. 一个温度信息文本，顶部边距为5
3. 一个湿度信息文本，顶部边距为5

整个下部区域设置了内边距为10。由于我们没有为下部区域指定高度，它会自动占据RowSplit容器中剩余的高度，即70%。

RowSplit的关键属性

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

1. 高度设置

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

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

在我们的示例中，上部区域设置了高度为30%，下部区域没有设置高度，因此下部区域会自动占据剩余的70%高度。

2. 容器高度设置

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

RowSplit() {
    // 内容
}
.height(200)

3. 背景色设置

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

.backgroundColor('#e6f7ff')

4. 内容对齐设置

可以为RowSplit的子组件设置内容对齐方式。在我们的示例中，上部区域设置了内容居中对齐：

.justifyContent(FlexAlign.Center)

justifyContent属性用于设置主轴（对于Row组件来说是水平方向）上的对齐方式，可选值包括：

• FlexAlign.Start：起始对齐
• FlexAlign.Center：居中对齐
• FlexAlign.End：末端对齐
• FlexAlign.SpaceBetween：两端对齐，项目之间的间隔都相等
• FlexAlign.SpaceAround：每个项目两侧的间隔相等，项目之间的间隔比项目与边缘的间隔大一倍
• FlexAlign.SpaceEvenly：每个项目两侧的间隔相等，项目之间的间隔等于项目与边缘的间隔

5. 内边距设置

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

.padding(10)

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

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

1. 外层使用Column组件作为容器
2. 中间使用RowSplit组件进行水平分割
3. 在RowSplit的上部区域内，使用Row组件水平排列内容
4. 在RowSplit的下部区域内，使用Column组件垂直排列内容

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

RowSplit的应用场景

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

1. 天气应用：上部显示当前天气，下部显示未来几天的天气预报
2. 新闻应用：上部显示头条新闻，下部显示新闻列表
3. 音乐播放器：上部显示当前播放的歌曲信息，下部显示播放列表
4. 电子商务应用：上部显示商品信息，下部显示商品评论
5. 社交应用：上部显示用户信息，下部显示动态内容

RowSplit与ColumnSplit的对比

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

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

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

RowSplit与Flex布局的区别

RowSplit与Flex布局（如Row和Column）有一些区别：

1. 分割方式：RowSplit专注于将界面分割成不同的区域，每个区域可以有不同的高度比例；而Flex布局更注重项目的排列和对齐方式
2. 子组件关系：RowSplit的子组件之间是分割关系，各自占据独立的区域；而Flex布局的子组件之间是排列关系，共同占据整个容器
3. 适用场景：RowSplit适用于需要明确分割界面的场景；而Flex布局适用于需要灵活排列内容的场景

小结

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

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

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