老孟導讀：Flutter組件有一個很大的特色，那就是很多復雜的組件都是通過一個一個小組件拼裝而成的，今天就來說說系統的ExpansionPanelList是如何實作的，
在了解ExpansionPanelList實作前，先來了解下MergeableMaterial，它展示多個MergeableMaterialItem組件，當子組件發生變化時，以影片的方式打開或者關閉子組件，MergeableMaterial的父控制元件需要在主軸方向是一個沒有限制的控制元件，比如SingleChildScrollView、Row、Column等，
基本用法如下：
SingleChildScrollView(
child: MergeableMaterial(
children: [
MaterialSlice(
key: ValueKey(1),
child: Container(
height: 45,
color: Colors.primaries[1 % Colors.primaries.length],
)),
MaterialGap(key: ValueKey(2)),
MaterialSlice(
key: ValueKey(3),
child: Container(
height: 45,
color: Colors.primaries[1 % Colors.primaries.length],
)),
MaterialGap(key: ValueKey(4)),
MaterialSlice(
key: ValueKey(5),
child: Container(
height: 45,
color: Colors.primaries[1 % Colors.primaries.length],
)),
],
),
)
效果如下：
MergeableMaterial的子控制元件只能是MaterialSlice和MaterialGap，MaterialSlice是帶子控制元件的控制元件，顯示實際內容，MaterialGap用于分割，只能放在MaterialSlice中間，
靜態情況下，看不出具體的效果，動態改變子組件用法如下：
List<MergeableMaterialItem> items = [];
List.generate(_count, (index) {
items.add(MaterialSlice(
key: ValueKey(index * 2),
child: Container(
height: 45,
color: Colors.primaries[index % Colors.primaries.length],
)));
});
return SingleChildScrollView(
child: MergeableMaterial(
children: items,
),
)
效果如下：
主要看增加/洗掉子組件時的影片效果，
增加分割線和陰影：
MergeableMaterial(
hasDividers: true,
elevation: 24,
children: items,
)
效果如下：
陰影值不能隨便設定，只能設定如下值：1, 2, 3, 4, 6, 8, 9, 12, 16, 24
此控制元件可以實作什么樣的效果呢？看下面效果：
實作代碼：
bool _expand = false;
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Container(
height: 45,
color: Colors.green.withOpacity(.3),
alignment: Alignment.centerRight,
child: IconButton(
icon: Icon(Icons.arrow_drop_down),
onPressed: () {
setState(() {
_expand = !_expand;
});
},
),
),
_expand
? MergeableMaterial(
hasDividers: true,
elevation: 24,
children: [
MaterialSlice(
key: ValueKey(1),
child: Container(
height: 200,
color: Colors.green.withOpacity(.3),
))
],
)
: Container(),
Container(
height: 45,
color: Colors.red.withOpacity(.3),
),
],
);
}
看到這個效果是否想到了ExpansionPanelList呢？系統控制元件ExpansionPanelList就是使用此控制元件實作的，
交流
老孟Flutter博客地址（近200個控制元件用法）：http://laomengit.com
歡迎加入Flutter交流群（微信：laomengit）、關注公眾號【老孟Flutter】：
 |
 |
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/31232.html
標籤：其他
上一篇：如何用Hexo搭建個人博客