技术栈

Appgallery connect

开发准备

上一节我们针对订单兑换的业务逻辑进行了完善，成功的在兑换物品之后修改了用户信息的修改，新增了积分消费的记录。这一节我们实现订单创建之后进入的列表展示页框架。

功能分析

兑换商品的订单列表框架我们选择使用tabs，实现一个页面可以进行切换。这样我们一个页面中可以展示许多状态的订单。

代码实现

我们先实现一个整体框架，定义需要的参数

 @State currentIndex: number = 0
  @State fontColor: string = '#182431';
  @State selectedFontColor: string = '#007DFF';
  @State selectedIndex: number = 0;
  private controller: TabsController = new TabsController();

自定义的tabar布局

@Builder tabBuilder(index: number, name: string) {
    Column() {
      Text(name)
        .fontColor(this.selectedIndex === index ? this.selectedFontColor : this.fontColor)
        .fontSize(16)
        .fontWeight(this.selectedIndex === index ? 500 : 400)
        .lineHeight(22)
        .margin({ top: 17, bottom: 7 })
      Divider()
        .strokeWidth(2)
        .width(40)
        .color('#007DFF')
        .opacity(this.selectedIndex === index ? 1 : 0)
    }.width('100%')
  }

tabs，在切换的时候把下标赋予给定义的变量

    Column() {
      CommonTopBar({ title: "兑换订单", alpha: 0, titleAlignment: TextAlign.Center ,backButton:true})
      Tabs({ barPosition: BarPosition.Start, index: this.currentIndex, controller: this.controller }) {
        TabContent() {
          Column(){
          }.width('100%').height('100%')
        }.tabBar(this.tabBuilder(0, '待发货'))

        TabContent() {
          Column(){
          }.width('100%').height('100%')
        }.tabBar(this.tabBuilder(1, '已取消'))

        TabContent() {
          Column(){

          }.width('100%').height('100%')
        }.tabBar(this.tabBuilder(2, '待收货'))

        TabContent() {
          Column(){
          }.width('100%').height('100%')
        }.tabBar(this.tabBuilder(3, '已完成'))
      }
      .vertical(false)
      .barMode(BarMode.Fixed)
      .barWidth('100%')
      .barHeight(56)
      .animationDuration(0)
      .onChange((index: number) => {
        this.currentIndex = index;
        this.selectedIndex = index;
      })
      .onAnimationStart((index: number, targetIndex: number, event: TabsAnimationEvent) => {
        if (index === targetIndex) {
          return;
        }
        this.selectedIndex = targetIndex;
      })
      .width('100%')
      .height('100%')
      .backgroundColor('#F1F3F5')
    }.width('100%')

到这里我们就完成了兑换订单列表的框架