HarmonyOS Next应用开发实战——我的充电页面实现（part2）

3. 页面布局与交互

在 build 方法中，构建了页面的整体布局，包括返回按钮、轮播图、商品列表、订单信息和导航列表等，同时设置了返回按钮的点击事件。

build() {
  NavDestination(){
    Column({ space: CommonConstants.PUBLIC_SPACE * 2}) {
      Row() {
        Image($r('app.media.back')).width(ServiceConstants.PIC_WIDTH).height(ServiceConstants.PIC_HEIGHT)
          .onClick(() => {
            this.pageInfos.pop();
          })
        Text('我的充电').fontWeight(ServiceConstants.FONT_WEIGHT).margin({ left: '20vp' })
      }
      .width(CommonConstants.COLUMN_WIDTH)
      Swiper() {
        ForEach(this.swiperList, (item: Resource) => {
          Image(item).width(CommonConstants.COLUMN_WIDTH).height(CommonConstants.COLUMN_HEIGHT)
        })
      }
      .indicator( // 设置圆点导航点样式
        new DotIndicator()
          .color(Color.Grey)
          .selectedColor(Color.White))
      .width(CommonConstants.COLUMN_WIDTH)
      .height(200)
      .borderRadius(CommonConstants.BORDER_RADIUS)

      Column({ space: ServiceConstants.PUBLIC_SPACE * 2 }) {
        Flex({ justifyContent: FlexAlign.SpaceAround }) {
          ForEach(this.shopList, (item: shopInfo) => {
            ShopItem({ itemData: item })
          })
        }
        .width(CommonConstants.COLUMN_WIDTH)

        Flex({ justifyContent: FlexAlign.SpaceBetween }) {
          Row({ space: CommonConstants.PUBLIC_SPACE }) {
            Image($r('app.media.ic_product_normal'))
              .width(ServiceConstants.PIC_WIDTH)
              .height(ServiceConstants.PIC_HEIGHT)
            Text('充电订单')
              .fontWeight(400)
              .fontSize(14)
          }
          .RowStyle()

          Row({ space: CommonConstants.PUBLIC_SPACE }) {
            Image($r('app.media.ic_product_normal'))
              .width(ServiceConstants.PIC_WIDTH)
              .height(ServiceConstants.PIC_HEIGHT)
            Text('占位订单')
              .fontWeight(400)
              .fontSize(14)
          }
          .RowStyle()
        }
        .height('60vp')

        this.navBuilder()
      }
    }
    .padding({
      top: CommonConstants.MAIN_PADDING + this.topHeight,
      left: CommonConstants.MAIN_PADDING,
      right: CommonConstants.MAIN_PADDING,
      bottom: CommonConstants.MAIN_PADDING
    })
    .height(CommonConstants.COLUMN_HEIGHT)
    .backgroundColor('#EFEFEF')
  }
  .hideTitleBar(true)
}

4. 样式扩展

通过 @Extend 装饰器扩展了 Row 组件的样式，统一设置了行组件的背景颜色、宽度、高度、圆角和内边距。

@Extend(Row) function RowStyle() {
  .backgroundColor(Color.White)
  .width('49%')
  .height(CommonConstants.COLUMN_HEIGHT)
  .borderRadius(CommonConstants.BORDER_RADIUS)
  .padding({ left: CommonConstants.PUBLIC_SPACE })
}

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