flutter-展開閉合效果（列表型式的）

ExpansionTile組件

ExpansionTile Widget就是一個可以展開閉合的組件，常用的屬性有如下幾個。

• title:閉合時顯示的標題，這個部分經常使用Text Widget。
• leading:標題左側圖標，多是用來修飾，讓界面顯得美觀。
• backgroundColor: 展開時的背景顏色，當然也是有過度動畫的，效果非常好。
• children: 子元素，是一個數組，可以放入多個元素。
• trailing ： 右側的箭頭，你可以自行替換但是我覺的很少替換，因為谷歌已經表現的很完美了。
• initiallyExpanded: 初始狀態是否展開，為true時，是展開，默認為false，是不展開。

import 'package:flutter/material.dart';

class ExpansionTileDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: AppBar(title: Text('expansionTile'),),),
      body: Center(
        child: ExpansionTile(
          title: Text('Expansion Tile'),//標題
          leading: Icon(Icons.ac_unit),//左邊的圖標
          backgroundColor: Colors.white12,
          children: <Widget>[
            ListTile(
              title: Text('list tile'),
              subtitle: Text('subtitle'),
            )
          ],
          initiallyExpanded: true,//默認打開關閉
        ),
      ),
    );
  }
}

 

列表型式

ExpansionPanelList 常用屬性

• expansionCallback:點擊和交互的回掉事件，有兩個參數，第一個是觸發動作的索引，第二個是布爾類型的觸發值。
• children:列表的子元素，里邊多是一個List數組。

ExpandStateBean 自定義類

為了方便管理制作了一個ExpandStateBean類，里邊就是兩個狀態，一個是是否展開isOpen,另一個索引值。

import 'package:flutter/material.dart';

class ExpansionTileList extends StatefulWidget {
  @override
  _ExpansionTileListState createState() => _ExpansionTileListState();
}

class _ExpansionTileListState extends State<ExpansionTileList> {

  List<int> mList;
  List<ExpanStateBean> expandStateList;

  _ExpansionTileListState(){
    mList=new List();
    expandStateList=new List();
    for(int i=0;i<10;i++){
      mList.add(i);
      expandStateList.add(ExpanStateBean(i,false));
    }
  }

  _setCurrentIndex(int index,isExpand){
    setState(() {
      expandStateList.forEach((item) { 
        if(item.index == index){
          item.isOpen =!isExpand;
        }
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("expansion panel list"),),
      body: SingleChildScrollView(
        child: ExpansionPanelList(// 點擊的回調函數
          expansionCallback: (index,bol){
            _setCurrentIndex(index,bol);
          },
          children: mList.map((index){
            return ExpansionPanel(
              headerBuilder: (context,isExpanded){ //headerBuilder:頭部   isExpanded是否打開
                return ListTile(
                  title:Text('this is No.$index')
                );
              },
              body: ListTile(
                title: Text('expansion no.$index'),
              ),
              isExpanded: expandStateList[index].isOpen
            );
          }).toList(),
        ),
      ),
    );
  }
}

// 控制打開和閉合的類
class ExpanStateBean{
  var isOpen;
  var index;
  ExpanStateBean(this.index,this.isOpen);
}