《仿盒马》app开发技术分享-- 分类模块顶部导航列表弹窗（16）

## 技术栈

Appgallery connect

## 开发准备

上一节我们实现了分类页面的顶部导航栏列表，并且实现了首页金刚区跟首页导航栏的联动，这一节我们实现导航栏列表的弹窗功能，需要学习的知识点有自定义弹窗，同时我们的数据源需要跟分类页保持一一致。

## 功能分析

**1.弹窗**
自定义弹窗的实现，然后我们需要在弹窗创建的时候实现数据的同步，当我们在弹窗未出现的时候进行列表下标的切换，打开弹窗的时候需要把对应的index传递进去，选中状态要保持同步。同时在弹窗内选择分类，外部列表也要同步切换，并且每次切换都要在list允许居中的情况下实现选中的item居中。

## 代码实现

首先实现弹窗的创建数据的传入，和选择后的回调
@Link select:number;
  @Link dataSource: SplitLayoutModel[];
   onItemSelected: (item: number) => void= () => {
   };
  controller: CustomDialogController;

然后实现相关布局以及逻辑
build() {
    Column() {
      Text('全部分类')
        .fontSize(14)
        .margin(12)
        .width('100%')
        .textAlign(TextAlign.Start)
        .fontColor(Color.Black)

      Grid() {
        ForEach(this.dataSource, (item: SplitLayoutModel,index:number) => {
          GridItem() {
            Column() {
              // 图片部分
              Image(item.url)
                .width(40)
                .height(40)
                .borderRadius(20)
                .border({width:this.select === index?2:0,color:"#409EFF"})

              // 文本部分
              Text(item.txt)
                .textAlign(TextAlign.Center)
                .fontColor(Color.Black)
                .fontSize(10)
                .padding(2)
                .margin({top:5})
                .fontColor(this.select === index?"#FFFFFF":"#000000")
                .backgroundColor(this.select === index ? '#409EFF' : '#FFFFFF')
                .borderRadius(this.select === index ? 15:0)
            }
            .onClick(() => {
              if (this.select === index) {
                this.select = 0
              } else {
                this.select = index
              }
              this.onItemSelected?.(index);
              this.controller.close();
            })
          }
        })
      }
      .columnsTemplate('1fr 1fr 1fr 1fr 1fr')
      .layoutDirection(GridDirection.Row)
      .maxCount(5)
      .layoutWeight(1)
      Text("收起")
        .padding(10)
        .fontSize(16)
        .width('100%')
        .textAlign(TextAlign.Center)
        .fontColor(Color.Black)
        .onClick(()=>{
          this.controller.close()
        })
    }
    .margin({top:80})
    .width('90%')
    .backgroundColor(Color.White)
    .borderRadius(16)
    .padding(12)
  }
}
可以看到我们已经在item的点击事件中引用了回调，然后我们回到列表组件页面，实现回调
dialogController: CustomDialogController = new CustomDialogController({
    builder: CustomImageGridDialog({
      select:this.selectedIndex,
      dataSource: this.list,
      onItemSelected: (item: number) => {
        this.onItemClick!(item)
      }
    }),
    alignment: DialogAlignment.Top,
    customStyle:true
  });
在这里我们实现下标的修改监听
 onChange(){
    this.listScroller.scrollToIndex(this.selectedIndex, true, ScrollAlign.CENTER)
  }
  确保每一次下标的修改，list都能实现居中，到这里我们的弹窗和金刚区以及列表的联动都已经实现了