Flutter基础组件（7）：Checkbox（复选框）

Checkbox 提供了一个标准的复选框界面，用户可以点击复选框来切换选中或未选中状态。选中状态通常用于表示用户希望启用或禁用某个选项。Checkbox 通常用于表单、设置页面或任何需要用户确认或选择的场景。

一、基本使用

使用Checkbox的基本方式如下：

Checkbox(
  value: isChecked, // 当前复选框的值，表示是否选中
  onChanged: (bool? newValue) { // 当复选框的值改变时调用
    setState(() {
      isChecked = newValue ?? false;
    });
  }        
)

isChecked 是一个状态变量，用于跟踪复选框的选中状态。效果图如下所示：

二、属性

Checkbox小部件的主要属性是：

• value: 表示复选框是否被选中的布尔值。
• onChanged: 当用户改变复选框的选中状态时调用的回调函数。它返回一个新的布尔值，表示复选框的新状态。

三、自定义 Checkbox

Checkbox可以用于各种自定义场景，例如：

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(
    debugShowCheckedModeBanner: false,
    home: CheckboxPage(),
  ));
}

class CheckboxPage extends StatefulWidget {
  const CheckboxPage({super.key});
  @override
  State<CheckboxPage> createState() => _CheckboxPageState(); // 状态函数
}

class _CheckboxPageState extends State<CheckboxPage> {
  bool isChecked = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Checkbox Example'),
      ),
      body: Center (
        child: Checkbox(
            value: isChecked, // 当前复选框的值，表示是否选中
            onChanged: (bool? newValue) { // 当复选框的值改变时调用
              setState(() {
                isChecked = newValue ?? false;
              });
            },
            activeColor: Colors.green, // 选中时的颜色
            checkColor: Colors.white, // 选中标记的颜色              
          ),                    
        ),
    );
  }
}

效果图如下所示：