[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
组件构建一个课程学习平台。通过垂直分割布局,我们将界面分为上部视频区和下部内容区,实现了课程选择等交互功能。
- 0回答
- 5粉丝
- 0关注
- [HarmonyOS NEXT 实战案例:教育应用] 高级篇 - 课程学习平台的高级布局与自适应设计
- [HarmonyOS NEXT 实战案例:分割布局] 基础篇 - 垂直分割布局ColumnSplit详解
- [HarmonyOS NEXT 实战案例:电商应用] 基础篇 - 垂直分割布局打造商品详情页
- [HarmonyOS NEXT 实战案例:电商应用] 基础篇 - 垂直分割布局打造商品详情页
- [HarmonyOS NEXT 实战案例:教育应用] 进阶篇 - 课程学习平台的交互功能与状态管理
- 94.[HarmonyOS NEXT 实战案例:分割布局] 基础篇 - 三栏垂直分割布局
- [HarmonyOS NEXT 实战案例:分割布局] 基础篇 - 可调整分割比例的垂直布局
- [HarmonyOS NEXT 实战案例:聊天应用] 基础篇 - 垂直分割布局构建聊天界面
- [HarmonyOS NEXT 实战案例:设置页面] 基础篇 - 垂直分割布局构建设置中心
- [HarmonyOS NEXT 实战案例:旅行应用] 基础篇 - 水平分割布局打造旅行规划应用
- [HarmonyOS NEXT 实战案例:分割布局] 基础篇 - 邮件应用布局设计
- [HarmonyOS NEXT 实战案例:分割布局] 基础篇 - 水平分割布局RowSplit详解
- [HarmonyOS NEXT 实战案例:分割布局] 基础篇 - 打造现代化设置中心界面
- [HarmonyOS NEXT 实战案例:健康应用] 基础篇 - 水平分割布局打造健康数据仪表盘
- [HarmonyOS NEXT 实战案例:文件管理器] 基础篇 - 垂直分割布局构建文件管理界面