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

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

文章概要

本文聚焦于HarmonyOS Next应用开发，详细介绍了如何构建一个汽车详情页。该页面包含汽车信息展示、标签选择、参数显示以及底部操作按钮等功能，通过组件化开发和状态管理，实现了用户与页面的交互。

核心功能介绍

1. 页面布局与导航

页面整体使用NavDestination进行导航，采用Column组件进行垂直布局，实现了多个区域的划分。通过Image和Text组件展示汽车的基本信息和操作按钮，同时提供返回和分享功能。

NavDestination() {
  Column(){
    Row() {
      Row() {
        Image($r('app.media.chevron_backward'))
          .width(CommonConstants.PIC_WIDTH)
          .height(CommonConstants.PIC_HEIGHT)
          .onClick(() => {
            this.pageInfos.pop()
          })
      }
      .width(40)
      .height(40)
      .justifyContent(FlexAlign.Center)
      .borderRadius(50)
      .backgroundColor('rgba(0, 0, 0, 0.05)')

      Row() {
        Image($r('app.media.share'))
          .width(CommonConstants.PIC_WIDTH)
          .height(CommonConstants.PIC_HEIGHT)
      }
      .width(40)
      .height(40)
      .justifyContent(FlexAlign.Center)
      .borderRadius(50)
      .backgroundColor('rgba(0, 0, 0, 0.05)')
    }
    // 其他布局代码...
  }
}

2. 汽车信息展示

使用List和ForEach组件展示汽车的详细图标信息，通过Row和Column组件对信息进行排版，同时使用Text组件展示汽车的名称、品牌、价格等信息。

List({ space: CommonConstants.M_PUBLIC_SPACE * 2 }) {
  ForEach(this.arr, (item: DetailIconData) => {
    ListItem() {
      Row({ space: 4 }) {
        Image(item.image)
          .width(CommonConstants.PIC_WIDTH / 2)
        Text(item.title)
          .fontSize(CommonConstants.S_FONT_SIZE)
      }
    }
  })
}

Column() {
  Row() {
    Column({ space: 4 }) {
      Text('问界M7')
        .fontSize(22)
        .fontWeight(FontWeight.Bold)
      Row() {
        Image($r('app.media.brand1'))
          .width(14)
        Text('AITO | 中大型SUV')
          .fontSize(10)
          .fontColor('rgba(0, 0, 0, 0.6)')
      }
    }
    // 其他信息展示代码...
  }
}
```### HarmonyOS Next应用开发实战——汽车详情页构建

#### 文章概要
本文聚焦于HarmonyOS Next应用开发，详细介绍了如何构建一个汽车详情页。该页面包含汽车信息展示、标签选择、参数显示以及底部操作按钮等功能，通过组件化开发和状态管理，实现了用户与页面的交互。

#### 核心功能介绍

##### 1. 页面布局与导航
页面整体使用`NavDestination`进行导航，采用`Column`组件进行垂直布局，实现了多个区域的划分。通过`Image`和`Text`组件展示汽车的基本信息和操作按钮，同时提供返回和分享功能。
```typescript
NavDestination() {
  Column(){
    Row() {
      Row() {
        Image($r('app.media.chevron_backward'))
          .width(CommonConstants.PIC_WIDTH)
          .height(CommonConstants.PIC_HEIGHT)
          .onClick(() => {
            this.pageInfos.pop()
          })
      }
      .width(40)
      .height(40)
      .justifyContent(FlexAlign.Center)
      .borderRadius(50)
      .backgroundColor('rgba(0, 0, 0, 0.05)')

      Row() {
        Image($r('app.media.share'))
          .width(CommonConstants.PIC_WIDTH)
          .height(CommonConstants.PIC_HEIGHT)
      }
      .width(40)
      .height(40)
      .justifyContent(FlexAlign.Center)
      .borderRadius(50)
      .backgroundColor('rgba(0, 0, 0, 0.05)')
    }
    // 其他布局代码...
  }
}

2. 汽车信息展示

使用List和ForEach组件展示汽车的详细图标信息，通过Row和Column组件对信息进行排版，同时使用Text组件展示汽车的名称、品牌、价格等信息。

List({ space: CommonConstants.M_PUBLIC_SPACE * 2 }) {
  ForEach(this.arr, (item: DetailIconData) => {
    ListItem() {
      Row({ space: 4 }) {
        Image(item.image)
          .width(CommonConstants.PIC_WIDTH / 2)
        Text(item.title)
          .fontSize(CommonConstants.S_FONT_SIZE)
      }
    }
  })
}

Column() {
  Row() {
    Column({ space: 4 }) {
      Text('问界M7')
        .fontSize(22)
        .fontWeight(FontWeight.Bold)
      Row() {
        Image($r('app.media.brand1'))
          .width(14)
        Text('AITO | 中大型SUV')
          .fontSize(10)
          .fontColor('rgba(0, 0, 0, 0.6)')
      }
    }
    // 其他信息展示代码...
  }
}