120.[HarmonyOS NEXT 实战案例：教育应用] 基础篇 - 垂直分割布局打造课程学习平台
120.[HarmonyOS NEXT 实战案例：教育应用] 基础篇 - 垂直分割布局打造课程学习平台
[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)在这个区域中：
- 顶部是课程标题"HarmonyOS应用开发"和章节信息"第3章: UI组件与布局"
- 中间是一个
Scroll滚动容器，包含一个Column，使用ForEach循环渲染课程列表 - 每个课程项包含一个状态图标（已完成或未完成）、课程标题和课程时长
- 底部是两个导航按钮：“上一节"和"下一节”
布局技巧
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组件构建一个课程学习平台。通过垂直分割布局，我们将界面分为上部视频区和下部内容区，实现了课程选择等交互功能。
腾讯云开发者
