HarmonyOS Next应用开发实战——汽车详情页构建（part2）

3. 标签选择与参数显示

通过ForEach组件遍历标签数组，实现标签的动态展示，并通过@State变量控制标签的选中状态。同时，展示汽车的参数信息，包括图标和名称。

Row({ space: CommonConstants.L_PUBLIC_SPACE }) {
  ForEach(this.tabArr, (item: string, index: number) => {
    Column() {
      Text(item)
        .fontColor(this.indicatorIndex === index ? CommonConstants.SELE_COLOR : CommonConstants.DEF_COLOR)
        .fontWeight(this.indicatorIndex === index ? 500 : 400)
        .fontSize(this.indicatorIndex === index ? CommonConstants.L_FONT_SIZE : CommonConstants.M_FONT_SIZE)
        .id(index.toString())
        .onClick(() => {
          this.indicatorIndex = index;
        })
    }
  }, (item: string) => item)
}

Row() {
  ForEach(this.paramArr, (item: ParamInfo) => {
    Column({ space: CommonConstants.PUBLIC_SPACE / 2 }) {
      Image(item.image)
        .width(20)
        .height(14)
        .objectFit(ImageFit.Contain)
      Text(item.name)
        .fontSize(10)
    }
  })
}

4. 底部操作按钮

通过Row和Column组件构建底部操作按钮，提供车型对比、关注、分期购车和获取底价等功能。

@Builder footer(addCar?: Function, buy?: Function){
  Row(){
    Row({space:CommonConstants.PUBLIC_SPACE*2}){
      Column({space:4}){
        Image($r('app.media.ic_car_param1'))
          .width(20)
          .fillColor(Color.Black)
        Text('车型对比')
          .fontSize(10)
      }
      Column({space:2}){
        Image($r('app.media.ic_concern'))
          .width(15)
          .fillColor(Color.Black)
        Text('关注')
          .fontSize(10)
      }
    }
    Blank()
    Row({space:8}){
      Button('分期购车')
        .height(CommonConstants.L_PUBLIC_SPACE*2)
        .fontSize(12)
        .fontColor('#0A59F7')
        .backgroundColor('rgb(241, 243, 245)')
        .padding({
          top:CommonConstants.L_MAIN_PADDING/2,
          bottom:CommonConstants.L_MAIN_PADDING/2,
          left:CommonConstants.MAIN_PADDING*2,
          right:CommonConstants.MAIN_PADDING*2,
        })
      Button('获取底价')
        .height(CommonConstants.L_PUBLIC_SPACE*2)
        .fontSize(12)
        .padding({
          top:CommonConstants.L_MAIN_PADDING/2,
          bottom:CommonConstants.L_MAIN_PADDING/2,
          left:CommonConstants.MAIN_PADDING*2,
          right:CommonConstants.MAIN_PADDING*2,
        })
    }
  }
  // 其他底部按钮代码...
}

在HarmonyOS Next应用开发中，通过合理使用组件和状态管理，我们可以构建出功能丰富、交互性强的汽车详情页。