Flutter如何实现折叠面板折叠后更换样式

在Flutter中，我想实现一个折叠面板（ExpansionPanel），当面板折叠时能够自动切换样式（比如改变标题颜色、图标或背景）。目前使用ExpansionPanelList只能通过isExpanded控制展开状态，但折叠后的样式和展开时完全一致。请问如何监听折叠状态变化，并在折叠时动态修改面板的样式？是否有推荐的做法或第三方库可以实现这个效果？

2 回复

Flutter中可使用ExpansionPanelList实现折叠面板。折叠后通过ExpansionPanel的isExpanded属性判断状态，在headerBuilder或body中动态修改样式，例如改变颜色、图标或布局。

更多关于Flutter如何实现折叠面板折叠后更换样式的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，可以通过ExpansionPanelList和ExpansionPanel实现折叠面板，并通过headerBuilder和body属性控制折叠前后的样式变化。

实现步骤：

  1. 使用ExpansionPanelList包裹ExpansionPanel
  2. 在ExpansionPanel中：
    • headerBuilder：构建面板标题（折叠/展开时都显示）
    • body：展开时显示的内容
  3. 通过isExpanded状态控制展开/折叠
  4. 在headerBuilder中根据isExpanded参数切换不同样式

示例代码：

class ExpandablePanelDemo extends StatefulWidget {
  @override
  _ExpandablePanelDemoState createState() => _ExpandablePanelDemoState();
}

class _ExpandablePanelDemoState extends State<ExpandablePanelDemo> {
  List<Item> _data = [Item(header: '标题', expanded: false)];

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: ExpansionPanelList(
        expansionCallback: (int index, bool isExpanded) {
          setState(() {
            _data[index].expanded = !isExpanded;
          });
        },
        children: _data.map<ExpansionPanel>((Item item) {
          return ExpansionPanel(
            headerBuilder: (BuildContext context, bool isExpanded) {
              // 根据折叠状态切换标题样式
              return ListTile(
                title: Text(
                  item.header,
                  style: TextStyle(
                    color: isExpanded ? Colors.blue : Colors.grey,
                    fontWeight: isExpanded ? FontWeight.bold : FontWeight.normal,
                  ),
                ),
                leading: Icon(
                  isExpanded ? Icons.arrow_drop_up : Icons.arrow_drop_down,
                  color: isExpanded ? Colors.blue : Colors.grey,
                ),
              );
            },
            body: ListTile(
              title: Text('展开后显示的内容'),
              subtitle: Text('详细信息...'),
            ),
            isExpanded: item.expanded,
          );
        }).toList(),
      ),
    );
  }
}

// 数据模型
class Item {
  Item({required this.header, required this.expanded});
  String header;
  bool expanded;
}

关键点说明：

  • headerBuilder中的isExpanded参数可判断当前面板状态
  • 通过条件判断动态改变文字颜色、图标、字体粗细等样式
  • 使用setState更新展开状态触发UI重绘

这样即可实现折叠面板在折叠/展开时显示不同的标题样式。

回到顶部