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