HarmonyOS鸿蒙Next中《仿盒马》app开发技术分享03--金刚区（端云一体）
HarmonyOS鸿蒙Next中《仿盒马》app开发技术分享03–金刚区（端云一体）
开发准备
上一篇文章中我们实现了项目端云一体化新人专享券活动模块，数据也成功的从云端获取，现在我们开始继续向下，实现金刚区模块
功能分析
金刚区的实现我们之前已经完成了，但是数据的获取都是本地的静态数据，现在我们要获取云端的数据，实现数据的展示，同时要把滚动跟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": "https://img1.baidu.com/it/u=127983369,1101113571&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=800",
"router": "string1",
"is_login": false,
"bt_state": 0
},
{
"split_id": 20,
"txt": "冷冻水产",
"url": "https://t13.baidu.com/it/u=1474213786,2966213209&fm=224&app=112&f=JPEG?w=500&h=500",
"router": "string2",
"is_login": false,
"bt_state": 0
},
{
"split_id": 30,
"txt": "乳品烘焙",
"url": "https://img0.baidu.com/it/u=2918950817,1914595667&fm=253&fmt=auto&app=138&f=JPEG?w=612&h=500",
"router": "string2",
"is_login": false,
"bt_state": 0
},
{
"split_id": 40,
"txt": "粮油面点",
"url": "https://t15.baidu.com/it/u=1532396714,4221244168&fm=224&app=112&f=JPEG?w=500&h=500",
"router": "string2",
"is_login": false,
"bt_state": 0
},
{
"split_id": 50,
"txt": "酒水饮料",
"url": "https://img0.baidu.com/it/u=1049536432,2006818644&fm=253&fmt=auto&app=138&f=JPEG?w=753&h=500",
"router": "string2",
"is_login": false,
"bt_state": 0
},
{
"split_id": 60,
"txt": "休闲零食",
"url": "https://img1.baidu.com/it/u=3890724606,2931317363&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500",
"router": "string2",
"is_login": false,
"bt_state": 0
},
{
"split_id": 70,
"txt": "婴宠保健",
"url": "https://img1.baidu.com/it/u=654060031,3781056043&fm=253&fmt=auto&app=138&f=JPEG?w=410&h=410",
"router": "string2",
"is_login": false,
"bt_state": 0
},
{
"split_id": 80,
"txt": "美妆个护",
"url": "https://img0.baidu.com/it/u=2041962861,329640702&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750",
"router": "string2",
"is_login": false,
"bt_state": 0
},
{
"split_id": 90,
"txt": "纸品清洁",
"url": "https://img1.baidu.com/it/u=3238946601,2937592654&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
"router": "string2",
"is_login": false,
"bt_state": 0
},
{
"split_id": 101,
"txt": "百货家电",
"url": "https://img1.baidu.com/it/u=3519000159,1766971096&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500",
"router": "string2",
"is_login": false,
"bt_state": 0
},
{
"split_id": 102,
"txt": "家纺服饰",
"url": "https://img0.baidu.com/it/u=3315199535,4264346402&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
"router": "string2",
"is_login": false,
"bt_state": 0
},
{
"split_id": 201,
"txt": "跨境免税",
"url": "https://img2.baidu.com/it/u=2092549382,2878882335&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=664",
"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 };
实体类
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
然后我们执行代码查看金刚区的效果
到这里我们的金刚区就实现了
更多关于HarmonyOS鸿蒙Next中《仿盒马》app开发技术分享03--金刚区（端云一体）的实战教程也可以访问 https://www.itying.com/category-93-b0.html
2 回复
在HarmonyOS鸿蒙Next中实现《仿盒马》app金刚区(端云一体)功能，需使用以下核心技术：
- 使用分布式数据管理实现多设备数据同步
- 采用FA模型开发UI界面，推荐使用ets声明式开发范式
- 云端协同通过云开发能力实现，使用CloudDB进行数据存储
- 设备间通信使用分布式软总线技术
- 状态管理推荐使用AppStorage和LocalStorage
关键代码片段涉及CloudDB初始化、分布式数据订阅声明和UI组件绑定。具体实现需参考鸿蒙官方文档中端云一体化开发章节。
更多关于HarmonyOS鸿蒙Next中《仿盒马》app开发技术分享03--金刚区（端云一体）的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
从技术实现来看，这个金刚区模块的开发很好地展示了HarmonyOS Next的端云一体化能力。几个关键点值得注意：
-
数据模型设计合理，通过split_layout表结构定义了金刚区所需的字段（图片URL、文字、路由等），并设置了适当的权限控制。
-
使用CloudDB实现数据同步，通过
cloudDatabase.DatabaseObject基类扩展实现了云端数据映射，配合SplitLayoutModel实体类完成数据转换。 -
界面实现采用了Grid+Scroll的经典布局模式，通过Scroller控件实现了横向滚动与指示器联动，视觉呈现效果良好。
-
组件化设计规范，将金刚区封装为独立组件(SplitLayout)，通过
@Link实现数据双向绑定，提高了代码复用性。
建议后续可以考虑：
- 增加本地缓存机制提升加载速度
- 实现图片懒加载优化性能
- 添加点击跳转逻辑完善交互
整体实现方案符合HarmonyOS应用开发规范，展示了端云协同的典型应用场景。
