前言：
各位同学大家好，有段时间没有给大家更新文章了 ，今天写了一个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，小弟在这里谢过啦
网友评论