Flutter ExpansionPanel 收缩面板

知识共享许可协议 版权声明:署名,允许他人基于本文进行创作,且必须基于与原先许可协议相同的许可协议分发本文 (Creative Commons

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

参数详解

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

属性 说明

ExpansionPanelList

children <ExpansionPanel>[]  集合
expansionCallback 回调
animationDuration 动画,默认kThemeAnimationDuration

ExpansionPanel

headerBuilder 标题
body 内容
isExpanded 闭合状态
canTapOnHeader 是否点击面板的标题将扩展/折叠它(true整个标题可点击,false只有三角图标可点击)

代码示例

Container(
  alignment: Alignment.center,
  child: Column(
    children: <Widget>[
      ExpansionPanelList(
        children : <ExpansionPanel>[
          ExpansionPanel(
            headerBuilder:(context, isExpanded){
              return ListTile(
                title: Text('我是标题'),
              );
            },
            body: Padding(
              padding: EdgeInsets.fromLTRB(15, 0, 15, 15),
              child: ListBody(
                children: <Widget>[
                  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,
      ),
    ],
  ),
);

效果图

       

完整代码

查看完整代码

猜你喜欢

转载自blog.csdn.net/ruoshui_t/article/details/95064158