Flutter ExpansionPanel 收缩面板

最新推荐文章于 2025-09-07 13:36:30 发布

原创最新推荐文章于 2025-09-07 13:36:30 发布 · 9.8k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#Flutter ExpansionPanel 收缩面板 #Flutter 收缩面板 #Flutter ExpansionPanel #Flutter ExpansionPanelList

Flutter 基础专栏收录该内容

73 篇文章

订阅专栏

博客介绍了Flutter收缩面板，它有标题和正文，可展开或折叠，正文仅展开时可见，且仅作为ExpansionPanelList子级。还对ExpansionPanelList和ExpansionPanel的属性进行参数详解，给出代码示例、效果图及完整代码。

收缩面板。它有一个标题和一个正文，可以展开或折叠。面板的正文主体仅在展开时可见。
收缩面板仅用作为 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,
      ),
    ],
  ),
);