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

2025-06-11 23:31:06
125次阅读
0个评论

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

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

效果演示

image.png

组件概述

在本案例中,我们将使用以下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组件构建一个课程学习平台。通过垂直分割布局,我们将界面分为上部视频区和下部内容区,实现了课程选择等交互功能。

收藏00

登录 后评论。没有帐号? 注册 一个。