Flutter 系統是如何實現ExpansionPanelList的

老孟Flutter發表於2020-05-05
Flutter

老孟導讀：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個控制元件用法）：laomengit.com

歡迎加入Flutter交流群（微信：laomengit）、關注公眾號【老孟Flutter】：

相關文章