HarmonyOS Next 教育应用培训列表页开发实践（二）

3. 页面构建

build 方法构建了整个页面，根据培训信息列表的长度判断是否展示列表或缺省图。

build() {
  NavDestination() {
    Column() {
      if (this.dataList.length > 0) {
        List({
          space: 10
        }) {
          ForEach(this.dataList, (item: TrainInfo, index: number) => {
            ListItem() {
              Column() {
                Stack({
                  alignContent: Alignment.BottomStart
                }) {
                  Image(item.img)
                    .width('100%')
                    .height(100)
                    .objectFit(ImageFit.Cover)
                  Text(`${item.count}`)
                    .fontColor(Color.White)
                    .fontSize(14)
                    .linearGradient({
                      direction: GradientDirection.Right,
                      colors: [
                        ['#00c6ff', 0.0],
                        ['#0072ff', 1.0],
                      ]
                    })
                    .borderRadius({
                      topLeft: 5,
                      topRight: 5,
                      bottomRight: 5
                    })
                    .padding({
                      top: 2,
                      right: 8,
                      bottom: 2,
                      left: 8
                    })
                }
                .width(TrainConstants.FULL_WIDTH)
                .height(100)
                .backgroundColor(Color.Pink)

                Column() {
                  Text(item.title)
                    .maxLines(2)
                    .textOverflow({ overflow: TextOverflow.Ellipsis })
                    .textAlign(TextAlign.Start)
                    .width(TrainConstants.FULL_WIDTH)
                    .lineHeight(20)
                  Text(`起始时间：${item.startTime} 至 ${item.startTime}`)
                    .textAlign(TextAlign.Start)
                    .wordBreak(WordBreak.BREAK_ALL)
                    .width(TrainConstants.FULL_WIDTH)
                    .fontSize(14)
                    .margin({
                      top: 8,
                      bottom: 5
                    })
                  Text(`已有${item.applyNum}人报名`)
                    .textAlign(TextAlign.Start)
                    .fontColor('#aaaaaa')
                    .width(TrainConstants.FULL_WIDTH)
                    .fontSize(12)
                }
                .padding(10)
              }
            }
            .width('100%')
            .backgroundColor(Color.White)
            .onClick(() => {
              this.goToDetail(item.id)
            })
          }, (item: TrainInfo) => JSON.stringify(item))
        }
        .lanes(TrainConstants.LIST_LANES_NUM, 10)
        .alignListItem(ListItemAlign.End)
      } else {
        EmptyComponent({
          message: '暂无数据'
        })
      }
    }
    .width(TrainConstants.FULL_WIDTH)
    .height(TrainConstants.FULL_HEIGHT)
  }
  .hideTitleBar(true)
}

总结

通过上述代码，利用 HarmonyOS Next 的 ArkTS 开发框架，成功实现了一个教育应用的培训列表页面。该页面通过列表展示培训信息，并支持点击跳转详情页，同时处理了数据为空时的缺省图展示。开发者可以根据实际需求进一步扩展页面功能，如增加搜索、筛选等功能。