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

2025-06-30
浙江
本文字数：1390 字
阅读完需：约 5 分钟

技术栈

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

发布于: 刚刚阅读数: 5

鸿蒙小林

关注

还未添加个人签名 2025-06-20 加入

还未添加个人简介

发布

暂无评论

创作场景

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

技术栈

开发准备

功能分析

代码实现

鸿蒙小林

评论