flutter-展開閉合效果(列表型式的)
阿新 • • 發佈:2020-07-04
ExpansionTile元件
ExpansionTile Widget
就是一個可以展開閉合的元件,常用的屬性有如下幾個。
- title:閉合時顯示的標題,這個部分經常使用
Text Widget
。 - leading:標題左側圖示,多是用來修飾,讓介面顯得美觀。
- backgroundColor: 展開時的背景顏色,當然也是有過度動畫的,效果非常好。
- children: 子元素,是一個數組,可以放入多個元素。
- trailing : 右側的箭頭,你可以自行替換但是我覺的很少替換,因為谷歌已經表現的很完美了。
- initiallyExpanded: 初始狀態是否展開,為true時,是展開,預設為false,是不展開。
import 'package:flutter/material.dart'; class ExpansionTileDemo extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: AppBar(title: Text('expansionTile'),),), 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,//預設開啟關閉 ), ), ); } }
列表型式
ExpansionPanelList 常用屬性
- expansionCallback:點選和互動的回掉事件,有兩個引數,第一個是觸發動作的索引,第二個是布林型別的觸發值。
- children:列表的子元素,裡邊多是一個List陣列。
ExpandStateBean 自定義類
為了方便管理製作了一個ExpandStateBean
類,裡邊就是兩個狀態,一個是是否展開isOpen
,另一個索引值。
import 'package:flutter/material.dart'; class ExpansionTileList extends StatefulWidget { @override _ExpansionTileListState createState() => _ExpansionTileListState(); } class _ExpansionTileListState extends State<ExpansionTileList> { List<int> mList; List<ExpanStateBean> expandStateList; _ExpansionTileListState(){ mList=new List(); expandStateList=new List(); for(int i=0;i<10;i++){ mList.add(i); expandStateList.add(ExpanStateBean(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){ //headerBuilder:頭部 isExpanded是否開啟 return ListTile( title:Text('this is No.$index') ); }, body: ListTile( title: Text('expansion no.$index'), ), isExpanded: expandStateList[index].isOpen ); }).toList(), ), ), ); } } // 控制開啟和閉合的類 class ExpanStateBean{ var isOpen; var index; ExpanStateBean(this.index,this.isOpen); }