技术栈
Appgallery connect
开发准备
上一节我们实现了购物车商品列表的大部分功能，实现了商品的添加、删除、增减、价格计算等业务，并且都跟云端进行通信。现在我们继续对项目进行改造，这一节我们要改造的内容是分类页，这个页面我们在之前的非端云一体化项目中实现过。现在要改造成端云一体的模式，并且我们的金刚区也要实现分类页的点击联动
功能分析
1.分类列表 分类列表我们要注意首页跳入切换到对应item的情况，点击时item对应的字体、背景色等状态的变化，以及list的切换
代码实现
首先我们要对金刚区的数据进行一个改造
{ "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": "child_id", "fieldType": "Integer"}, {"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"]} ] } 我们加上了child_id，有了这个参数能更好的去查询对应的数据
实体类
export class SplitLayoutModel { split_id: number; txt: string; url: string; router: string; is_login: boolean; child_id: number; 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('child_id', 'Integer');
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[] = [];
indexList.push('split_id');
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;
}
setChild_id(child_id: number): void {
this.child_id = child_id;
}
getChild_id(): number {
return this.child_id;
}
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.child_id) {
result.child_id = inputObject.child_id;
}
if (inputObject.bt_state) {
result.bt_state = inputObject.bt_state;
}
return result;
}}
然后我们在金刚区的点击事件里传递当前点击的下标 先定义 @State pos_check:number=0 我们在金刚区组件内定义一个带参数的回调 private onItemClick?: (pos:number) => void 调用 .onClick(()=>{ this.onItemClick!(index) })
在index页面拿到下标后控制tabs切换到分类，并且传入下标 SplitLayout({listData:this.splitList,onItemClick:(pos)=>{ this.controller.changeIndex(1); this.pos_check=pos }}) 分类页顶部导航列表自定义组件 import { CustomImageGridDialog } from "../dialog/CustomImageGridDialog"; import { cloudDatabase } from "@kit.CloudFoundationKit"; import { split_layout } from "../clouddb/split_layout"; import { SplitLayoutModel } from "../entity/SplitLayoutModel"; import { hilog } from "@kit.PerformanceAnalysisKit";
@Preview @Component export struct Classification { private listScroller: Scroller = new Scroller(); @Link selectedIndex: number @State list: SplitLayoutModel[] = [] @State flag:boolean=false private onItemClick?: (child_id:number) => void
async aboutToAppear(): PromiseFailed to query data, code: ${this.list});
this.flag=true
}
private dialogController: CustomDialogController = new CustomDialogController({ builder: CustomImageGridDialog({ select:this.selectedIndex, dataSource: this.list, onItemSelected: (item: number) => { this.listScroller.scrollToIndex(item, true, ScrollAlign.CENTER) } }), alignment: DialogAlignment.Top, customStyle:true });
build() { Row() { List({scroller:this.listScroller,space:10}){ ForEach(this.list, (item:SplitLayoutModel,index:number) => { ListItem(){ Column(){ Image(item.url) .width(40) .height(40) .borderRadius(20) .border({width:this.selectedIndex === index?2:0,color:"#409EFF"}) Text(item.txt) .textAlign(TextAlign.Center) .fontColor(Color.Black) .fontSize(10) .padding(2) .margin({top:5}) .fontColor(this.selectedIndex === index?"#FFFFFF":"#000000") .backgroundColor(this.selectedIndex === index ? '#409EFF' : '#FFFFFF') .borderRadius(this.selectedIndex === index ? 15:0) } .onClick(()=>{ if (this.selectedIndex === index) { this.selectedIndex = 0 } else { this.selectedIndex = index }
this.listScroller.scrollToIndex(index, true, ScrollAlign.CENTER)
})
}
})
}
.scrollBar(BarState.Off)
.height(65)
.width('90%')
.listDirection(Axis.Horizontal)
Blank()
Column(){
Text("全")
.fontSize(14)
.fontColor(Color.Black)
Text("部")
.fontColor(Color.Black)
.fontSize(14)
Image($r('app.media.all'))
.height(20)
.width(20)
}
.onClick(()=>{
this.dialogController.open()
})
.padding(5)
}
.justifyContent(FlexAlign.SpaceBetween)
.height(90)
.width('100%')
.margin({top:20})}
} index页面引用 Classification({selectedIndex:this.pos_check})
到这里我们的就全部实现了
