Flutter如何实现ExpansionTile组件

在Flutter中如何使用ExpansionTile组件实现可展开的列表项？我想在应用中添加一个类似FAQ的折叠功能，但不太清楚如何设置标题、子内容以及控制展开状态。能否提供一个完整的代码示例，并解释如何自定义箭头图标、添加动画效果或修改默认样式？另外，当多个ExpansionTile并存时，如何实现手风琴效果（只允许同时展开一个）？

2 回复

Flutter中通过ExpansionTile实现可展开列表项。包含title（标题）、children（展开内容）等属性。可自定义图标、背景色等。示例：

ExpansionTile(
  title: Text('标题'),
  children: [Text('内容')],
)

更多关于Flutter如何实现ExpansionTile组件的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


Flutter 中实现 ExpansionTile 组件非常简单，它是一个内置的 Material Design 可展开/折叠的列表项。以下是基本用法和关键属性：

基本实现代码

ExpansionTile(
  title: Text('标题'),
  children: <Widget>[
    ListTile(title: Text('子项1')),
    ListTile(title: Text('子项2')),
  ],
)

主要属性说明

  1. title（必需）：展开前的标题 Widget
  2. children：展开后显示的子 Widget 列表
  3. leading：标题前的图标
  4. trailing：自定义右侧箭头图标
  5. backgroundColor：展开时的背景色
  6. onExpansionChanged：展开/折叠状态回调
  7. initiallyExpanded：初始是否展开（默认false）

完整示例

ExpansionTile(
  leading: Icon(Icons.info),
  title: Text('更多信息'),
  backgroundColor: Colors.grey[100],
  children: [
    Padding(
      padding: EdgeInsets.all(16),
      child: Text('这里是详细内容...'),
    ),
  ],
  onExpansionChanged: (bool expanded) {
    print('当前状态: $expanded');
  },
)

注意事项

  • 通常用在 ListView 或 Column 中
  • 支持嵌套使用
  • 默认带有展开动画效果
  • 符合 Material Design 规范

这样就创建了一个可展开的列表项，点击标题区域即可切换展开/折叠状态。

回到顶部