[HarmonyOS NEXT 实战案例：教育应用] 基础篇 - 垂直分割布局打造课程学习平台

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

效果演示

组件概述

在本案例中，我们将使用以下HarmonyOS NEXT组件：

组件名称	功能描述
ColumnSplit	垂直分割布局容器，将界面分为上下两部分
Column	垂直布局容器，用于垂直排列子组件
Row	水平布局容器，用于水平排列子组件
Scroll	滚动容器，用于在有限空间内展示更多内容
Image	图片组件，用于显示视频封面和状态图标
Text	文本组件，用于显示课程标题和描述
Button	按钮组件，用于上一节和下一节操作
ForEach	循环渲染组件，用于渲染课程列表

数据模型定义

在实现课程学习平台之前，我们首先定义了一个接口来描述课程数据结构：

interface Lesson {
    title: string
    duration: string
    completed: boolean
}

这个接口定义了课程的基本信息：

• title：课程标题
• duration：课程时长
• completed：是否已完成

在组件中，我们使用@State装饰器定义了两个状态变量：

@State currentLesson: number = 0
@State currentChapter: Lesson[] = [
    { title: '1. 基础组件介绍', duration: '8:24', completed: true },
    { title: '2. 布局容器使用', duration: '12:15', completed: true },
    { title: '3. 列表与网格', duration: '15:30', completed: false },
    { title: '4. 自定义组件', duration: '10:45', completed: false }
]

• currentLesson：当前选中的课程索引
• currentChapter：当前章节的课程列表

代码实现

外层容器

我们使用ColumnSplit组件作为最外层容器，将界面分为上下两部分：

ColumnSplit() {
    // 上部视频区
    Column() {
        // 视频内容
    }
    .height('40%')

    // 下部内容区
    Column() {
        // 课程信息和列表
    }
    .padding(20)
}
.height(600)

ColumnSplit设置了600的高度，确保整个界面有足够的显示空间。上部分的视频区占总高度的40%，下部分的内容区占剩余高度，设置了20的内边距。

上部视频区

上部视频区包含一个视频播放器（这里用图片代替）：

Column() {
    Image($r('app.media.big14'))
        .width('100%')
        .height('100%')
        .objectFit(ImageFit.Cover)
}
.height('40%')

在这个区域中，我们使用Image组件显示一个视频封面图片，设置宽度和高度为100%，使图片填满整个区域，并使用objectFit(ImageFit.Cover)属性确保图片按比例缩放并裁剪以填满容器。

下部内容区

下部内容区包含课程标题、章节信息、课程列表和导航按钮：

Column() {
    Text('HarmonyOS应用开发')
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
        .margin({ bottom: 10 })

    Text('第3章: UI组件与布局')
        .fontSize(16)
        .fontColor('#666666')
        .margin({ bottom: 20 })

    Scroll() {
        Column() {
            ForEach(this.currentChapter, (item:Lesson, index) => {
                Row() {
                    Image(item.completed ? $r('app.media.01') : $r('app.media.02'))
                        .width(20)
                        .height(20)
                        .margin({ right: 15 })

                    Column() {
                        Text(item.title)
                            .fontSize(16)
                        Text(item.duration)
                            .fontSize(12)
                            .fontColor('#999999')
                    }
                    .layoutWeight(1)
                }
                .padding(10)
                .backgroundColor(index === this.currentLesson ? '#e3f2fd' : 'transparent')
                .onClick(() => this.currentLesson = index)
            })
        }
    }
    .layoutWeight(1)

    Row() {
        Button('上一节')
            .width(120)
            .height(40)

        Button('下一节')
            .width(120)
            .height(40)
            .margin({ left: 20 })
    }
    .margin({ top: 20 })
    .justifyContent(FlexAlign.Center)
}
.padding(20)

在这个区域中：

1. 顶部是课程标题"HarmonyOS应用开发"和章节信息"第3章: UI组件与布局"
2. 中间是一个Scroll滚动容器，包含一个Column，使用ForEach循环渲染课程列表
3. 每个课程项包含一个状态图标（已完成或未完成）、课程标题和课程时长
4. 底部是两个导航按钮："上一节"和"下一节"

布局技巧

1. 使用ColumnSplit实现上下分栏

ColumnSplit组件是HarmonyOS NEXT中用于实现垂直分割布局的容器组件，它可以将界面分为上下两部分，每部分可以设置不同的高度比例。在本案例中，我们将上部视频区设置为总高度的40%，下部内容区设置为总高度的60%。

2. 使用Scroll处理溢出内容

在下部内容区的课程列表中，我们使用了Scroll组件来处理可能的内容溢出情况。这样，当课程列表超出可视区域时，用户可以通过滚动来查看所有课程。

3. 使用layoutWeight实现弹性布局

在课程列表项中，我们使用了layoutWeight(1)属性来实现弹性布局：

Column() {
    Text(item.title)
        .fontSize(16)
    Text(item.duration)
        .fontSize(12)
        .fontColor('#999999')
}
.layoutWeight(1)

这样，课程标题和时长的容器会占据除状态图标以外的所有可用空间，实现自适应布局。

4. 使用justifyContent实现水平居中

在底部导航按钮的容器中，我们使用了justifyContent(FlexAlign.Center)属性来实现按钮的水平居中对齐：

Row() {
    // 按钮内容
}
.margin({ top: 20 })
.justifyContent(FlexAlign.Center)

这样，"上一节"和"下一节"按钮会在水平方向上居中显示。

交互实现

1. 课程选择

在课程列表中，我们为每个课程项添加了点击事件处理函数：

.onClick(() => this.currentLesson = index)

当用户点击一个课程项时，会更新currentLesson状态，从而触发界面更新，显示对应课程的选中状态。

2. 状态管理

在本案例中，我们使用了@State装饰器来定义组件的状态变量：

@State currentLesson: number = 0
@State currentChapter: Lesson[] = [ /* ... */ ]

这些状态变量的变化会触发界面的自动更新，实现响应式的用户界面。

3. 条件样式

在课程列表项中，我们根据index是否等于currentLesson来决定背景色：

.backgroundColor(index === this.currentLesson ? '#e3f2fd' : 'transparent')

这样，当前选中的课程项会显示蓝色背景，其他课程项则显示透明背景。

同样，我们根据item.completed来决定显示哪个状态图标：

Image(item.completed ? $r('app.media.01') : $r('app.media.02'))

这样，已完成的课程会显示一个完成图标，未完成的课程则显示一个未完成图标。

样式设计

1. 颜色搭配

在本案例中，我们使用了以下颜色：

• 背景色：白色（默认）
• 选中项背景色：#e3f2fd（浅蓝色）
• 标题文本颜色：黑色（默认）
• 副标题文本颜色：#666666（深灰色）
• 时长文本颜色：#999999（浅灰色）

这种颜色搭配简洁明了，符合现代UI设计风格。

2. 字体大小和边距

在本案例中，我们使用了不同的字体大小来区分不同级别的文本：

• 主标题：20px
• 副标题：16px
• 课程标题：16px
• 课程时长：12px

同时，我们使用了适当的边距来确保各元素之间有足够的空间：

• 内容区内边距：20px
• 课程项内边距：10px
• 标题下边距：10px
• 副标题下边距：20px
• 导航按钮上边距：20px
• 导航按钮之间的间距：20px

这种字体大小和边距的设置使界面层次分明，易于阅读和操作。

3. 圆角和阴影

虽然在本案例中没有明确使用圆角和阴影，但在实际应用中，可以考虑为课程项和按钮添加圆角和阴影效果，增强界面的立体感和现代感。例如：

.borderRadius(8)
.shadow({ radius: 4, color: 'rgba(0, 0, 0, 0.1)', offsetX: 0, offsetY: 2 })

小结

在本教程中，我们学习了如何使用HarmonyOS NEXT的ColumnSplit组件构建一个课程学习平台。通过垂直分割布局，我们将界面分为上部视频区和下部内容区，实现了课程选择等交互功能。