Flutter - Switch , CheckBox

Material 组件库中提供了 Material 风格的单选开关Switch和复选框Checkbox，虽然它们都是继承自StatefulWidget，但它们本身不会保存当前选中状态，选中状态都是由父组件来管理的。当Switch或Checkbox被点击时，会触发它们的onChanged回调，我们可以在此回调中处理选中状态改变逻辑

import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';

class SwitchAndCheckBoxTestRoute extends StatefulWidget {
  const SwitchAndCheckBoxTestRoute({Key? key}) : super(key: key);

  @override
  State<SwitchAndCheckBoxTestRoute> createState() => _MyState();
}

class _MyState extends State<SwitchAndCheckBoxTestRoute> {

  bool _switchSelected = true ;
  bool _checkboxSelected = true ;

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: const Text("buttonState"),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Switch(
              value: _switchSelected,
              onChanged: (value){
                setState(() {
                  _switchSelected = value;
                });
              }
          ),
          Row(

            children: [
              Checkbox(
                  value: _checkboxSelected,
                  activeColor: Colors.red, //选中时的颜色
                  tristate: false,
                  onChanged:(value){
                    setState(() {
                      _checkboxSelected=value!;
                    });
                  }
              ),
              const Text("足球"),
              Checkbox(
                  value: !_checkboxSelected,
                  activeColor: Colors.red, //选中时的颜色
                  tristate: false,
                  onChanged:(value){
                    setState(() {
                      _checkboxSelected=!value!;
                    });
                  }
              ),
              Text("蓝球"),
            ],
          ),

        ],
      ),
    );
  }

}