CheckBox

效果

子组件

无

参数

name

指定多选框名称。

group

指定多选框所属的组名。

 Checkbox({name:'checkbox1',group:'checkBoxGroup'})

属性

select (初始化的时候使用)(重要)

设置选中状态(true)就是选中 false 就是未选中.

selectedColor(重要)

设置多选框选中状态颜色。

unselectedColor(不重要)

设置多选框非选中状态的边框颜色

mark

设置多选框 内部钩子的样式宽度 颜色.大小等等

 .mark({
    strokeColor:Color.Black,
    size: 150,
    strokeWidth: 5
})

shape

设置 CheckBox 组件形状，包括圆形和圆角方形。

.shape(CheckBoxShape.ROUNDED_SQUARE) // 方形
.shape(CheckBoxShape.CIRCLE) // 圆形

事件

onChange

.onChange((value:boolean)=>{
  console.log(value.toString())
})

示例

• 类型

export interface checkboxItem {
  value: string;
  isSelected: boolean;
}
export interface checkboxData {
  change: boolean;
  data: checkboxItem[];
}

• 代码

import { checkboxData, checkboxItem } from '../Type/Index1Type';

@Entry
@Component
struct Index {
    @State ListData: string[] = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]
    @State checkboxData: string[] = []
    @State checkboxList: checkboxData = {
        change: false,
        data: [
            {
                value: "苹果",
                isSelected: false,
            },
            {
                value: "香蕉",
                isSelected: false,
            },
            {
                value: "橘子",
                isSelected: false,
            },
            {
                value: "荔枝",
                isSelected: false,
            },
        ]
    }

    checkboxFilter(item: checkboxItem) {
        item.isSelected = !item.isSelected;
        this.checkboxList.change = !this.checkboxList.change;
        if (item.isSelected) {
            // 真
            this.checkboxData.push(item.value)
        } else {
            // 假的
            let result: string[] = []
            this.checkboxData.forEach((content, index) => {
                if (content != item.value) {
                    result.push(content)
                }
            })
            this.checkboxData = result
        }
    }

    build() {

        Column() {
            Row() {
                Text("兴趣")
                    .fontColor(Color.Red)
                    .fontSize(16)
                    .margin({ right: 10 })
                    .width(60)
                Flex({
                    direction: FlexDirection.Row,
                    wrap: FlexWrap.Wrap,
                    alignContent: FlexAlign.Start,
                    justifyContent: FlexAlign.SpaceBetween
                }) {
                    ForEach(this.checkboxList.data, (item: checkboxItem, index) => {
                        Row() {
                            Checkbox({ name: item.value, group: 'group1' })
                                .shape(CheckBoxShape.ROUNDED_SQUARE)
                                .select(item.isSelected)
                                .selectedColor(Color.Red)
                                .unselectedColor(Color.Green)
                                .shape(CheckBoxShape.CIRCLE)
                                .mark({
                                    strokeColor: Color.Black,
                                    size: 20,
                                    strokeWidth: 5
                                })
                                .onChange((value: boolean) => {
                                    this.checkboxFilter(item)
                                })
                                .margin({
                                    right: 10
                                })
                            Text(item.value).fontSize(22).fontColor(Color.Black)
                        }.onClick(() => {
                            this.checkboxFilter(item)
                        }).margin({
                            bottom: 20
                        })

                    })
                }.layoutWeight(1)
            }.width('90%').justifyContent(FlexAlign.Center)

            Row() {
                Text("多选框的结果是" + JSON.stringify(this.checkboxData)).fontSize(18).fontColor(Color.Red)
            }
        }

    }
}