Flutter组件学习（6）单选按钮Switch和复选按钮Checkbox

介绍

它们都是继承自StatefulWidget，但它们本身不会保存当前选中状态，选中状态都是由父组件来管理的。当Switch或Checkbox被点击时，会触发它们的onChanged回调，我们可以在此回调中处理选中状态改变逻辑

Checkbox的大小是固定的，无法自定义，而Switch只能定义宽度，高度也是固定的。值得一提的是Checkbox有一个属性tristate ，表示是否为三态，其默认值为false ，这时Checkbox有两种状态即“选中”和“不选中”，对应的value值为true和false 。如果tristate值为true时，value的值会增加一个状态null

通过Switch和Checkbox我们可以看到，虽然它们本身是与状态（是否选中）关联的，但它们却不是自己来维护状态，而是需要父组件来管理状态，然后当用户点击时，再通过事件通知给父组件，这样是合理的，因为Switch和Checkbox是否选中本就和用户数据关联，而这些用户数据也不可能是它们的私有状态。我们在自定义组件时也应该思考一下哪种状态的管理方式最为合理。

Switch

value	true 开 ；false 关
onChanged((value){})	状态改变回调方法
activeColor	状态打开下，那个条条和球球的颜色
activeTrackColor	打开状态下，那个条条的颜色
inactiveTrackColor	关闭状态下，那个条条的颜色
inactiveThumbColor	关闭状态下，那个球球的颜色
activeThumbImage	打开状态下，那个球球的图片
inactiveThumbImage	关闭状态下，那个球球的图片
SwitchListTile	Switch 的上层封装，它的外观是提供类似设置页的选择组件，可设置图标和文字

 关于给球球设置图片，可以设置本地的，也可以设置网络的

activeThumbImage: AssetImage('images/weixin_invite.png'),

inactiveThumbImage: NetworkImage('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591175847643&di=6e41a32b6e6355aacbfae14d03439a83&imgtype=0&src=http%3A%2F%2Fimgwx4.2345.com%2Fdypcimg%2Fdongman%2Fimg%2F2%2F25%2Fsup75205_223x310.jpg',
            

我自己写的小demo 

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

void main(){
  runApp(MyCheck());
}

class MyCheck extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return _MyAppState();
  }
}

class _MyAppState extends State<MyCheck> {

  bool _flag = false;

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.red,
          title: Text('单选框和复选框练习'),
          textTheme:
          TextTheme(title: TextStyle(fontSize: 18, color: Colors.yellow)),
        ),
        body: Center(
          child: Column(
            children: <Widget>[
              Switch(
                value: this._flag,
                activeColor: Colors.red,
                activeTrackColor: Colors.orange,
                inactiveTrackColor: Colors.green,
                inactiveThumbColor: Colors.blue,
                activeThumbImage: AssetImage('images/weixin_invite.png'),
                inactiveThumbImage: NetworkImage('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591175847643&di=6e41a32b6e6355aacbfae14d03439a83&imgtype=0&src=http%3A%2F%2Fimgwx4.2345.com%2Fdypcimg%2Fdongman%2Fimg%2F2%2F25%2Fsup75205_223x310.jpg',
                ),
                onChanged: (value){
                  setState(() {
                    this._flag = value;
                  });
                },
              ),

              Text(
                  '此时的状态是${this._flag == true ? "选中" : "未选中"}',
                style: TextStyle(
                  fontSize: 20,
                  color: Colors.red
                ),
              )
            ],
          ),
        )
      ),
    );
  }
}

    

CheckBox

value	true 开 ；false 关
onChanged((value){})	状态改变回调方法
activeColor	复选框选中的颜色
checkColor	系统默认的复选框是个对勾，这里设置对勾的颜色
CheckboxListTile	Checkbox 的上层封装，它的外观是提供类似设置页的选择组件，可设置图标和文字

看下原生是怎么样的

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

void main(){
  runApp(MyApp());
}

class MyApp extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _MyAppState();
  }
}

class _MyAppState extends State{

  bool _flag = false;

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.red,
          title: Text('单选框和复选框练习'),
          textTheme: TextTheme(
            title: TextStyle(
              fontSize: 18,
              color: Colors.yellow
            )
          ),
        ),
        body: Center(
          child: Column(
            children: <Widget>[
              Checkbox(
                value: _flag,
                activeColor: Colors.red, //选中时的颜色
                checkColor: Colors.green,
                hoverColor: Colors.blue,
                focusColor: Colors.yellow,
                autofocus: true,
                onChanged:(value){
                  setState(() {
                    _flag=value;
                  });
                } ,
              )
            ],
          ),
        ),
      ),
    );
  }

}

SwitchListTile和CheckboxListTile的应用