## 技术栈

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都能实现居中，到这里我们的弹窗和金刚区以及列表的联动都已经实现了