控件展开和关闭
入口文件
import 'package:flutter/material.dart';
import 'expansion_tile_demo.dart';
main(){
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData.dark(),
home: ExpansionParnelListDemo()
);
}
}
方法
import 'package:flutter/material.dart';
class ExpansionParnelListDemo extends StatefulWidget {
ExpansionParnelListDemo({Key key}) : super(key: key);
_ExpansionParnelListDemoState createState() => _ExpansionParnelListDemoState();
}
class _ExpansionParnelListDemoState extends State<ExpansionParnelListDemo> {
List<int> mList;
// 存放状态和索引List
List<ExpandStateBean> expandStateList;
_ExpansionParnelListDemoState(){
mList = new List();
expandStateList = new List();
for(int i = 0; i < 10; i ++){
mList.add(i);
// 第一个是索引,第二个是否打开;
expandStateList.add(ExpandStateBean(i,false));
}
}
// 判断用户点击是否打开
_setCurrentIndex(int index, isExpand){
setState(() {
// 循环判断用户点击和索引是否一致,并操作状态
expandStateList.forEach((item){
if(item.index == index){
item.isOpen = !isExpand;
}
});
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Expansion List')),
// 可滚动的控件
body: SingleChildScrollView(
// ExpansionPanelList 必须放在可滚动的控件里面
child: ExpansionPanelList(
expansionCallback: (index,bol){
_setCurrentIndex(index,bol);
},
children: mList.map((index){
return ExpansionPanel(
// 上下文 是否是打开的
headerBuilder: (context,isExpanded){
return ListTile(
title: Text('我是标题.$index'),
);
},
body: ListTile(
title: Text('内容.$index'),
),
// 判断是否打开
isExpanded: expandStateList[index].isOpen
);
}).toList(),
),
),
);
}
}
// 控制打开和关闭的类
class ExpandStateBean{
var isOpen;
var index;
ExpandStateBean(this.index,this.isOpen);
}
网友评论