《仿盒马》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%')

}

```

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