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

3. 搜索与城市选择功能

页面提供了搜索框和城市选择功能，用户可以输入关键词进行搜索，也可以点击城市图标进行城市选择。

Row() {
  Text('城市')
    .fontSize(CommonConstants.M_FONT_SIZE)
  Image($r('app.media.triangle'))
    .width(TabConstants.TAB_ICON_WIDTH / 2)
    .margin({
      left: CommonConstants.S_PUBLIC_SPACE / 2,
      right: CommonConstants.S_PUBLIC_SPACE
    })
    .onClick(() => {
      //选择下拉框
    })
  Image($r('app.media.split'))
    .width(1)
    .height(TabConstants.TAB_ICON_HEIGHT)
  Image($r('app.media.search'))
    .width(TabConstants.TAB_ICON_WIDTH)
    .height(TabConstants.TAB_ICON_HEIGHT)
    .fillColor('#767A7D')
    .margin({ left: CommonConstants.M_MAIN_MARGIN })
  TextInput({ placeholder: '问界M5 | 问界M7' })
    .backgroundColor(Color.White)
    .layoutWeight(1)
  Image($r('app.media.scan'))
    .width(TabConstants.TAB_ICON_WIDTH)
    .height(TabConstants.TAB_ICON_HEIGHT)
    .fillColor('#B2B2B2')
  Image($r('app.media.split'))
    .width(0.5)
    .height(TabConstants.TAB_ICON_HEIGHT)
    .margin({ left: CommonConstants.PUBLIC_SPACE, right: CommonConstants.L_PUBLIC_SPACE })
  Text('搜索')
    .fontColor('#0A59F7')
    .fontWeight(500)
}

4. 图标与品牌展示

页面展示了多个图标和品牌信息，通过ForEach组件实现动态展示。

Row({ space: CommonConstants.PUBLIC_SPACE * 2 }) {
  ForEach(this.iconArr, (item: VehicleModelActivitiesInfo) => {
    this.iconBuilder(item)
  })
}

Row({ space: 30 }) {
  ForEach(this.brandArr, (item: BrandInfo) => {
    this.brandBuilder(item)
  })
}

5. 车型列表展示与索引功能

页面展示了车型列表，并且提供了字母索引功能，用户可以通过点击字母快速定位到相应的品牌列表。

List({ scroller: this.listScroller }) {
  ForEach(this.listItemArr, (item: ListItemInfo) => {
    ListItemGroup({ header: this.itemHead(item.alphabet) }) {
      ForEach(item.brandInfo, (project: BrandInfo, index: number) => {
        ListItem() {
          Row({ space: CommonConstants.PUBLIC_SPACE }) {
            Image(project.image)
              .width(CommonConstants.PIC_WIDTH)
            Text(project.name)
              .fontSize(12)
          }
          .width(CommonConstants.COLUMN_WIDTH)
          .padding({ top: CommonConstants.PUBLIC_SPACE })
          .justifyContent(FlexAlign.Start)
        }
        .clip(true)
        .borderRadius({
          topLeft: index === 0 ? 12 : 0,
          topRight: index === 0 ? 12 : 0,
          bottomLeft: index === BrandInfo.length ? 12 : 0,
          bottomRight: index === BrandInfo.length ? 12 : 0,
        })
        .width(CommonConstants.COLUMN_WIDTH)
        .backgroundColor('#fff')
      })
    }
  })
}

Column() {
  Text('⭐')
    .fontSize(10)
  AlphabetIndexer({ arrayValue: alphabets, selected: $$this.selectedIndex })
    .onSelect((index) => {
      this.listScroller.scrollToIndex(index, true)
    })
}

在HarmonyOS Next应用开发中，通过合理运用组件和事件处理，结合动画效果和数据展示，我们可以构建出功能丰富、交互性强的汽车选车页面。