Flutter ExpansionPanel 收缩面板

收缩面板。它有一个标题和一个正文，可以展开或折叠。面板的正文主体仅在展开时可见。
收缩面板仅用作为 ExpansionPanelList的子级。
示例实现，请使用ExpansionPanelList。

参数详解

收缩面板是ExpansionPanelList和ExpansionPanel共同完成的，以下介绍他们的属性：

属性	说明
ExpansionPanelList
children	[]  集合
expansionCallback	回调
animationDuration	动画，默认kThemeAnimationDuration
ExpansionPanel
headerBuilder	标题
body	内容
isExpanded	闭合状态
canTapOnHeader	是否点击面板的标题将扩展/折叠它（true整个标题可点击，false只有三角图标可点击）

代码示例

Container(
  alignment: Alignment.center,
  child: Column(
    children: [
      ExpansionPanelList(
        children : [
          ExpansionPanel(
            headerBuilder:(context, isExpanded){
              return ListTile(
                title: Text('我是标题'),
              );
            },
            body: Padding(
              padding: EdgeInsets.fromLTRB(15, 0, 15, 15),
              child: ListBody(
                children: [
                  Card(
                    margin:EdgeInsets.fromLTRB(0, 0, 0, 10),
                    child: Padding(padding: EdgeInsets.all(8),child: Text('我是内容'),),
                  ),
                  Card(
                    margin:EdgeInsets.fromLTRB(0, 0, 0, 10),
                    child: Padding(padding: EdgeInsets.all(8),child: Text('我是内容'),),
                  ),
                  Card(
                    margin:EdgeInsets.fromLTRB(0, 0, 0, 10),
                    child: Padding(padding: EdgeInsets.all(8),child: Text('我是内容'),),
                  ),
                  Card(
                    margin:EdgeInsets.fromLTRB(0, 0, 0, 10),
                    child: Padding(padding: EdgeInsets.all(8),child: Text('我是内容'),),
                  ),
                  Card(
                    margin:EdgeInsets.fromLTRB(0, 0, 0, 10),
                    child: Padding(padding: EdgeInsets.all(8),child: Text('我是内容'),),
                  ),
                ],
              ),
            ),
            isExpanded: _isExpanded,
            canTapOnHeader: true,
          ),

        ],
        expansionCallback:(panelIndex, isExpanded){
          setState(() {
            _isExpanded = !isExpanded;
          });
        },
        animationDuration : kThemeAnimationDuration,
      ),
    ],
  ),
);

效果图

       

完整代码

查看完整代码