flutter控件练习demo地址：github

Switch(开关)、SwitchListTile(带标题的开关) 和 AnimatedSwitch

一 Switch

1.1 简介

Switch “开关按钮”

• 本身也是没有存储状态的 Widget 。需要通过有状态的父 Widget 来控制状态
• 当 Switch 状态发生变化的时候 onChanged 会被调用 ， 回调的参数是 bool ，true 表示 选中。 false 表示未选中
• value 属性 表示 是否打开，通过控制这个来控制 Switch 的状态
• 能点击。能滑动

1.2 属性

• value： 来初始化此 Switch 是否被选中。true 表示选中 ，false 表示不选中
• onChanged： 当 拖动改变状态时的回调。
• activeColor： 当 value 是 true 时按钮的背景颜色。也就是开的状态时的颜色
• activeTrackColor： 当 value 是 true 时 滑块的颜色
• activeThumbImage： 当 value 是 true 时 滑块的图片
• activeThumbImage： 当 value 是 true 时 滑块上的图片。 如果 activeColor 也设置了 ， 以 activeThumbImage 为准 。如果设置的是网络图片的话。当 滑块 滑到这里 才开始加载。所以 没加载出图片的之前 ，以 activeColor 为准
• inactiveThumbColor： 当 value 是 false 时 滑块的颜色。也就是开的状态时的颜色
• **inactiveTrackColor：**当 value 是 false 时 滑道的颜色
• **inactiveThumbImage：**当 value 是 false 时 滑块上的图片。 如果 inactiveThumbColor 也设置了 ， 以 inactiveThumbImage 为准

二 SwitchListTile

2.1 简介

SwitchListTile “带标题的开关”

2.2 属性

• value： 是否选中 是否打开
• onChanged： 当打开关闭的时候的回调
• activeColor： 选中时 滑块的颜色
• activeTrackColor： 选中时 滑道的颜色
• inactiveThumbColor： 未选中时 滑块的颜色
• inactiveTrackColor： 未选中时 滑道的颜色
• activeThumbImage： 选中时 滑块的图片
• inactiveThumbImage： 未选中时 滑块的图片
• title： 标题 典型的是 Text
• subtitle： 副标题 在标题下面的 典型的是 Text
• isThreeLine = false： 是不是三行， true 时： subtitle 不能为null， false时可以为 null
• dense： 是否垂直密集居中
• secondary： 左边的一个东西
• selected = false： 如果为 true ，则 text 和 icon 都用 activeColor 时的color

三 demo图片

四 demo代码

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:fluttertoast/generated/i18n.dart';class SwitchDemo extends StatefulWidget {@overrideState<StatefulWidget> createState() {return TextFieldStateDemo();}
}class TextFieldStateDemo extends State {bool _isCheck;@overridevoid initState() {super.initState();_isCheck = false;}@overrideWidget build(BuildContext context) {// TODO: implement buildreturn Scaffold(appBar: AppBar(title: Text("Switch 和 SwitchListTile"),centerTitle: true,),body: Column(crossAxisAlignment: CrossAxisAlignment.center,children: <Widget>[Row(),SizedBox(height: 20,),Text("一：普通的Switch",style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),),Switch(value: _isCheck,onChanged: _changed,),Text("二：特质的Switch",style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),),Switch(//来初始化此 Switch 是否被选中。true 表示选中 ，false 表示不选中value: _isCheck,//当 拖动改变状态时的回调。onChanged: _changed,//当 value 是 true 时 滑块的颜色。也就是开的状态时的颜色activeColor: Colors.red,// 当 value 是 true 时 滑道的颜色activeTrackColor: Colors.blueAccent,// 当 value 是 true 时 滑块上的图片。 如果 activeColor 也设置了  ， 以 activeThumbImage 为准// 如果设置的是网络图片的话。当 滑块 滑到这里 才开始加载。所以 没加载出图片的之前 ，以 activeColor 为准activeThumbImage: NetworkImage("https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3868620627,2694438302&fm=58"),// 当 value 是 false 时 滑块的颜色。也就是开的状态时的颜色inactiveThumbColor: Colors.amberAccent,// 当 value 是 false 时 滑道的颜色inactiveTrackColor: Colors.green,// 当 value 是 false 时 滑块上的图片。 如果 inactiveThumbColor 也设置了  ， 以 inactiveThumbImage 为准inactiveThumbImage: AssetImage("images/hashiqi.jpg"),),Text("三：SwitchListTile",style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),),SizedBox(width: 200,child: SwitchListTile(// 是否选中 是否打开value: _isCheck,// 当打开关闭的时候的回调onChanged: _changed,// 选中时 滑块的颜色activeColor: Colors.red,// 选中时 滑道的颜色activeTrackColor: Colors.black,// 选中时 滑块的图片
//              activeThumbImage: AssetImage("images/hashiqi.jpg"),// 未选中时 滑块的颜色inactiveThumbColor: Colors.green,// 未选中时 滑道的颜色inactiveTrackColor: Colors.amberAccent,// 未选中时 滑块的颜色inactiveThumbImage: AssetImage("images/hashiqi.jpg"),// 标题title: Text("标题"),// 副标题 在标题下面的
//              subtitle: Text("副标题"),// 是不是三行， true 时： subtitle 不能为null， false时可以为 null
//              isThreeLine: true,// 如果为 true ，则 text 和 icon 都用 activeColor 时的color
//              selected: true,// 是否垂直密集居中dense: true,// 左边的一个东西secondary: Icon(Icons.access_time),),),]),);}void _changed(isCheck) {setState(() {_isCheck = isCheck;});}
}复制代码