## 技术栈

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

  }

```

到这里我们就实现了兑换列表的展示