HarmonyOS Next 教育应用之个人中心页面开发（二）

3. 列表构建

ListBuilder 构建器函数使用 List 和 ForEach 组件将数据渲染成列表，设置滚动条和分隔线样式。

@Builder
ListBuilder() {
  List({ scroller: this.scroller }) {
    ForEach(listModel, (item: MineListModel) => {
      ListItem() {
        this.MineCourseListItem(item)
      }
    }, (item: MineListModel) => item.key)
  }
  .scrollBar(BarState.Off)
  .divider({ strokeWidth: 1, color: '#f5f5f5' })
  .width(StyleConstants.FULL_WIDTH)
  .backgroundColor(Color.White)
}

4. 个人信息区域构建

personalBuilder 构建器函数构建个人信息区域，包含登录按钮和个人头像，点击登录按钮可跳转到登录页面。

@Builder
personalBuilder() {
  Row() {
    Column() {
      Text('登录')
        .fontSize(ResManager.getHuge_font_size())
        .fontColor('333333')
        .fontWeight(FontWeight.Medium)
        .onClick(() => {
          this.pathStack.pushPathByName('LoginView', null);
        })
      if (this.isLogin) {
        Text() {
          Span('我的课程').fontColor('333333')
          Span('1').fontColor(Color.Red)
        }
      } else {
        Text('立即登录,解锁更多使用功能')
      }
    }.alignItems(HorizontalAlign.Start)

    Image($r('app.media.ic_person'))
      .objectFit(ImageFit.Cover)
      .width($r('app.float.icon_person_size'))
      .height($r('app.float.icon_person_size'))
  }
  .width(CommonConstants.FULL_WIDTH_PERCENT)
  .backgroundColor(Color.White)
  .height(vp2px(40))
  .alignItems(VerticalAlign.Center)
  .justifyContent(FlexAlign.SpaceBetween)
  .padding({ left: ResManager.getVp_twelve(), right: ResManager.getVp_twelve() })
}

5. 页面构建

build 方法构建整个页面，包含个人信息区域和列表区域。

build() {
  NavDestination() {
    Column() {
      Scroll() {
        Column() {
          this.personalBuilder()
          Divider().strokeWidth(5).color('#f7f7f7')
          this.ListBuilder()
        }
      }
      .scrollBar(BarState.Off)
    }
    .height(CommonConstants.FULL_HEIGHT_PERCENT)
    .backgroundColor('#f7f7f7')
    .alignItems(HorizontalAlign.Start)
  }.hideTitleBar(true)
}

总结

通过上述代码，利用 HarmonyOS Next 的 ArkTS 开发框架，成功实现了一个教育应用的个人中心页面。该页面具备个人信息展示、列表项展示和页面跳转等功能，体现了 HarmonyOS Next 开发的高效性和灵活性。开发者可以根据实际需求进一步扩展页面功能，如添加更多列表项、完善登录逻辑等。