## 技术栈

Appgallery connect

## 开发准备

上一节我们针对订单兑换的业务逻辑进行了完善，成功的在兑换物品之后修改了用户信息的修改，新增了积分消费的记录。这一节我们实现订单创建之后进入的列表展示页框架，框架的搭建我们在其他页面也进行了多次的搭建，采用左右切换的页面展示形式即可，这里我们使用tabs组件进行展示

## 功能分析

要实现兑换商品的订单列表框架我们选择使用tabs，tabs的组件我们可以实现自定义的tabar，创建自定义的bar我们可以根据index来实时的切换数据的颜色和字体大小，可以的话我们还可以添加一些个性的样式，我门通过页面切换。这样我们一个页面中可以展示许多状态的订单。

## 代码实现

我们先实现一个整体框架，定义需要的参数，在这里我们定义不同的变量，分别定义当前选中的下标，字体的颜色，选中时字体的颜色，tabs的控制器

```css

 @State currentIndex: number = 0

  @State fontColor: string = '#182431';

  @State selectedFontColor: string = '#007DFF';

  @State selectedIndex: number = 0;

  private controller: TabsController = new TabsController();

```

自定义的tabar布局，我们采用经典的tabbar布局，上方一个说明文字，下方一个标志线，我们在opacity方法中根据selectedIndex字段来控制下划线的显示和隐藏。

```css

@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，在切换的时候把下标赋予给定义的变量，这样在后续我们创建的自定义组建中把下标传进去，控制状态、颜色的切换，传入当前tabs选中的下标，传递给tabcontent中加载的自定义组件，同时我们还需要定义一个变量，用来触发tabcontent组件中重新加载方法，我们只需要在自定义组件中使用@watch就可以实现切换后每次都刷新组件

```css

    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%')

```

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