## 技术栈

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

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