Flutter之ExpansionTile组件
ExpansionTile组件
ExpansionTile Widget
就是一个可以展开闭合的组件,常用的属性有如下几个。
- title:闭合时显示的标题,这个部分经常使用
Text Widget
。 - leading:标题左侧图标,多是用来修饰,让界面显得美观。
- backgroundColor: 展开时的背景颜色,当然也是有过度动画的,效果非常好。
- children: 子元素,是一个数组,可以放入多个元素。
- trailing : 右侧的箭头,你可以自行替换但是我觉的很少替换,因为谷歌已经表现的很完美了。
- initiallyExpanded: 初始状态是否展开,为true时,是展开,默认为false,是不展开。
代码示例如下:
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title:'Flutter Demo', theme: new ThemeData.dark(), home:ExpansionTileDemo() ); } } class ExpansionTileDemo extends StatelessWidget { @override Widget build(BuildContext context) { 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: <Widget>[ ListTile( title: Text('list tile'), subtitle: Text('subtitle'), ), ], initiallyExpanded: true, //打开状态 不写默认false闭合状态 ), ), ); } }
Flutter还很贴心的为提供了一个ExpansionPanelList Widget,它可以实现展开闭合的列表功能。
ExpansionPanelList 常用属性
- expansionCallback:点击和交互的回掉事件,有两个参数,第一个是触发动作的索引,第二个是布尔类型的触发值。
- children:列表的子元素,里边多是一个List数组。
注意:ExpansionPanelList要在SingleChildScrollView里使用
修改上面的代码如下:
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title:'Flutter Demo', theme: new ThemeData.dark(), //home:ExpansionTileDemo(), home: ExpansionPanelListDemo(), ); } } class ExpandStateBean{ //控制打开关闭状态 var index,isOpen; ExpandStateBean(this.index, this.isOpen); } class ExpansionPanelListDemo extends StatefulWidget { _ExpansionPanelListDemoState createState() => _ExpansionPanelListDemoState(); } class _ExpansionPanelListDemoState extends State<ExpansionPanelListDemo> { List<int> mList; //列表数组 List<ExpandStateBean> expandStateList; //自定义ExpandStateBean的数组expandStateList _ExpansionPanelListDemoState(){ //构造方法 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 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('expansin no.$index'), ), isExpanded: expandStateList[index].isOpen ); }).toList(), ), ), ); } }