文章目录
Flutter 开关按钮封装
效果
实现思路
实现代码

Flutter 开关按钮封装
效果

实现思路
利用自定义按钮组件FlatButton，设置开关状态对应的颜色。
实现代码
///
/// Author: chengzan
/// Date: 2020-6-4
/// Describe: 圆形按钮，适用开关按钮
///

class PowerSwitch extends StatefulWidget {
  var value;
  var on;
  var off;
  Color mainThemeColor;
  String onText;
  String offText;
  Function changed;
  PowerSwitch(
      {Key key,
      @required this.value,
      @required this.on,
      @required this.off,
      @required this.mainThemeColor,
      @required this.onText,
      @required this.offText,
      @required this.changed});

  @override
  _PowerSwitchState createState() => _PowerSwitchState();
}

class _PowerSwitchState extends State<PowerSwitch> {
  var value;

  @override
  void initState() {
    super.initState();
    value = widget.value;
  }

  @override
  Widget build(BuildContext context) {
    return FlatButton(
        color: value == widget.on ? widget.mainThemeColor : Color(0xffffffff),
        splashColor: widget.mainThemeColor,
        highlightColor: widget.mainThemeColor,
        child: Icon(
          Icons.power_settings_new,
          color: value == widget.on ? Color(0xffffffff) : widget.mainThemeColor,
        ),
        onPressed: () {
          setState(() {
            value = value == widget.on ? widget.off : widget.on;
          });
          widget.changed(value);
        },
        shape: new CircleBorder(
          side: new BorderSide(
            //设置 界面效果
            width: 1,
            color:
                value == widget.on ? widget.mainThemeColor : Color(0xffe7e7e7),
            style: BorderStyle.solid,
          ),
        ));
  }
}

前言：
各位同学大家好，有段时间没有给大家更新文章了 ，今天写了一个flutter 开关闭合的案例就想着分享给家 ，原生安卓和iOS 这种效果网上也有很多文章讲到 我就不展开讲了, 今天我们就讲一下flutter的实现方式，那么废话不多说 我们正式开始
准备工作：
需要安装flutter的开发环境：大家可以去看看之前的教程：

1 win系统flutter开发环境安装教程: https://www.jianshu.com/p/152447bc8718

2 mac系统flutter开发环境安装教程：https://www.jianshu.com/p/bad2c35b41e3
效果图：



具体实现：
单个开关闭合效果：

import 'package:flutter/material.dart';
/***
 *
 * 创建人：xuqing
 * 创建时间：2020年11月3日14:00:48
 * 类说明： 单个开关页面
 *
 */
class ExpansionTileDemo extends StatefulWidget {
  ExpansionTileDemo({Key key}) : super(key: key);
  @override
  _ExpansionTileDemoState createState() {
    return _ExpansionTileDemoState();
  }
}
class _ExpansionTileDemoState extends State<ExpansionTileDemo> {
  @override
  void initState() {
    super.initState();
  }
  @override
  void dispose() {
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("expansion tile demo"),
      ),
      body: Center(
       child: ExpansionTile(
        title: Text("Expansion tile"),
         leading: Icon(Icons.ac_unit),
         backgroundColor: Colors.white12,
         children: [
           ListTile(
             title: Text("list  tile"),
             subtitle: Text("subtitle"),
           )
         ],
         initiallyExpanded: true,
       ),
      ),
    );
  }
}

这边是用了  ExpansionTile 来实现的  我们在  ExpansionTile组件中设置  title  和  leading 属性

以及 children 中添加 title 和subtitle  然后我们设置 initiallyExpanded属性  设置成true则默认是打开状态 设置成false 则默认是闭合状态
列表开关闭合效果

   body: SingleChildScrollView(
        child: ExpansionPanelList(
          expansionCallback: (index,bol){
            _setCurrentIndex(index,bol);
          },
          children:mList.map((index){
            return ExpansionPanel(
              headerBuilder: (context, isExpanded){
                return ListTile(
                  title: Text("this is no $index"),
                );
              },
              body: ListTile(
                title: Text("expandsion no $index"),
              ),
              isExpanded: expandStateList[index].isopen
            );
          }).toList(),
        ),
      ),

列表的开关闭合我们需要用到 ExpansionPanelList 组件    我们在外层嵌套一个SingleChildScrollView

处理滑动的效果 和显示我们  ExpansionPanelList

然后我们在 ExpansionPanelList 的里面 处理  expansionCallback 回调方法  和children 属性

expansionCallback 回调方法里面有  index 下标和bol 开关开启和闭合布尔值

children 中我们遍历我们虚拟的死数据mList

死数据  我们定义2个数组 list在构造方法中赋值for循往里面添加10条数据
 List<int>mList;
  List<ExpandStateBean>expandStateList;
  _ExpansionPanelListDemoState(){
    mList=new List();
    expandStateList=new List();
    for(int  i=0 ;i<10;i++){
      mList.add(i);
      expandStateList.add(ExpandStateBean(false, i));
    }
  }

自定义bean类 里面定义了是否开发的属性和下标
class  ExpandStateBean{
  var isopen;
  var  index;
  ExpandStateBean(this.isopen,this.index);
}

我们还需要定义一个方法在  ExpansionPanelList 组件里面的  expansionCallback 回调方法里面使用
  _setCurrentIndex(int  index, isExpand){
    setState(() {
      expandStateList.forEach((item) {
        if(item.index==index){
          item.isopen=!isExpand;
        }
      });
    });
  }

我们遍历 expandStateList 数组然后将他里面的  item.isopen 属性赋值给  isExpand 方法中的isExpand 需要取反一下   这样我们在 开关开启和闭合属性中直接获取expandStateList 里面的 isopen 属性   然后能在开启和关闭的状态下来回切换 否则不能点击
  isExpanded: expandStateList[index].isopen

完整代码：
import 'package:flutter/material.dart';
/**
 *
 * 创建人：xuqing
 * 创建时间：2020年11月3日14:03:15
 * 类说明：列表开关页面
 *
 *
 */
class ExpansionPanelListDemo extends StatefulWidget {
  ExpansionPanelListDemo({Key key}) : super(key: key);

  @override
  _ExpansionPanelListDemoState createState() {
    return _ExpansionPanelListDemoState();
  }
}
class _ExpansionPanelListDemoState extends State<ExpansionPanelListDemo> {
  List<int>mList;
  List<ExpandStateBean>expandStateList;
  _ExpansionPanelListDemoState(){
    mList=new List();
    expandStateList=new List();
    for(int  i=0 ;i<20;i++){
      mList.add(i);
      expandStateList.add(ExpandStateBean(false, i));
    }
  }
  _setCurrentIndex(int  index, isExpand){
    setState(() {
      expandStateList.forEach((item) {
        if(item.index==index){
          item.isopen=!isExpand;
        }
      });
    });
  }
  @override
  void initState() {
    super.initState();
  }
  @override
  void dispose() {
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text(
          "expansion panel list"
        ),
      ),
      body: SingleChildScrollView(
        child: ExpansionPanelList(
          expansionCallback: (index,bol){
           _setCurrentIndex(index,bol);
          },
          children:mList.map((index){
            return ExpansionPanel(
              headerBuilder: (context, isExpanded){
                return ListTile(
                  title: Text("this is no $index"),
                );
              },
              body: ListTile(
                title: Text("expandsion no $index"),
              ),
              isExpanded: expandStateList[index].isopen
            );
          }).toList(),
        ),
      ),
    );
  }
}
class  ExpandStateBean{
  var isopen;
  var  index;
  ExpandStateBean(this.isopen,this.index);
}

到此flutter的   开关开启闭合案例实现就讲完。
最后总结：
类似这种开关开启和闭合的效果其他方式也是可以实现的 我们这边只是用了flutter sdk里面提供比较好用的 ExpansionTile 组件和  ExpansionPanelList 组件来实现单个开关和多个列表的开关 实现起来相对比较容易 。还有更多其他酷炫效果这边就不展开讲了，有兴趣的同学可以自己多尝试， 最后希望我的文章能帮助到各位解决问题 ，以后我还会贡献更多有用的代码分享给大家。各位同学如果觉得文章还不错 ，麻烦给关注和star，小弟在这里谢过啦
项目地址：
码云 ：https://gitee.com/qiuyu123/flutter_expansiontiledemo
QQ 交流群:

Flutter 移动跨平台开发技术分享

目前在西瓜视频上免费刊登 Flutter 系列教程，每日更新，欢迎关注接收提醒
【x1】点击查看提示
【x2】各种系列的教程
【x3】Flutter文章积累目录

【Flutter组件精讲【79】复选框CheckBox 1】
1 Switch 与 Checkbox 的共有属性配置说明
   activeColor → Color - 激活时原点的颜色。
   activeThumbImage → ImageProvider - 原点还支持图片，激活时的效果。
   activeTrackColor → Color - 激活时横条的颜色。
   inactiveThumbColor → Color - 非激活时原点的颜色。
   inactiveThumbImage → ImageProvider - 非激活原点的图片效果。
   inactiveTrackColor → Color - 非激活时横条的颜色。
   onChanged → ValueChanged - 改变时触发。
   value → bool - 切换按钮的值。


在接下来的文章篇幅中将定义两个变量来维护开关的状态以及复选框的状态，如下所示：
    bool _switchSelected = false; //维护单选开关状态
    bool _checkboxSelected = false; //维护复选框状态


2 开关 Switch

    Switch(
          //当前状态
          value: _switchSelected,
          // 激活时原点颜色
          activeColor: Colors.blue,
          inactiveTrackColor: Colors.blue.shade50,
          onChanged: (value) {
            //重新构建页面
            setState(() {
              _switchSelected = value;
            });
          },
        )



3 IOS 风格的 CupertinoSwitch

        CupertinoSwitch(
          value: _switchSelected,
          onChanged: (value) {},
        ),


4 SwitchListTile
SwitchListTile 是将 开关 Switch 、文本 Text 、还有图标水平线性排列的便捷组件

 new SwitchListTile(
   secondary: const Icon(Icons.shutter_speed),
   title: const Text('硬件加速'),
   value: _switchSelected,
   onChanged: (bool value) {
     setState(() {
       _switchSelected = !_switchSelected;
     });
   },
 ),



5  复选框 Checkbox

    Checkbox(
          value: _checkboxSelected,
          //选中时的颜色
          activeColor: Colors.red,
          onChanged: (value) {
            setState(() {
              _checkboxSelected = value;
            });
          },
        )


6  CheckboxListTile


      CheckboxListTile(
          secondary: const Icon(Icons.shutter_speed),
          title: const Text('硬件加速'),
          value: _checkboxSelected,
          onChanged: (bool value) {
            setState(() {
              _checkboxSelected = !_checkboxSelected;
            });
          },
        ),


目前在西瓜视频上免费刊登 Flutter 系列教程，每日更新，欢迎关注接收提醒
【x1】点击查看提示
【x2】各种系列的教程
【x3】Flutter文章积累目录

	

Flutter 移动跨平台开发技术
Switch 是一个切换按钮组件，通常用于设置的选项里。Switch 的原点颜色，横条颜色都可以设置，此外原点可以以图片形式显示.
Checkbox 是一个复选框组件，通常用于设置的选项里.
Switch与复选框 Checkbox 共有属性一览：
activeColor → Color - 激活时原点的颜色。
activeThumbImage → ImageProvider - 原点还支持图片，激活时的效果。
activeTrackColor → Color - 激活时横条的颜色。
inactiveThumbColor → Color - 非激活时原点的颜色。
inactiveThumbImage → ImageProvider - 非激活原点的图片效果。
inactiveTrackColor → Color - 非激活时横条的颜色。
onChanged → ValueChanged - 改变时触发。
value → bool - 切换按钮的值。
Switch 核心使用方法
bool _switchSelected = false; //维护单选开关状态

Switch(
//当前状态
value: _switchSelected,
// 激活时原点颜色
  activeColor: Colors.blue,
  inactiveTrackColor: Colors.blue.shade50,
  onChanged: (value) {
//重新构建页面
  setState(() {
           _switchSelected = value;
           });
    },
)
IOS 风格的 CupertinoSwitch
CupertinoSwitch(  value: _switchSelected,  onChanged: (value) {},),
SwitchListTile
new SwitchListTile(  secondary: const Icon(Icons.shutter_speed),  title: const Text('硬件加速'),    value: _switchSelected,      onChanged: (bool value) {        setState(() {                 _switchSelected = !_switchSelected;                 });  },),
Checkbox
Checkbox(  value: _checkboxSelected,  //选中时的颜色  activeColor: Colors.red,  onChanged: (value) {  setState(() {           _checkboxSelected = value;           });},)
CheckboxListTile
CheckboxListTile(    secondary: const Icon(Icons.shutter_speed),    title: const Text('硬件加速'),    value: _checkboxSelected,    onChanged: (bool value) {      setState(() {        _checkboxSelected = !_checkboxSelected;      });    },  ),