HarmonyOS Next应用开发实战——个人中心页面实现（part2）

3. 导航列表构建

navBuilder 方法用于构建导航列表，使用 ForEach 遍历导航数据并渲染 NavItem 组件，同时设置了列表的分割线和圆角样式。

@Builder
navBuilder() {
  Column({ space: CommonConstants.PUBLIC_SPACE }) {
    List() {
      ForEach(this.navSList, (item: navInfo, index: number) => {
        ListItem() {
          NavItem({ itemData: item })
        }
      }, (item: navInfo) => item.id)
    }
    .divider({
      strokeWidth: 1,
      color:'rgba(0, 0, 0, 0.05)',
      startMargin: CommonConstants.PUBLIC_SPACE * 3
    })
    .borderRadius(CommonConstants.BORDER_RADIUS)
    .clip(true)
  }
  .alignItems(HorizontalAlign.Start)
  .width(CommonConstants.COLUMN_WIDTH)
}

4. 页面主体内容构建

在 build 方法中，组合头部组件和各个列表项，构建出页面的主体内容，包括用户信息展示、主要内容列表和购物列表等。

build() {
  Flex({ direction: FlexDirection.Column }) {
    this.header()
    List({ space: CommonConstants.PUBLIC_SPACE }) {
      ListItem() {
        Column() {
          Row({ space: CommonConstants.MAIN_MARGIN * 2 }) {
            Image($r('app.media.avatar'))
              .width(HeaderConstants.PIC_HEIGHT)
              .height(HeaderConstants.PIC_WIDTH)
            Text(`车主`)
              .fontWeight(FontWeight.Bold)
              .fontSize(18)
          }
          .width(CommonConstants.COLUMN_WIDTH)
          .height(64)
          .padding(CommonConstants.MAIN_PADDING)

          MajorList({ majorList: this.majorList })
            .margin({
              bottom: CommonConstants.MAIN_MARGIN * 2
            })
        }
        .borderRadius(16)
        .backgroundColor('#FFF')
        .margin({
          top: CommonConstants.MAIN_MARGIN,
          bottom:CommonConstants.PUBLIC_SPACE
        })
      }

      ListItem() {
        Column({ space: CommonConstants.MAIN_MARGIN }) {
          Text('轿车购物')
            .fontSize(18)
            .fontWeight(CommonConstants.BOLD_TEXT_WEIGHT)
          Flex({ justifyContent: FlexAlign.SpaceBetween }) {
            ForEach(this.shopList, (item: shopInfo) => {
              ShopItem({ itemData: item })
            })
          }
          .borderRadius(16)
          .backgroundColor('#fff')
          .width(CommonConstants.COLUMN_WIDTH)
          .height(76)
          .padding({
            left: CommonConstants.MAIN_PADDING,
            right: CommonConstants.MAIN_PADDING,
            top: CommonConstants.L_MAIN_PADDING,
            bottom: CommonConstants.L_MAIN_PADDING,
          })
        }.alignItems(HorizontalAlign.Start)
      }

      ListItem() {
        this.navBuilder()
      }
      .padding({
        left: CommonConstants.M_PUBLIC_SPACE,
        right: CommonConstants.M_PUBLIC_SPACE,
      })
      .backgroundColor('#fff')
      .borderRadius(16)
    }
    .height(CommonConstants.COLUMN_HEIGHT)
    .scrollBar(BarState.Off)
    .padding({
      left: CommonConstants.L_MAIN_PADDING,
      right: CommonConstants.L_MAIN_PADDING
    })
  }
  .width(CommonConstants.COLUMN_WIDTH)
  .height(CommonConstants.COLUMN_HEIGHT)
  .backgroundColor('#E5EEEE')
}

通过以上核心功能的实现，开发者可以在HarmonyOS Next应用中创建一个功能完整、布局美观的个人中心页面。