class _DemoPageState extends State<DemoPage> { bool check = false; bool check2 = false; @override Widget build(BuildContext context) { return Column( mainAxisAlignment: MainAxisAlignment.center, children: [ //用sizedBox控制大小 SizedBox( width: 100.0, height: 30.0, //创建方式一: child: Switch( value: check, //激活的圆点颜色 activeColor: Colors.orange, //激活时轨道颜色(不定义,则轨道颜色就是浅一点的圆点颜色 activeTrackColor: Colors.pink, //激活时原点背景图 activeThumbImage: NetworkImage('url'), //非激活圆点颜色 inactiveThumbColor: Colors.green, //非激活时滑轨颜色 inactiveTrackColor: Colors.blueGrey, //非激活时原点背景图 inactiveThumbImage: NetworkImage('url'), onChanged: (bool val) { setState(() { check = !check; }); }, ), ), //创建方式二: Switch.adaptive( //激活的圆点颜色 activeColor: Colors.red, value: check2, onChanged: (bool val) { setState(() { check2 = !check2; }); }, ) ], ); } }
Flutter笔记55:Switch开关组件
Switch开关组件比较常用,定义方法也比较简单,在使用inactiveThumbImage和activeThumbImage作为背景图片时,最好是通过ps处理的比较小的圆图: