Flutter 开关闭合案例实现

前言：

各位同学大家好，有段时间没有给大家更新文章了，今天写了一个flutter 开关闭合的案例就想着分享给家，原生安卓和iOS 这种效果网上也有很多文章讲到我就不展开讲了, 今天我们就讲一下flutter的实现方式，那么废话不多说我们正式开始

准备工作：

需要安装flutter的开发环境：大家可以去看看之前的教程：
1 win系统flutter开发环境安装教程: https://www.jianshu.com/p/152447bc8718
2 mac系统flutter开发环境安装教程：https://www.jianshu.com/p/bad2c35b41e3

效果图：

Screenrecorder-2020-11-03-13-56-19-872[00_00_02--00_00_22].gif

screenrecorder-2020-11-03-13-56-29-558[00_00_02--00_00_22].gif

具体实现：

单个开关闭合效果：

Screenrecorder-2020-11-03-13-56-19-872[00_00_02--00_00_22].gif

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 则默认是闭合状态

列表开关闭合效果

screenrecorder-2020-11-03-13-56-29-558[00_00_02--00_00_22].gif

   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