HarmonyOS Next 教育应用之课程介绍组件开发(二)

68 阅读1分钟
  1. 课程时长与进度展示
    • 功能:展示课程的时长和进度信息,通过 RowColumn 布局进行排列。
    • 代码段
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)
  1. 课程详细介绍展示
    • 功能:展示课程的详细介绍文本,包括标题和具体内容,设置文本的样式和布局。
    • 代码段
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 平台上快速开发出高质量的教育应用。