在瞭解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),MaterialGap(key: ValueKey(4)),MaterialSlice(
   key: ValueKey(5),],),)

效果如下：

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,children: [
    MaterialSlice(
     key: ValueKey(1),child: Container(
      height: 200,))
    ],)
   : Container(),Container(
  height: 45,color: Colors.red.withOpacity(.3),);
}

看到這個效果是否想到了ExpansionPanelList呢？系統控制元件ExpansionPanelList就是使用此控制元件實現的。

交流

Flutter部落格地址（近200個控制元件用法）：http://laomengit.com

總結

到此這篇關於Flutter 系統是如何實現ExpansionPanelList的示例程式碼的文章就介紹到這了,更多相關Flutter 實現ExpansionPanelList內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！