《仿盒马》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 @Component export 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

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