介绍
它们都是继承自
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的应用