当前位置：首页 > news >正文

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

news 来源：原创 2025/6/25 19:44:24

技术栈

Appgallery connect

开发准备

上一节我们创建了积分相关的商品表，我们现在可以针对积分进行更多的操作了，我们首先添加了对应的数据到我们的云数据库中，这一节我们就要把我们存储的数据查询出来展示给用户

功能分析

首先我们需要在进入页面后进行数据查询，数据查出后我们定义对应的集合，然后我们新建一个瀑布流组件，把数据传递进去，进行数据的展示，在引用组件的地方我们传递数据

代码实现

我们首先在进入页面后查询数据

@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 = datahilog.error(0x0000, 'testTag', `Failed to query data, code: ${data}`);}

然后我们新建一个自定义组件,先定义好一条数据的样式

  @BuilderItem(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%')}