《仿盒马》app 开发技术分享 -- 金刚区（3）

技术栈

Appgallery connect

开发准备

上一篇文章中我们实现了项目端云一体化新人专享券活动模块，数据也成功的从云端获取，现在我们开始继续向下，实现金刚区模块

功能分析金刚区的实现我们之前已经完成了，但是数据的获取都是本地的静态数据，现在我们要获取云端的数据，实现数据的展示，同时要把滚动跟 bar 关联起来，让用户能看到当前滑动到什么位置

代码实现

首先我们进行表、数据、实体、db 类的创建

{"objectTypeName": "split_layout","fields": [{"fieldName": "split_id", "fieldType": "Integer", "notNull": true, "belongPrimaryKey": true},{"fieldName": "txt", "fieldType": "String"},{"fieldName": "url", "fieldType": "String"},{"fieldName": "router", "fieldType": "String"},{"fieldName": "is_login", "fieldType": "Boolean"},{"fieldName": "bt_state", "fieldType": "Integer"}],"indexes": [{"indexName": "splitId_Index", "indexList": [{"fieldName":"split_id","sortType":"ASC"}]}],"permissions": [{"role": "World", "rights": ["Read"]},{"role": "Authenticated", "rights": ["Read", "Upsert"]},{"role": "Creator", "rights": ["Read", "Upsert", "Delete"]},{"role": "Administrator", "rights": ["Read", "Upsert", "Delete"]}]}

数据{"cloudDBZoneName": "default","objectTypeName": "split_layout","objects": [{"split_id": 10,"txt": "果蔬肉禽","url": "在线图片链接","router": "string1","is_login": false,"bt_state": 0},{"split_id": 20,"txt": "冷冻水产","url": "在线图片链接","router": "string2","is_login": false,"bt_state": 0},{"split_id": 30,"txt": "乳品烘焙","url": "在线图片链接","router": "string2","is_login": false,"bt_state": 0},{"split_id": 40,"txt": "粮油面点","url": "在线图片链接","router": "string2","is_login": false,"bt_state": 0},{"split_id": 50,"txt": "酒水饮料","url": "在线图片链接","router": "string2","is_login": false,"bt_state": 0},{"split_id": 60,"txt": "休闲零食","url": "在线图片链接","router": "string2","is_login": false,"bt_state": 0},{"split_id": 70,"txt": "婴宠保健","url": "在线图片链接","router": "string2","is_login": false,"bt_state": 0},{"split_id": 80,"txt": "美妆个护","url": "在线图片链接","router": "string2","is_login": false,"bt_state": 0},{"split_id": 90,"txt": "纸品清洁","url": "在线图片链接","router": "string2","is_login": false,"bt_state": 0},{"split_id": 101,"txt": "百货家电","url": "在线图片链接","router": "string2","is_login": false,"bt_state": 0},{"split_id": 102,"txt": "家纺服饰","url": "在线图片链接","router": "string2","is_login": false,"bt_state": 0},{"split_id": 201,"txt": "跨境免税","url": "在线图片链接","router": "string2","is_login": false,"bt_state": 0}]}

db 类

import { cloudDatabase } from '@kit.CloudFoundationKit';

class split_layout extends cloudDatabase.DatabaseObject {public split_id: number;public txt: string;public url: string;public router: string;public is_login: boolean;public bt_state: number;

public naturalbase_ClassName(): string {return 'split_layout';}}

export { split_layout };

实体类/*

• Copyright (c) Huawei Technologies Co., Ltd. 2020-2023. All rights reserved.

• Generated by the CloudDB ObjectType compiler. DO NOT EDIT!*/

export class SplitLayoutModel {split_id: number;txt: string;url: string;router: string;is_login: boolean;bt_state: number;

constructor() {}
getFieldTypeMap():  Map<string, string> {    let fieldTypeMap = new Map<string, string>();    fieldTypeMap.set('split_id', 'Integer');    fieldTypeMap.set('txt', 'String');    fieldTypeMap.set('url', 'String');    fieldTypeMap.set('router', 'String');    fieldTypeMap.set('is_login', 'Boolean');    fieldTypeMap.set('bt_state', 'Integer');    return fieldTypeMap;}
getClassName(): string {    return 'split_layout';}
getPrimaryKeyList(): string[] {    let primaryKeyList: string[] = [];    primaryKeyList.push('split_id');    return primaryKeyList;}
getIndexList(): string[] {    let indexList: string[] = [];    return indexList;}
getEncryptedFieldList(): string[] {    let encryptedFieldList: string[] = [];    return encryptedFieldList;}
setSplit_id(split_id: number): void {    this.split_id = split_id;}
getSplit_id(): number  {    return this.split_id;}
setTxt(txt: string): void {    this.txt = txt;}
getTxt(): string  {    return this.txt;}
setUrl(url: string): void {    this.url = url;}
getUrl(): string  {    return this.url;}
setRouter(router: string): void {    this.router = router;}
getRouter(): string  {    return this.router;}
setIs_login(is_login: boolean): void {    this.is_login = is_login;}
getIs_login(): boolean  {    return this.is_login;}
setBt_state(bt_state: number): void {    this.bt_state = bt_state;}
getBt_state(): number  {    return this.bt_state;}
static parseFrom(inputObject: any): SplitLayoutModel {    let result = new SplitLayoutModel();    if (!inputObject) {        return result;    }    if (inputObject.split_id) {        result.split_id = inputObject.split_id;    }    if (inputObject.txt) {        result.txt = inputObject.txt;    }    if (inputObject.url) {        result.url = inputObject.url;    }    if (inputObject.router) {        result.router = inputObject.router;    }    if (inputObject.is_login) {        result.is_login = inputObject.is_login;    }    if (inputObject.bt_state) {        result.bt_state = inputObject.bt_state;    }    return result;}

}

然后把这些内容同步到云端

一切都完成之后，我们进行页面逻辑的修改

import { SplitLayoutModel } from "../entity/SplitLayoutModel"

@Preview@Componentexport struct SplitLayout {@Link listData: SplitLayoutModel[]private scroller: Scroller = new Scroller()build() {Column() {Grid(this.scroller){ForEach(this.listData, (item:SplitLayoutModel) => {GridItem(){Column() {Image(item.url).width(45).height(45).borderRadius(24).margin({ top: 5 })Text(item.txt).padding(2).fontSize(16).fontColor(Color.Black).textAlign(TextAlign.Center)}}})}.scrollBar(BarState.Off).rowsTemplate('1fr 1fr').rowsGap(15).columnsGap(10).height(150)

    ScrollBar({ scroller: this.scroller, direction: ScrollBarDirection.Horizontal,state: BarState.Auto }) {      Text()        .width(40)        .height(10)        .borderRadius(10)        .backgroundColor('#ff34a8e5')    }    .borderRadius(5)    .margin({top:10})    .width(100)    .backgroundColor('#ededed')



}.alignItems(HorizontalAlign.Center).height(190).width('95%').margin({top:20}).backgroundColor('#ffeedeb8').padding(16).borderRadius(20)

}}然后在主页调用组件先创建一个接收数据变量 @State splitList:SplitLayoutModel[]=[]

                SplitLayout({listData:this.splitList})

进行数据查询和赋值

  let databaseZone = cloudDatabase.zone('default'); let listData2 = await databaseZone.query(condition2);  let json2 = JSON.stringify(listData2)  let data2:SplitLayoutModel[]= JSON.parse(json2)  this.splitList=data2

到这里我们的金刚区就实现了