技术栈
Appgallery connect
开发准备
上一节我们创建了积分相关的商品表，我们现在可以针对积分进行更多的操作了，我们首先添加了对应的数据到我们的云数据库中，这一节我们就要把我们存储的数据查询出来展示给用户，数据展示到列表上方便用户去查看，这里我们的列表因为要展示的是商品类的内容，所以我们选择的组件是可以实现瀑布流的组件
功能分析
首先我们需要在进入页面后进行数据查询，数据查出后我们定义对应的集合，然后我们新建一个瀑布流组件，把数据传递进去，进行数据的展示，在引用组件的地方我们传递数据，这样就可以实现我们想要的内容了
代码实现
我们首先在进入页面后查询数据，要想在第一时间进行数据的查询，首先我们要选择一个生命周期函数我们在aboutToAppear中实现，实现数据查询之后我们先创建一个变量，定义一个数组对象，把查出来的数据赋给定义的数组对象，方便我们后续使用
@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、说明等内容
@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
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
})
}
实现之后我们引入组件，拿到创建的数组对象，放置到自定义组件中
@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%')
}
到这里我们就实现了兑换列表的展示
