Flutter 基础组件：单选框和复选框

前言

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

实例

// 单选框和复选框

import 'package:flutter/material.dart';


class SwitchCheckboxRoute extends StatefulWidget {
  @override
  _SwitchCheckboxRouteState createState() => _SwitchCheckboxRouteState();
}

class _SwitchCheckboxRouteState extends State {
  // 维护单选状态
  bool _switchSelected = true;
  // 维护复选状态
  bool _checkboxSelected = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('单选框 复选框'),
      ),
      body: Container(
        child: Column(
          children: [
            
            // 单选框
            Switch(
              // 当前状态
              value: _switchSelected,
              onChanged: (value){
                // 重新构建页面
                setState(() {
                  _switchSelected = value;
                });
              },
            ),

            // 复选框
            Checkbox(
              value: _checkboxSelected,
              onChanged: (value) {
                setState(() {
                  _checkboxSelected = value;
                });
              },
            ),
          ],
        ),
      ),
    );
  }

}

总结

Switch和Checkbox属性比较简单，它们都有一个activeColor属性，用于设置激活态的颜色。至于大小，到目前为止，Checkbox的大小是固定的，无法自定义，而Switch只能定义宽度，高度也是固定的。值得一提的是Checkbox有一个属性tristate ，表示是否为三态，其默认值为false ，这时Checkbox有两种状态即“选中”和“不选中”，对应的value值为true和false 。如果tristate值为true时，value的值会增加一个状态null。
通过Switch和Checkbox我们可以看到，虽然它们本身是与状态（是否选中）关联的，但它们却不是自己来维护状态，而是需要父组件来管理状态，然后当用户点击时，再通过事件通知给父组件，这样是合理的，因为Switch和Checkbox是否选中本就和用户数据关联，而这些用户数据也不可能是它们的私有状态。