快捷導(dǎo)航

Flutter 系統(tǒng)是如何實(shí)現(xiàn)ExpansionPanelList的示例代碼

更新時(shí)間：2020年05月08日 09:01:46 作者：老孟Flutter

Flutter組件有一個(gè)很大的特色，那就是很多復(fù)雜的組件都是通過(guò)一個(gè)一個(gè)小組件拼裝而成的，今天就來(lái)說(shuō)說(shuō)系統(tǒng)的ExpansionPanelList是如何實(shí)現(xiàn)的，需要的朋友可以參考下

在了解ExpansionPanelList實(shí)現(xiàn)前，先來(lái)了解下MergeableMaterial，它展示多個(gè)MergeableMaterialItem組件，當(dāng)子組件發(fā)生變化時(shí)，以動(dòng)畫的方式打開(kāi)或者關(guān)閉子組件，MergeableMaterial的父控件需要在主軸方向是一個(gè)沒(méi)有限制的控件，比如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是帶子控件的控件，顯示實(shí)際內(nèi)容，MaterialGap用于分割，只能放在MaterialSlice中間。

靜態(tài)情況下，看不出具體的效果，動(dòng)態(tài)改變子組件用法如下：

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,
 ),
)

效果如下：

主要看增加/刪除子組件時(shí)的動(dòng)畫效果。

增加分割線和陰影：

MergeableMaterial(
 hasDividers: true,
 elevation: 24,
 children: items,
)

效果如下：

陰影值不能隨便設(shè)置，只能設(shè)置如下值：1, 2, 3, 4, 6, 8, 9, 12, 16, 24

此控件可以實(shí)現(xiàn)什么樣的效果呢？看下面效果：

實(shí)現(xiàn)代碼：

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),
  ),
 ],
 );
}

看到這個(gè)效果是否想到了ExpansionPanelList呢？系統(tǒng)控件ExpansionPanelList就是使用此控件實(shí)現(xiàn)的。

交流

Flutter博客地址（近200個(gè)控件用法）：http://laomengit.com

總結(jié)

到此這篇關(guān)于Flutter 系統(tǒng)是如何實(shí)現(xiàn)ExpansionPanelList的示例代碼的文章就介紹到這了,更多相關(guān)Flutter 實(shí)現(xiàn)ExpansionPanelList內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: