## 技术栈

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(): Promise<void> {

    let databaseZone = cloudDatabase.zone('default');

    let condition = new cloudDatabase.DatabaseQuery(split_layout);

    let listData = await databaseZone.query(condition);

    let json = JSON.stringify(listData)

    let data2:SplitLayoutModel[]= JSON.parse(json)

    this.list=data2

    hilog.error(0x0000, 'testTag', `Failed 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})

到这里我们的就全部实现了