HarmonyOS 鸿蒙Next ChipGroup组件如何管理多个Chip并实现布局优化？

使用@Builder构建动态Chip列表就很不错：

[@Styles](/user/Styles)  
function chipStyle() {  
 .height(32)  
 .borderRadius(16)  
 .backgroundColor('#F0F0F0')  
 .padding({ left: 12, right: 12 })  
}  

[@Component](/user/Component)  
struct ChipGroup {  
 // 数据源  
 [@State](/user/State) private chips: string[] = []  
 
 // 配置选项  
 [@Prop](/user/Prop) private maxChips: number = 5  // 最大Chip数量  
 [@Prop](/user/Prop) private multiSelect: boolean = true  // 是否多选  
 [@Prop](/user/Prop) private deletable: boolean = true  // 是否可删除  

 // 选中的Chip索引  
 [@State](/user/State) private selectedIndexes: number[] = []  

 // 添加Chip  
 public addChip(chip: string) {  
   if (this.chips.length < this.maxChips &&   
       !this.chips.includes(chip)) {  
     this.chips.push(chip)  
   }  
 }  

 // 删除Chip  
 private deleteChip(index: number) {  
   this.chips.splice(index, 1)  
   // 同步更新选中状态  
   this.selectedIndexes = this.selectedIndexes  
     .filter(selectedIndex => selectedIndex !== index)  
     .map(selectedIndex =>   
       selectedIndex > index ? selectedIndex - 1 : selectedIndex  
     )  
 }  

 // Chip点击处理  
 private handleChipClick(index: number) {  
   if (this.multiSelect) {  
     // 多选模式  
     const selectedIndex = this.selectedIndexes.indexOf(index)  
     if (selectedIndex !== -1) {  
       this.selectedIndexes.splice(selectedIndex, 1)  
     } else {  
       this.selectedIndexes.push(index)  
     }  
   } else {  
     // 单选模式  
     this.selectedIndexes = [index]  
   }  
 }  

 build() {  
   Scroll() {  
     Flex({   
       wrap: FlexWrap.Wrap,   
       justifyContent: FlexAlign.Start   
     }) {  
       ForEach(this.chips, (chip: string, index: number) => {  
         Stack() {  
           Chip({ label: chip })  
             .chipStyle()  
             .backgroundColor(  
               this.selectedIndexes.includes(index)   
                 ? '#0175F9'   
                 : '#F0F0F0'  
             )  
             .fontColor(  
               this.selectedIndexes.includes(index)   
                 ? '#FFFFFF'   
                 : '#000000'  
             )  
             .onClick(() => this.handleChipClick(index))  

           // 删除按钮  
           if (this.deletable) {  
             Image($r('app.media.ic_public_delete'))  
               .width(16)  
               .height(16)  
               .position({ top: -6, right: -6 })  
               .onClick(() => this.deleteChip(index))  
           }  
         }  
         .margin(4)  
       })  

       // 添加Chip的输入框  
       TextInput({ placeholder: '添加标签' })  
         .width(100)  
         .height(32)  
         .margin(4)  
         .borderRadius(16)  
         .backgroundColor('#F0F0F0')  
         .onSubmit((value: string) => {  
           this.addChip(value)  
         })  
     }  
   }  
   .scrollable(ScrollDirection.Horizontal)  
   .width('100%')  
 }  
}  

// 使用示例  
[@Entry](/user/Entry)  
[@Component](/user/Component)  
struct ChipGroupExample {  
 [@State](/user/State) message: string = 'Hello World'  

 build() {  
   Column() {  
     ChipGroup()  
   }  
   .width('100%')  
   .height('100%')  
 }  
}