鸿蒙应用开发实战【21】— 筛选弹出面板三维筛选实现-北京尧图网络

鸿蒙应用开发实战【21】— 筛选弹出面板三维筛选实现前言欢迎加入开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.net号码助手首页有一个「全部/已选N ⌄」筛选按钮点击后弹出一个气泡面板展示分类、卡号、状态三维筛选条件。用户可以在每个维度中选择一个值三个条件之间是 AND 关系共同决定列表的展示内容。本篇涵盖Flex FlexWrap 自动换行实现 chip 布局、筛选按钮状态联动已选条件计数、筛选面板 Builder 完整实现、三维数据过滤逻辑AND 条件组合、筛选重置 clear、与 bindPopup 集成。图1筛选弹出面板 Popup 结构 FlexWrap 换行原理三维 AND 过滤逻辑一、筛选面板整体设计1.1 三维筛选简介维度数据来源选项示例状态变量分类CATEGORIES 常量数组全部/社交/购物/金融/工具filterCatIdx: number卡号数据库 CardDao.listAll()全部/主卡/副卡/工作卡filterCardIdx: number状态STATUS_FILTERS 常量数组全部/使用中/待换绑/待注销/已停用filterStatIdx: number三个维度的索引值0均代表「全部」非0代表选择了具体条件。1.2 筛选按钮// 首页筛选触发按钮Row({space:3}){Text(this.activeFilterCount()0?已选${this.activeFilterCount()}:全部).fontSize(12).fontWeight(AppFonts.WEIGHT_SEMIBOLD).fontColor(this.activeFilterCount()0?#3E68E0:AppColors.TEXT_2)Text(⌄).fontSize(10).fontColor(this.activeFilterCount()0?#3E68E0:AppColors.TEXT_3)}.padding({left:11,right:11,top:6,bottom:6}).backgroundColor(this.activeFilterCount()0?AppColors.PRIMARY_BG:AppColors.CARD_B).border({width:1,color:this.activeFilterCount()0?#4D4F7CFF:AppColors.LINE,radius:14}).bindPopup($$this.showFilter,{builder:()this.FilterPopoverBuilder(),placement:Placement.Bottom,popupColor:#FFFFFF,onStateChange:(e){if(!e.isVisible){this.showFilterfalse}}}).onClick((){this.showFilter!this.showFilter})按钮的样式会根据是否有活跃筛选条件而变化——有选中项时显示蓝色高亮边框和「已选 N」计数。二、筛选面板 Builder 实现2.1 面板整体结构BuilderprivateFilterPopoverBuilder(){Column(){// 分类维度this.FilterSection(分类,CATEGORIES,this.filterCatIdx,(idx:number){this.filterCatIdxidx})// 卡号维度this.FilterSection(卡号,this.getCardLabels(),this.filterCardIdx,(idx:number){this.filterCardIdxidx})// 状态维度this.FilterSection(状态,STATUS_FILTERS,this.filterStatIdx,(idx:number){this.filterStatIdxidx})// 底部重置按钮Button(重置).onClick(()this.resetFilters())}.width(220).padding(14)}2.2 筛选维度子组件BuilderprivateFilterSection(title:string,items:string[],selectedIdx:number,onSelect:(idx:number)void){Column(){Text(title).fontSize(11).fontColor(AppColors.TEXT_3).fontWeight(AppFonts.WEIGHT_SEMIBOLD).alignSelf(ItemAlign.Start).margin({bottom:8})// Flex FlexWrap 实现 chip 自动换行Flex({wrap:FlexWrap.Wrap}){ForEach(items,(item:string,idx:number){Text(item).fontSize(12).fontWeight(AppFonts.WEIGHT_MEDIUM).fontColor(selectedIdxidx?#FFFFFF:AppColors.TEXT_2).padding({left:12,right:12,top:6,bottom:6}).backgroundColor(selectedIdxidx?AppColors.PRIMARY:AppColors.CARD_B).border({width:1,color:selectedIdxidx?#00000000:AppColors.LINE,radius:14}).margin({right:6,bottom:6}).onClick(()onSelect(idx))},(item:string)item)}}.margin({bottom:14}).alignItems(HorizontalAlign.Start)}2.3 Chip 选中态每个 chip 是一个Text组件通过selectedIdx idx来判断是否选中状态backgroundColorfontColorborder选中AppColors.PRIMARY#4F7CFF#FFFFFF透明未选中AppColors.CARD_B#FFFFFFAppColors.TEXT_2AppColors.LINE三、Flex FlexWrap 自动换行3.1 FlexWrap 的必要性筛选选项数量不固定如果使用Row容器当选项超出一行时会被裁剪。使用Flex({ wrap: FlexWrap.Wrap })可以实现自动换行。// ❌ Row单行不换行超出裁剪Row({space:6}){Text(全部)Text(社交)Text(购物)Text(金融)Text(工具)// 如果宽度不够这个会被裁剪}// ✅ Flex FlexWrap.Wrap多行自动换行Flex({wrap:FlexWrap.Wrap}){Text(全部).margin({right:6,bottom:6})Text(社交).margin({right:6,bottom:6})Text(购物).margin({right:6,bottom:6})Text(金融).margin({right:6,bottom:6})Text(工具).margin({right:6,bottom:6})// 自动换到下一行}3.2 spacing 的关键参数Flex({wrap:FlexWrap.Wrap}){// 每个 chip 通过 margin 控制间距Text(chip).margin({right:6,bottom:6})// right: 水平方向 chip 之间的间距// bottom: 垂直方向行与行之间的间距}3.3 Flex 与 Row 的对比对比项RowFlex FlexWrap.Wrap布局方向水平单行水平多行自动换行超出处理裁剪/溢出自动折行适用场景固定数量的按钮组数量不固定的标签列表号码助手使用底部操作按钮筛选面板 chip 列表 ✅四、筛选状态管理4.1 活跃条件计数/** * 统计当前激活的筛选条件数 * 每个维度非 0 代表有选中条件 */privateactiveFilterCount():number{letn0if(this.filterCatIdx!0)n// 分类有选中if(this.filterCardIdx!0)n// 卡号有选中if(this.filterStatIdx!0)n// 状态有选中returnn}4.2 筛选重置privateresetFilters():void{this.filterCatIdx0this.filterCardIdx0this.filterStatIdx0this.showFilterfalse// 重置后关闭面板}4.3 三维过滤逻辑/** * AND 条件组合过滤 * 每个维度 idx0 表示「全部」不参与过滤 */privategetFilteredRows():AppRow[]{returnthis.rows.filter((r:AppRow){constcatOkthis.filterCatIdx0||r.binding.categoryCATEGORIES[this.filterCatIdx]constcardOkthis.filterCardIdx0||r.cardLabelthis.getCardLabels()[this.filterCardIdx]conststatOkthis.filterStatIdx0||r.binding.statusSTATUS_FILTERS[this.filterStatIdx]returncatOkcardOkstatOk// 三个条件同时满足})}过滤逻辑图解维度idx0idx≠0分类不过滤全部匹配 CATEGORIES[idx]卡号不过滤全部匹配 cards[idx-1].label状态不过滤全部匹配 STATUS_FILTERS[idx]三个条件的 AND 关系简化为任何一个维度是非 0 时才参与过滤否则跳过。五、本篇小结知识点核心要点FlexWrap.Wrapchip 标签自动换行搭配 margin right/bottom 控制间距Chip 选中态选中蓝色填充未选中白色描边activeFilterCount统计已选条件数驱动按钮样式变化三维 AND 过滤catIdx/cardIdx/statIdx 三个维度独立过滤resetFilters全部重置为 0 并关闭面板参考资料鸿蒙应用开发实战【17】— bindPopup 气泡弹出与筛选面板鸿蒙应用开发实战【05】— 首页开发与状态管理Flex 容器 APIFlexWrap 枚举Builder 装饰器bindPopup API如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.netFlex 容器文档https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-flexFlexWrap 换行说明https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-appendix-enums

鸿蒙应用开发实战【21】— 筛选弹出面板三维筛选实现

相关推荐

从宝可梦魔方看中国制造转型：地域限定产品的技术逻辑

从家庭到工厂：单相、两相与三相电的接法全解析与应用场景

ESP32-C3 VScode开发环境一键配置与疑难排错指南（ESP-IDF插件全解析）

更多资讯

OpenClaw+优云智算+Coding Plan：实现从灵感到发布的全流程自动化

WSL环境配置OpenCode Web界面：从安装到serve实战与踩坑指南

ZFBF-MMSE联合检测：MIMO下行链路干扰抑制与性能优化

VS Code多模型智能路由：GLM-5.3/DeepSeek/Kimi自动调度实战

基于物理的动态模式分解piDMD：原理与Matlab实现

NLP实战：疫情新闻舆情分析中的LDA主题建模与情感分析

今日更新

SpacetimeDB C++ 模块库实战：用 C++20 在数据库内构建 WebAssembly 模块

别踩雷！不是所有 AI 写作工具都靠谱，2026 高校认可工具精选

SSM+MySQL幼儿园管理系统源码解析：从部署到优化

本周精选

超人会飞不算本事：系统稳定依赖清晰规则与边界设计

超人VS蜘蛛侠：拆解超级IP的影响力与传播方法论

基于CNN的调制信号识别：MATLAB实现时频图分类实战

本月热门

基于YOLO的焊缝缺陷检测：从数据标注到工业部署全流程实践

分布式服务的决策记录

创业产品的首版范围

读完文章，想聊聊您的网站？