1# CheckboxGroup 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @houguobiao--> 5<!--Designer: @houguobiao--> 6<!--Tester: @lxl007--> 7<!--Adviser: @HelloCrease--> 8 9多选框群组，用于控制多选框全选或者不全选状态。 10 11> **说明：** 12> 13> 该组件从API version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 14 15## 子组件 16 17无 18 19## 接口 20 21CheckboxGroup(options?: CheckboxGroupOptions) 22 23创建多选框群组，用于控制群组内Checkbox的全选或取消全选状态，具有相同group值的Checkbox和CheckboxGroup属于同一群组。 24 25在结合带缓存组件使用时(如List)，未被创建的Checkbox选中状态需要应用手动控制。详细示例请参考[示例3](#示例3设置全选)。 26 27**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 28 29**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 30 31**系统能力：** SystemCapability.ArkUI.ArkUI.Full 32 33**参数：** 34 35| 参数名 | 类型 | 必填 | 说明 | 36| ------- | ----------------------------------------------------- | ---- | -------------------- | 37| options | [CheckboxGroupOptions](#checkboxgroupoptions对象说明) | 否 | 配置多选框群组参数。 | 38 39## CheckboxGroupOptions对象说明 40 41多选框群组的信息。 42 43**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 44 45**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 46 47**系统能力：** SystemCapability.ArkUI.ArkUI.Full 48 49| 名称 | 类型 | 只读 | 可选 | 说明 | 50| -------- | -------- | -------- | -------- | -------- | 51| group | string | 否 | 是 | 群组名称。<br/>**说明：** <br/>具有相同群组名称的多个CheckboxGroup，仅第一个CheckboxGroup生效。 | 52 53## 属性 54 55除支持[通用属性](ts-component-general-attributes.md)外，还支持以下属性： 56 57### selectAll 58 59selectAll(value: boolean) 60 61设置是否全选。若同组的[Checkbox](ts-basic-components-checkbox.md)显式设置了select属性，则Checkbox的优先级高。 62 63在与带有缓存功能的组件（如[List](ts-container-list.md)）配合使用时，未创建的Checkbox选中状态需由开发者控制。 64 65从API version 10开始，该属性支持[$$](../../../ui/state-management/arkts-two-way-sync.md)双向绑定变量。 66从API version 18开始，该属性支持[!!](../../../ui/state-management/arkts-new-binding.md#系统组件参数双向绑定)双向绑定变量。 67 68**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 69 70**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 71 72**系统能力：** SystemCapability.ArkUI.ArkUI.Full 73 74**参数：** 75 76| 参数名 | 类型 | 必填 | 说明 | 77| ------ | ------- | ---- | ------------------------------------------------------------ | 78| value | boolean | 是 | 是否全选。<br/>默认值：false<br/>值为true时，多选框群组将全部被选中；值为false时，多选框群组将全部取消选中。 | 79 80### selectAll<sup>18+</sup> 81 82selectAll(isAllSelected: Optional\<boolean>) 83 84设置是否全选。若同组的[Checkbox](ts-basic-components-checkbox.md)显式设置了select属性，则Checkbox的优先级高。与[selectAll](#selectall)相比，isAllSelected参数新增了对undefined类型的支持。 85 86在与带有缓存功能的组件（如[List](ts-container-list.md)）配合使用时，未创建的Checkbox选中状态需由开发者控制。 87 88该属性支持[$$](../../../ui/state-management/arkts-two-way-sync.md)、[!!](../../../ui/state-management/arkts-new-binding.md#系统组件参数双向绑定)双向绑定变量。 89 90**卡片能力：** 从API version 18开始，该接口支持在ArkTS卡片中使用。 91 92**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 93 94**系统能力：** SystemCapability.ArkUI.ArkUI.Full 95 96**参数：** 97 98| 参数名 | 类型 | 必填 | 说明 | 99| ------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 100| isAllSelected | [Optional](ts-universal-attributes-custom-property.md#optionalt12)\<boolean> | 是 | 是否全选。<br/>当isAllSelected的值为undefined时取默认值false。<br/>值为true时，多选框群组将全部被选中；值为false时，多选框群组将全部取消选中。 | 101 102### selectedColor 103 104selectedColor(value: ResourceColor) 105 106设置被选中或部分选中状态的颜色。 107 108**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 109 110**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 111 112**系统能力：** SystemCapability.ArkUI.ArkUI.Full 113 114**参数：** 115 116| 参数名 | 类型 | 必填 | 说明 | 117| ------ | ------------------------------------------ | ---- | ------------------------------------------------------------ | 118| value | [ResourceColor](ts-types.md#resourcecolor) | 是 | 被选中或部分选中状态的颜色。<br/>默认值：$r('sys.color.ohos_id_color_text_primary_activated')<br/>异常值按照默认值处理。 | 119 120### selectedColor<sup>18+</sup> 121 122selectedColor(resColor: Optional\<ResourceColor>) 123 124设置被选中或部分选中状态的颜色。与[selectedColor](#selectedcolor)相比，resColor参数新增了对undefined类型的支持。 125 126**卡片能力：** 从API version 18开始，该接口支持在ArkTS卡片中使用。 127 128**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 129 130**系统能力：** SystemCapability.ArkUI.ArkUI.Full 131 132**参数：** 133 134| 参数名 | 类型 | 必填 | 说明 | 135| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 136| resColor | [Optional](ts-universal-attributes-custom-property.md#optionalt12)\<[ResourceColor](ts-types.md#resourcecolor)> | 是 | 被选中或部分选中状态的颜色。<br/>当resColor的值为undefined时，默认值：$r('sys.color.ohos_id_color_text_primary_activated')<br/>异常值按照默认值处理。 | 137 138### unselectedColor<sup>10+</sup> 139 140unselectedColor(value: ResourceColor) 141 142设置非选中状态边框颜色。 143 144**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 145 146**系统能力：** SystemCapability.ArkUI.ArkUI.Full 147 148**参数：** 149 150| 参数名 | 类型 | 必填 | 说明 | 151| ------ | ------------------------------------------ | ---- | ------------------------------------------------------------ | 152| value | [ResourceColor](ts-types.md#resourcecolor) | 是 | 非选中状态边框颜色。<br/>默认值：$r('sys.color.ohos_id_color_switch_outline_off')。 | 153 154### unselectedColor<sup>18+</sup> 155 156unselectedColor(resColor: Optional\<ResourceColor>) 157 158设置非选中状态边框颜色。与[unselectedColor](#unselectedcolor10)<sup>10+</sup>相比，resColor参数新增了对undefined类型的支持。 159 160**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 161 162**系统能力：** SystemCapability.ArkUI.ArkUI.Full 163 164**参数：** 165 166| 参数名 | 类型 | 必填 | 说明 | 167| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 168| resColor | [Optional](ts-universal-attributes-custom-property.md#optionalt12)\<[ResourceColor](ts-types.md#resourcecolor)> | 是 | 非选中状态边框颜色。<br/>当resColor的值为undefined时，默认值：$r('sys.color.ohos_id_color_switch_outline_off')。 | 169 170### mark<sup>10+</sup> 171 172mark(value: MarkStyle) 173 174设置多选框内部图标样式。 175 176**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 177 178**系统能力：** SystemCapability.ArkUI.ArkUI.Full 179 180**参数：** 181 182| 参数名 | 类型 | 必填 | 说明 | 183| ------ | -------------------------------------------- | ---- | -------------------- | 184| value | [MarkStyle](ts-types.md#markstyle10对象说明) | 是 | 多选框内部图标样式。 | 185 186### mark<sup>18+</sup> 187 188mark(style: Optional\<MarkStyle>) 189 190设置多选框内部图标样式。与[mark](#mark10)<sup>10+</sup>相比，style参数新增了对undefined类型的支持。 191 192**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 193 194**系统能力：** SystemCapability.ArkUI.ArkUI.Full 195 196**参数：** 197 198| 参数名 | 类型 | 必填 | 说明 | 199| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 200| style | [Optional](ts-universal-attributes-custom-property.md#optionalt12)\<[MarkStyle](ts-types.md#markstyle10对象说明)> | 是 | 多选框内部图标样式。<br/>当style的值为undefined时，维持上次取值。 | 201 202### checkboxShape<sup>12+</sup> 203 204checkboxShape(value: CheckBoxShape) 205 206设置CheckboxGroup组件形状，包括圆形和圆角方形。 207 208**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 209 210**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 211 212**系统能力：** SystemCapability.ArkUI.ArkUI.Full 213 214**参数：** 215 216| 参数名 | 类型 | 必填 | 说明 | 217| ------ | ----------------------------------------------------- | ---- | ------------------------------------------------------------ | 218| value | [CheckBoxShape](ts-appendix-enums.md#checkboxshape11) | 是 | 设置CheckboxGroup组件形状，包括圆形和圆角方形。<br/>默认值：CheckBoxShape.CIRCLE <br />**说明：**<br/>CheckboxGroup组件将按照设置的形状显示。<br/>CheckboxGroup内所有未单独设置shape类型的Checkbox，其形状将与CheckboxGroup保持一致。<br/>CheckboxGroup内已单独设置shape类型的Checkbox，其形状将优先于CheckboxGroup的设置，按照自身设置显示。 | 219 220### checkboxShape<sup>18+</sup> 221 222checkboxShape(shape: Optional\<CheckBoxShape>) 223 224设置CheckboxGroup组件形状，包括圆形和圆角方形。与[checkboxShape](#checkboxshape12)<sup>12+</sup>相比，shape参数新增了对undefined类型的支持。 225 226**卡片能力：** 从API version 18开始，该接口支持在ArkTS卡片中使用。 227 228**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 229 230**系统能力：** SystemCapability.ArkUI.ArkUI.Full 231 232**参数：** 233 234| 参数名 | 类型 | 必填 | 说明 | 235| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 236| shape | [Optional](ts-universal-attributes-custom-property.md#optionalt12)\<[CheckBoxShape](ts-appendix-enums.md#checkboxshape11)> | 是 | 设置CheckboxGroup组件形状，包括圆形和圆角方形。<br/>当shape的值为undefined时，默认值为CheckBoxShape.CIRCLE。<br />**说明：**<br/>CheckboxGroup组件将按照设置的形状显示。<br/>CheckboxGroup内所有未单独设置shape类型的Checkbox，其形状将与CheckboxGroup保持一致。<br/>CheckboxGroup内已单独设置shape类型的Checkbox，其形状将优先于CheckboxGroup的设置，按照自身设置显示。 | 237 238## 事件 239 240除支持[通用事件](ts-component-general-events.md)外，还支持以下事件： 241 242### onChange 243 244onChange(callback: OnCheckboxGroupChangeCallback) 245 246CheckboxGroup的选中状态或群组内的Checkbox的选中状态发生变化时，触发回调。 247 248**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 249 250**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 251 252**系统能力：** SystemCapability.ArkUI.ArkUI.Full 253 254**参数：** 255 256| 参数名 | 类型 | 必填 | 说明 | 257| -------- | ------------------------------------------------------------ | ---- | ------------------ | 258| callback | [OnCheckboxGroupChangeCallback](#oncheckboxgroupchangecallback18) | 是 | 多选框群组的信息。 | 259 260### onChange<sup>18+</sup> 261 262onChange(callback: Optional\<OnCheckboxGroupChangeCallback>) 263 264CheckboxGroup的选中状态或群组内的Checkbox的选中状态发生变化时，触发回调。与[onChange](#onchange)相比，callback参数新增了对undefined类型的支持。 265 266**卡片能力：** 从API version 18开始，该接口支持在ArkTS卡片中使用。 267 268**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 269 270**系统能力：** SystemCapability.ArkUI.ArkUI.Full 271 272**参数：** 273 274| 参数名 | 类型 | 必填 | 说明 | 275| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 276| callback | [Optional](ts-universal-attributes-custom-property.md#optionalt12)\<[OnCheckboxGroupChangeCallback](#oncheckboxgroupchangecallback18)> | 是 | 多选框群组的信息。<br/>当callback的值为undefined时，不使用回调函数。 | 277 278## OnCheckboxGroupChangeCallback<sup>18+</sup> 279 280type OnCheckboxGroupChangeCallback = (value: CheckboxGroupResult) => void 281 282多选框群组的信息。 283 284**卡片能力：** 从API version 18开始，该接口支持在ArkTS卡片中使用。 285 286**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 287 288**系统能力：** SystemCapability.ArkUI.ArkUI.Full 289 290**参数：** 291 292| 参数名 | 类型 | 必填 | 说明 | 293| ------ | --------------------------------------------------- | ---- | ------------------ | 294| value | [CheckboxGroupResult](#checkboxgroupresult对象说明) | 是 | 多选框群组的信息。 | 295 296## CheckboxGroupResult对象说明 297 298多选框群组的名称和状态。 299 300**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 301 302**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 303 304**系统能力：** SystemCapability.ArkUI.ArkUI.Full 305 306| 名称 | 类型 | 只读 | 可选 | 说明 | 307| ------ | ------ | ------- | ------- | ------- | 308| name | Array<string> | 否 | 否 | 群组内所有被选中的多选框名称。 | 309| status | [SelectStatus](#selectstatus枚举说明) | 否 | 否 | 选中状态。 | 310 311## SelectStatus枚举说明 312 313多选框群组的选中状态。 314 315**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 316 317**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 318 319**系统能力：** SystemCapability.ArkUI.ArkUI.Full 320 321| 名称 | 说明 | 322| ----- | -------------------- | 323| All | 群组多选择框全部选择。 | 324| Part | 群组多选择框部分选择。 | 325| None | 群组多选择框全部没有选择。 | 326 327## 示例 328 329### 示例1（设置多选框群组） 330 331该示例用于控制多选框全选或者不全选状态。 332 333```ts 334// xxx.ets 335@Entry 336@Component 337struct CheckboxExample { 338 build() { 339 Scroll() { 340 Column() { 341 // 全选按钮 342 Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) { 343 CheckboxGroup({ group: 'checkboxGroup' }) 344 .checkboxShape(CheckBoxShape.ROUNDED_SQUARE) 345 .selectedColor('#007DFF') 346 .onChange((itemName: CheckboxGroupResult) => { 347 console.info("checkbox group content" + JSON.stringify(itemName)); 348 }) 349 Text('Select All').fontSize(14).lineHeight(20).fontColor('#182431').fontWeight(500) 350 } 351 352 // 选项1 353 Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) { 354 Checkbox({ name: 'checkbox1', group: 'checkboxGroup' }) 355 .selectedColor('#007DFF') 356 .shape(CheckBoxShape.ROUNDED_SQUARE) 357 .onChange((value: boolean) => { 358 console.info('Checkbox1 change is' + value); 359 }) 360 Text('Checkbox1').fontSize(14).lineHeight(20).fontColor('#182431').fontWeight(500) 361 }.margin({ left: 36 }) 362 363 // 选项2 364 Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) { 365 Checkbox({ name: 'checkbox2', group: 'checkboxGroup' }) 366 .selectedColor('#007DFF') 367 .shape(CheckBoxShape.ROUNDED_SQUARE) 368 .onChange((value: boolean) => { 369 console.info('Checkbox2 change is' + value); 370 }) 371 Text('Checkbox2').fontSize(14).lineHeight(20).fontColor('#182431').fontWeight(500) 372 }.margin({ left: 36 }) 373 374 // 选项3 375 Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) { 376 Checkbox({ name: 'checkbox3', group: 'checkboxGroup' }) 377 .selectedColor('#007DFF') 378 .shape(CheckBoxShape.ROUNDED_SQUARE) 379 .onChange((value: boolean) => { 380 console.info('Checkbox3 change is' + value); 381 }) 382 Text('Checkbox3').fontSize(14).lineHeight(20).fontColor('#182431').fontWeight(500) 383 }.margin({ left: 36 }) 384 } 385 } 386 } 387} 388``` 389 390 391### 示例2（自定义勾选样式） 392 393该示例通过配置mark实现自定义多选框群组的勾选样式。 394 395```ts 396// xxx.ets 397@Entry 398@Component 399struct Index { 400 401 build() { 402 Row() { 403 Column() { 404 Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { 405 CheckboxGroup({ group: 'checkboxGroup' }) 406 .checkboxShape(CheckBoxShape.ROUNDED_SQUARE) 407 .selectedColor(Color.Orange) 408 .onChange((itemName: CheckboxGroupResult) => { 409 console.info("checkbox group content" + JSON.stringify(itemName)); 410 }) 411 .mark({ 412 strokeColor:Color.Black, 413 size: 40, 414 strokeWidth: 5 415 }) 416 .unselectedColor(Color.Red) 417 .width(30) 418 .height(30) 419 Text('Select All').fontSize(20) 420 }.margin({right:15}) 421 Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { 422 Checkbox({ name: 'checkbox1', group: 'checkboxGroup' }) 423 .selectedColor(0x39a2db) 424 .shape(CheckBoxShape.ROUNDED_SQUARE) 425 .onChange((value: boolean) => { 426 console.info('Checkbox1 change is'+ value); 427 }) 428 .mark({ 429 strokeColor:Color.Black, 430 size: 50, 431 strokeWidth: 5 432 }) 433 .unselectedColor(Color.Red) 434 .width(30) 435 .height(30) 436 Text('Checkbox1').fontSize(20) 437 } 438 Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { 439 Checkbox({ name: 'checkbox2', group: 'checkboxGroup' }) 440 .selectedColor(0x39a2db) 441 .shape(CheckBoxShape.ROUNDED_SQUARE) 442 .onChange((value: boolean) => { 443 console.info('Checkbox2 change is' + value); 444 }) 445 .width(30) 446 .height(30) 447 Text('Checkbox2').fontSize(20) 448 } 449 Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { 450 Checkbox({ name: 'checkbox3', group: 'checkboxGroup' }) 451 .selectedColor(0x39a2db) 452 .shape(CheckBoxShape.ROUNDED_SQUARE) 453 .onChange((value: boolean) => { 454 console.info('Checkbox3 change is' + value); 455 }) 456 .width(30) 457 .height(30) 458 Text('Checkbox3').fontSize(20) 459 } 460 } 461 .width('100%') 462 } 463 .height('100%') 464 } 465} 466``` 467 468 469 470### 示例3（设置全选） 471 472该示例实现了在结合带缓存功能的组件使用时(如List)，未被创建的Checkbox全选的功能。 473 474```ts 475class BasicDataSource implements IDataSource { 476 private listeners: DataChangeListener[] = []; 477 private originDataArray: checkboxItemData[] = []; 478 479 public totalCount(): number { 480 return this.originDataArray.length; 481 } 482 483 public getData(index: number): checkboxItemData { 484 return this.originDataArray[index]; 485 } 486 487 registerDataChangeListener(listener: DataChangeListener): void { 488 if (this.listeners.indexOf(listener) < 0) { 489 console.info('add listener'); 490 this.listeners.push(listener); 491 } 492 } 493 494 unregisterDataChangeListener(listener: DataChangeListener): void { 495 const pos = this.listeners.indexOf(listener); 496 if (pos >= 0) { 497 console.info('remove listener'); 498 this.listeners.splice(pos, 1); 499 } 500 } 501 502 notifyDataReload(): void { 503 this.listeners.forEach(listener => { 504 listener.onDataReloaded(); 505 }); 506 } 507 508 notifyDataAdd(index: number): void { 509 this.listeners.forEach(listener => { 510 listener.onDataAdd(index); 511 }); 512 } 513 514 notifyDataChange(index: number): void { 515 this.listeners.forEach(listener => { 516 listener.onDataChange(index); 517 }); 518 } 519 520 notifyDataDelete(index: number): void { 521 this.listeners.forEach(listener => { 522 listener.onDataDelete(index); 523 }); 524 } 525 526 notifyDataMove(from: number, to: number): void { 527 this.listeners.forEach(listener => { 528 listener.onDataMove(from, to); 529 }); 530 } 531 532 notifyDatasetChange(operations: DataOperation[]): void { 533 this.listeners.forEach(listener => { 534 listener.onDatasetChange(operations); 535 }); 536 } 537} 538 539interface checkboxItemData { 540 isCheck: boolean; 541 itemName: string; 542} 543 544 545class MyDataSource extends BasicDataSource { 546 private dataArray: checkboxItemData[] = []; 547 548 public totalCount(): number { 549 return this.dataArray.length; 550 } 551 552 public getData(index: number): checkboxItemData { 553 return this.dataArray[index]; 554 } 555 556 public pushData(data: checkboxItemData): void { 557 this.dataArray.push(data); 558 this.notifyDataAdd(this.dataArray.length - 1); 559 } 560 561 public operateData(isSelect: boolean): void { 562 this.dataArray.forEach((item) => { 563 item.isCheck = isSelect 564 }) 565 566 this.notifyDataReload() 567 } 568 569 public operateItem(isSelect: boolean, index: number): void { 570 this.dataArray[index].isCheck = isSelect 571 this.notifyDataChange(index) 572 } 573 574 public getDataSource(): checkboxItemData[] { 575 return this.dataArray 576 } 577} 578 579@Entry 580@Component 581struct MyComponent { 582 private data: MyDataSource = new MyDataSource(); 583 584 aboutToAppear() { 585 for (let i = 0; i <= 100; i++) { 586 this.data.pushData({ isCheck: false, itemName: `checkbox ${i}` }); 587 } 588 } 589 590 @State isSelectAll: boolean = false 591 592 build() { 593 Column() { 594 Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) { 595 CheckboxGroup({ group: "group" }) 596 .selectAll(this.isSelectAll) 597 .hitTestBehavior(HitTestMode.None) 598 Text("全选").fontSize(25) 599 }.onClick(() => { 600 this.isSelectAll = !this.isSelectAll 601 this.data.operateData(this.isSelectAll) 602 }).padding({ left: 10 }) 603 604 List({ space: 3 }) { 605 LazyForEach(this.data, (item: checkboxItemData, index: number) => { 606 ListItem() { 607 Row() { 608 Checkbox({ name: `checkbox-${item}` }) 609 .select(item.isCheck) 610 .onChange((value: boolean) => { 611 this.data.operateItem(value, index) 612 let dataSource = this.data.getDataSource() 613 this.isSelectAll = dataSource.every((item) => item.isCheck === true) 614 }) 615 Text(item.itemName).fontSize(20) 616 }.margin({ left: 10, right: 10 }) 617 } 618 619 }, (item: checkboxItemData) => item.itemName + item.isCheck) 620 }.cachedCount(5) 621 } 622 } 623} 624``` 625 626
