HarmonyOS鸿蒙Next中《仿盒马》app开发技术分享兑换列表展示

HarmonyOS鸿蒙Next中《仿盒马》app开发技术分享兑换列表展示

技术栈

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

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

@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)
}

然后我们创建对应的布局，引入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%')
}

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