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
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:[ 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
