《仿盒马》app开发技术分享-- 兑换列表展示（68）

## 技术栈

Appgallery connect

## 开发准备
上一节我们创建了积分相关的商品表，我们现在可以针对积分进行更多的操作了，我们首先添加了对应的数据到我们的云数据库中，这一节我们就要把我们存储的数据查询出来展示给用户，数据展示到列表上方便用户去查看，这里我们的列表因为要展示的是商品类的内容，所以我们选择的组件是可以实现瀑布流的组件

## 功能分析
首先我们需要在进入页面后进行数据查询，数据查出后我们定义对应的集合，然后我们新建一个瀑布流组件，把数据传递进去，进行数据的展示，在引用组件的地方我们传递数据，这样就可以实现我们想要的内容了

## 代码实现
我们首先在进入页面后查询数据，要想在第一时间进行数据的查询，首先我们要选择一个生命周期函数我们在aboutToAppear中实现，实现数据查询之后我们先创建一个变量，定义一个数组对象，把查出来的数据赋给定义的数组对象，方便我们后续使用

```css
@State listProduct:PointsProduct[]=[]
  async aboutToAppear(): Promise<void> {
    let databaseZone = cloudDatabase.zone('default');
    let condition = new cloudDatabase.DatabaseQuery(points_product);
    let listData = await databaseZone.query(condition);
    let json = JSON.stringify(listData)
    let data: PointsProduct[] = JSON.parse(json)
    this.listProduct = data
    hilog.error(0x0000, 'testTag', `Failed to query data, code: ${data}`);
  }
```
然后我们新建一个自定义组件,先定义好一条数据的样式，在这里我们使用@builder来创建一个组件，在其中插入url、name、说明等内容

```css
  
  @Builder
  Item(item:PointsProduct){
    Column() {
      Image(item.url)
        .width('100%')
        .aspectRatio(1)
        .objectFit(ImageFit.Cover)
        .borderRadius({topLeft:10,topRight:10})

      Column() {
        Text(item.name)
          .fontSize(16)
          .fontColor('#333')
          .margin({ bottom: 4 })

        Text(item.text_message)
          .fontSize(12)
          .fontColor('#666')
          .margin({ bottom: 8 })

        Row() {
          Text(){
            Span("$")
              .fontColor(Color.Red)
              .fontSize(14)

            Span(String(item.points))
              .fontSize(16)
              .fontColor(Color.Red)
          }

          Blank()
          Column() {
            Image($r('app.media.cart'))
              .width(20)
              .height(20)
          }
          .justifyContent(FlexAlign.Center)
          .width(36)
          .height(36)
          .backgroundColor("#ff2bd2fa")
          .borderRadius(18)
        }
        .margin({top:10})
        .width('100%')
        .justifyContent(FlexAlign.SpaceBetween)

      }
      .alignItems(HorizontalAlign.Start)
      .padding(12)
    }
    .backgroundColor(Color.White)
    .borderRadius(12)
    .onClick(() => {

    })
  }
```
然后我们创建对应的布局，引入item

```css

  build() {
    WaterFlow() {
      ForEach(this.goodsList, (item:PointsProduct, index) => {
        FlowItem() {
          this.Item(item)
        }
        .margin({ bottom: 12 })
      })
    }
    .padding(10)
    .columnsTemplate('1fr 1fr')
    .columnsGap(12)
    .onAreaChange((oldVal, newVal) => {
      this.columns = newVal.width > 600 ? 2 : 1
    })
  }
```
实现之后我们引入组件，拿到创建的数组对象，放置到自定义组件中

```css
  @State listProduct:PointsProduct[]=[]

 build() {
    Column() {
      CommonTopBar({ title: "积分兑换", alpha: 0, titleAlignment: TextAlign.Center ,backButton:true})
      ProductItem({goodsList:this.listProduct})

    }
    .backgroundColor(Color.White)
    .height('100%')
    .width('100%')
  }
```
到这里我们就实现了兑换列表的展示