文章目录什么是“最右侧Builder”右侧Builder完整实现结构固定三步实现右侧Builder代码详解1. 状态变量定义联动右侧Builder2. 右侧Builder核心实现LocalBuilder3. ChipGroup绑定右侧Builder4. 基础配置补充适配多选右侧Builder代码总结什么是“最右侧Builder”在ChipGroup配置中通过suffix属性绑定LocalBuilder装饰的自定义方法该方法渲染的组件会固定显示在标签组最右侧独立于标签列表实现自定义拓展功能你的代码中suffix: this.ChipGroupSuffix就是开启右侧Builder的核心配置右侧Builder完整实现结构固定三步实现右侧Builder定义Builder方法使用LocalBuilder装饰渲染右侧自定义组件编写交互逻辑在Builder内实现图标点击事件如全选/取消全选绑定到ChipGroup通过suffix属性关联Builder方法// 步骤1LocalBuilder 定义右侧自定义BuilderLocalBuilderChipGroupSuffix():void{// 右侧渲染IconGroupSuffix图标按钮IconGroupSuffix({items:[{icon:{src:图标路径,size:{width:36,height:36}},// 步骤2自定义点击逻辑action:(){业务逻辑}}]})}// 步骤3ChipGroup通过suffix绑定ChipGroup({...其他配置,suffix:this.ChipGroupSuffix// 绑定右侧Builder})代码详解1. 状态变量定义联动右侧BuilderStateselected_index:Arraynumber[0,1,2,3,4,5,6];// 选中标签索引Stateselected_state:booleantrue;// 全选状态标记selected_index存储所有选中标签的索引控制标签选中状态selected_state标记当前是否为全选状态供右侧Builder按钮切换使用2. 右侧Builder核心实现LocalBuilderLocalBuilderChipGroupSuffix():void{// 官方组件右侧自定义图标组IconGroupSuffix({items:[{// 自定义右侧图标搜索图标尺寸36pxicon:{src:$r(sys.media.ohos_ic_public_search_filled),size:{width:36,height:36}},// 图标点击事件全选 / 取消全选 切换action:(){if(this.selected_statefalse){this.selected_index[0,1,2,3,4,5,6];// 全选this.selected_statetrue;}else{this.selected_index[];// 取消全选this.selected_statefalse;}}}]})}LocalBuilder必须装饰标记为可复用的Builder方法IconGroupSuffix系统提供的右侧图标容器支持配置单个/多个图标icon自定义右侧图标路径尺寸action图标点击回调实现全选/取消全选核心逻辑3. ChipGroup绑定右侧BuilderChipGroup({...基础配置(items/itemStyle/间距/事件),suffix:this.ChipGroupSuffix// 关键绑定右侧自定义Builder})suffixChipGroup专属属性接收LocalBuilder方法渲染最右侧自定义组件4. 基础配置补充适配多选右侧BuilderitemStyle:{size:ChipSize.NORMAL},// 标签尺寸常规大小multiple:true,// 开启多选配合右侧全选按钮使用onChange:(activatedChipsIndex:Arraynumber){console.info(选中标签索引activatedChipsIndex);}multiple: true必须开启多选才能使用右侧全选功能onChange标签选中/取消时的回调打印选中索引代码import{ChipSize,ChipGroup,IconGroupSuffix}fromkit.ArkUI;EntryPreviewComponentstruct Index{Stateselected_index:Arraynumber[0,1,2,3,4,5,6];Stateselected_state:booleantrue;LocalBuilderChipGroupSuffix():void{// 开发者通过引用IconGroupSuffix实现组件最右侧的自定义组件效果。IconGroupSuffix({items:[{icon:{src:$r(sys.media.ohos_ic_public_search_filled),size:{width:36,height:36}},action:(){if(this.selected_statefalse){this.selected_index[0,1,2,3,4,5,6];this.selected_statetrue;}else{this.selected_index[];this.selected_statefalse;}}}]})}build(){Column(){ChipGroup({// items内每个对象设置的都是每个Chip的特定属性。items:[{// $r(app.media.icon)需要替换为开发者所需的图像资源文件。prefixIcon:{src:$r(app.media.startIcon)},label:{text:操作块1},suffixIcon:{src:$r(sys.media.ohos_ic_public_cut)},allowClose:false},{prefixIcon:{src:$r(sys.media.ohos_ic_public_copy)},label:{text:操作块2},allowClose:true},{prefixIcon:{src:$r(sys.media.ohos_ic_public_clock)},label:{text:操作块3},allowClose:true},{prefixIcon:{src:$r(sys.media.ohos_ic_public_cast_stream)},label:{text:操作块4},allowClose:true},{prefixIcon:{src:$r(sys.media.ohos_ic_public_cast_mirror)},label:{text:操作块5},allowClose:true},{prefixIcon:{src:$r(sys.media.ohos_ic_public_cast_stream)},label:{text:操作块6},allowClose:true},],// 设置Chip的style属性。itemStyle:{size:ChipSize.NORMAL,backgroundColor:$r(sys.color.ohos_id_color_button_normal),fontColor:$r(sys.color.ohos_id_color_text_primary),selectedBackgroundColor:$r(sys.color.ohos_id_color_emphasize),selectedFontColor:$r(sys.color.ohos_id_color_text_primary_contrary),},selectedIndexes:this.selected_index,multiple:true,chipGroupSpace:{itemSpace:8,endSpace:0},chipGroupPadding:{top:10,bottom:10},onChange:(activatedChipsIndex:Arraynumber){console.info(chips on clicked, activated index activatedChipsIndex);},// 自定义builder在组件最右侧显示自定义的内容。suffix:this.ChipGroupSuffix})}}}运行效果如图总结必须使用LocalBuilder装饰自定义方法否则无法绑定必须导入IconGroupSuffix这是右侧自定义图标的官方组件全选功能需配合multiple: true多选模式使用右侧图标尺寸建议36×36适配系统UI规范suffix是ChipGroup的专属属性仅支持绑定Builder方法本地图标app.media需替换为项目实际资源系统图标sys.media可直接使用如果这篇文章对你有帮助欢迎点赞、收藏、关注你的支持是持续创作的动力