- 课程时长与进度展示
- 功能:展示课程的时长和进度信息,通过
Row和Column布局进行排列。 - 代码段:
- 功能:展示课程的时长和进度信息,通过
Column() {
Row() {
Row() {
Text($r('app.string.string_desc'))
.fontSize(14)
.margin({
right: 5
})
Text($r('app.string.string_desc'))
.fontSize(14)
}
.width(160)
Row() {
Text($r('app.string.string_desc'))
.fontSize(14)
.margin({
right: 5
})
Text($r('app.string.string_timer'))
.fontSize(14)
}
.layoutWeight(1)
}
.width(TrainConstants.FULL_WIDTH)
Row() {
Row() {
Text('时 长:')
.fontSize(14)
.margin({
right: 5
})
Text('18分钟')
.fontSize(14)
}
.width(160)
Row() {
Text('进度:')
.fontSize(14)
.margin({
right: 5
})
Text('0.00%')
.fontSize(14)
}
.layoutWeight(1)
}
.width(TrainConstants.FULL_WIDTH)
.justifyContent(FlexAlign.SpaceBetween)
.margin({
top: 5,
})
}
.width(TrainConstants.FULL_WIDTH)
.padding(10)
- 课程详细介绍展示
- 功能:展示课程的详细介绍文本,包括标题和具体内容,设置文本的样式和布局。
- 代码段:
Column() {
Row() {
Text()
.width(4)
.height(14)
.backgroundColor('#ffab01')
.margin({
right: 6
})
Text('课程介绍')
.fontSize(14)
}
.width(TrainConstants.FULL_WIDTH)
.margin({
bottom: 8
})
Row() {
Text('Reflect是 JavaScript 中一个内置的对象,它提供了一组应用于目标对象的方法,这些方法与语言的对象操作相关。Reflect 对象的方法与 Proxy 对象的方法相同,Reflect 将这些方法作为对象的方法提供,而不是在全局对象上作为函数提供。')
.textAlign(TextAlign.Start)
.fontSize(14)
.wordBreak(WordBreak.BREAK_ALL)
.fontColor($r('app.color.gray_color'))
.lineHeight(18)
}
.width(TrainConstants.FULL_WIDTH)
.justifyContent(FlexAlign.Start)
.alignItems(VerticalAlign.Top)
.layoutWeight(1)
}
.layoutWeight(1)
.backgroundColor(Color.White)
.padding(10)
.margin({
top: 10
})
总结
通过以上代码的实现,我们在 HarmonyOS Next 中成功构建了一个课程介绍组件。利用 HarmonyOS 提供的组件化开发和状态管理机制,我们可以方便地展示课程的基础信息、时长进度和详细介绍。该组件结构清晰,易于维护和扩展,有助于开发者在 HarmonyOS Next 平台上快速开发出高质量的教育应用。