HarmonyOS中多选框（Checkbox）及全选反选功能实现 原创

HarmonyOS中多选框（Checkbox）及全选反选功能实现

在HarmonyOS应用开发中，多选框（Checkbox）是一个常见的UI组件，用于让用户选择多个选项。为了实现多选框的全选和反选功能，我们可以使用CheckboxGroup组件。本文将详细介绍如何在HarmonyOS中实现一个多选框，并实现全选和反选功能，同时附上代码实现。

一、多选框（Checkbox）基础

Checkbox组件用于实现选中和取消选中的功能。在布局文件中配置Checkbox组件时，可以通过设置相关属性来定义其外观和行为。例如：

<Checkbox
    ohos:id="$+id:check_box"
    ohos:height="match_content"
    ohos:width="match_content"
    ohos:text="This is a checkbox"
    ohos:text_size="20fp" />

在代码中，我们可以通过findComponentById方法获取Checkbox组件的实例，并设置其选中状态或监听其状态变化事件。

二、CheckboxGroup组件

CheckboxGroup组件用于管理一组Checkbox组件，可以实现全选和反选功能。所有需要全选的Checkbox的group属性值必须相同，并且该值与CheckboxGroup的group属性值相匹配。

三、实现全选和反选功能

1. 布局文件：在布局文件中定义Checkbox和CheckboxGroup组件。

@Entry
@Component
struct Index {
    @State fruits: string[] = ['西瓜', '西红柿', '西兰花', '西葫芦'];
    @State isSelectAll: boolean = false;

    build() {
        Column() {
            Text('选中的是:')
            Row() {
                CheckboxGroup({ group: 'food' })
                    .selectedColor(Color.Red)
                    .unselectedColor(Color.Pink)
                    .onChange((selectedStatus: SelectStatus) => {
                        this.isSelectAll = (selectedStatus === SelectStatus.All);
                        this.updateCheckboxStates();
                    })
                Text('全选')
            }
            .padding({ left: 20 })
            .alignItems(HorizontalAlign.Start)

            Column() {
                this.fruits.forEach((item: string) => {
                    Row() {
                        Checkbox({ group: 'food', id: item })
                            .onChange((checkbox: Checkbox, state: boolean) => {
                                this.isSelectAll = this.fruits.every(fruit => {
                                    const checkboxComponent = this.$refs[fruit] as Checkbox;
                                    return checkboxComponent.isChecked();
                                });
                            })
                        Text(item)
                    }
                })
            }
            .padding(20)
            .alignItems(HorizontalAlign.Start)
        }
    }

    updateCheckboxStates() {
        this.fruits.forEach((item: string) => {
            const checkboxComponent = this.$refs[item] as Checkbox;
            if (this.isSelectAll) {
                checkboxComponent.setChecked(true);
            } else {
                checkboxComponent.setChecked(false);
            }
        });
    }
}

注意：在以上代码中，我们使用了this.$refs来获取每个Checkbox的引用，但在实际HarmonyOS的ArkTS框架中，并不直接支持Vue式的$refs。这里仅为示例，实际实现时需要通过其他方式（如通过组件ID在组件树中查找）来管理这些Checkbox的引用。

为了简化示例，以下代码将采用一种假设性的方法（例如，通过一个Map来手动管理Checkbox的引用）：

@Entry
@Component
struct Index {
    @State fruits: string[] = ['西瓜', '西红柿', '西兰花', '西葫芦'];
    @State isSelectAll: boolean = false;
    private checkboxMap: Map<string, Checkbox> = new Map();

    build() {
        Column() {
            Text('选中的是:')
            Row() {
                CheckboxGroup({ group: 'food' })
                    .selectedColor(Color.Red)
                    .unselectedColor(Color.Pink)
                    .onChange((selectedStatus: SelectStatus) => {
                        this.isSelectAll = (selectedStatus === SelectStatus.All);
                        this.updateCheckboxStates();
                    })
                Text('全选')
            }
            .padding({ left: 20 })
            .alignItems(HorizontalAlign.Start)

            Column() {
                this.fruits.forEach((item: string, index: number) => {
                    Row() {
                        Checkbox({ group: 'food', id: `${item}_checkbox` })
                            .ref((element) => {
                                this.checkboxMap.set(item, element as Checkbox);
                            })
                            .onChange((_, state: boolean) => {
                                this.isSelectAll = this.fruits.every(fruit => {
                                    const checkbox = this.checkboxMap.get(fruit);
                                    return checkbox?.isChecked() ?? false;
                                });
                            })
                        Text(item)
                    }
                })
            }
            .padding(20)
            .alignItems(HorizontalAlign.Start)
        }
    }

    updateCheckboxStates() {
        this.fruits.forEach((item: string) => {
            const checkbox = this.checkboxMap.get(item);
            if (checkbox) {
                checkbox.setChecked(this.isSelectAll);
            }
        });
    }
}

注意：在上面的代码中，我们使用了.ref()方法来获取Checkbox的引用，并将其存储在一个Map中。然后，在updateCheckboxStates方法中，我们通过这个Map来更新每个Checkbox的选中状态。

然而，需要注意的是，在实际的HarmonyOS开发中，可能并没有直接提供.ref()方法来获取组件引用。这里的.ref()方法仅为示例，用于说明如何管理组件引用。在实际开发中，你可能需要通过其他方式（如通过组件ID查找组件）来实现相同的功能。

另外，由于ArkTS框架和API可能会随着HarmonyOS的版本更新而发生变化，因此建议查阅最新的HarmonyOS开发文档以获取最准确的信息和最佳实践。

2. 逻辑处理：在代码中处理CheckboxGroup的onChange事件，根据全选状态更新每个Checkbox的选中状态。同时，在处理单个Checkbox的onChange事件时，更新全选状态。

四、总结

本文通过介绍Checkbox和CheckboxGroup组件的基础知识和使用示例，详细阐述了如何在HarmonyOS中实现一个多选框，并实现全选和反选功能。通过结合布局文件和代码逻辑，我们可以轻松地在HarmonyOS应用中实现这一功能。