HarmonyOS Next 教育应用之在线帮助页面开发（二）

3. 列表项构建器

MineListItem 方法用于构建列表项，显示帮助信息的名称和时间。

@Builder
MineListItem(model: OnlineListModel) {
  Flex({
    direction: FlexDirection.Row,
    justifyContent: FlexAlign.Start,
  }) {
    Column() {
      Text(model.name)
        .fontSize(16)
        .fontColor('#333333')
        .margin({ left: ResManager.getVp_eight(), top: ResManager.getVp_eight() })
      Text(model.timer)
        .fontSize(12)
        .fontColor('#aaaaaa')
        .margin({ left: ResManager.getVp_eight(), bottom: ResManager.getVp_eight(), top: ResManager.getVp_eight() })
    }.justifyContent(FlexAlign.SpaceBetween).alignItems(HorizontalAlign.Start)
    .padding({ top: ResManager.getVp_eight(), bottom: ResManager.getVp_eight() })
  }
}

4. 列表构建器

ListBuilder 方法使用 ForEach 遍历 onlineList 数据，将每个数据项构建为列表项，并设置列表的滚动条、分隔线等样式。

@Builder
ListBuilder() {
  List({ scroller: this.scroller }) {
    ForEach(onlineList, (item: OnlineListModel) => {
      ListItem() {
        this.MineListItem(item)
      }
    }, (item: OnlineListModel) => item.key)
  }
  .scrollBar(BarState.Off)
  .divider({ strokeWidth: 1, color: '#f5f5f5' })
  .width(StyleConstants.FULL_WIDTH)
  .layoutWeight(1)
}

5. 页面构建与返回按钮控制

build 方法构建整个页面，包括顶部的标题栏和下面的列表。在 onReady 回调中，根据路由参数判断是否显示返回按钮。

build() {
  NavDestination() {
    Column() {
      Row() {
        if (this.isBackShow) {
          Image($r('app.media.back'))
            .width(16)
            .height(16)
            .onClick(() => {
              this.pathStack.pop()
            })
        }
        Text('在线帮助')
          .layoutWeight(1)
          .textAlign(TextAlign.Center)
          .margin({
            right: this.isBackShow ? 16 : 0
          })
          .height(100)
      }
      .width(StyleConstants.FULL_WIDTH).padding({
        left: 10,
        right: 10
      }).backgroundColor(Color.White)

      Column() {
        this.ListBuilder()
      }.layoutWeight(1)
    }
    .width(StyleConstants.FULL_WIDTH)
    .height(StyleConstants.FULL_HEIGHT)
    .backgroundColor(Color.White)
  }
  .hideTitleBar(true)
  .onReady((ctx: NavDestinationContext) => {
    //判断是否展示返回按钮
    //{"name":"OnlineIndex","param":{"title":"在线帮助","params":""}}
    if (ctx?.pathInfo?.param) {
      let param = ctx?.pathInfo?.param;
      if (param == '在线帮助') {
        this.isBackShow = true;
      }
    }
  })
}

总结

通过上述代码，利用 HarmonyOS Next 的 ArkTS 开发框架，成功实现了一个教育应用的在线帮助索引页面。该页面能够展示帮助信息列表，并根据路由参数控制返回按钮的显示，体现了 HarmonyOS Next 开发的高效性和灵活性。开发者可以根据实际需求进一步扩展页面功能，如增加搜索功能、详情页面跳转等。