首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Flutter ExpansionPanel不能在ListView上扩展

Flutter ExpansionPanel是一个可折叠面板的小部件,用于在用户点击时展开或折叠内容。然而,由于ListView是一个滚动小部件,它的子项在滚动时会被回收和重建,这导致ExpansionPanel的状态无法正确保存。

解决这个问题的一种方法是使用ExpansionPanelList,它是专门为可折叠面板设计的小部件。ExpansionPanelList可以与ListView一起使用,以实现在ListView上扩展的效果。

以下是使用ExpansionPanelList的示例代码:

代码语言:txt
复制
class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  List<Item> _data = generateItems(5);

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: _data.map<Widget>((Item item) {
        return ExpansionPanelList(
          elevation: 1,
          expandedHeaderPadding: EdgeInsets.all(0),
          expansionCallback: (int index, bool isExpanded) {
            setState(() {
              item.isExpanded = !isExpanded;
            });
          },
          children: [
            ExpansionPanel(
              headerBuilder: (BuildContext context, bool isExpanded) {
                return ListTile(
                  title: Text(item.headerValue),
                );
              },
              body: ListTile(
                title: Text(item.expandedValue),
              ),
              isExpanded: item.isExpanded,
            ),
          ],
        );
      }).toList(),
    );
  }
}

class Item {
  Item({
    required this.expandedValue,
    required this.headerValue,
    this.isExpanded = false,
  });

  String expandedValue;
  String headerValue;
  bool isExpanded;
}

List<Item> generateItems(int numberOfItems) {
  return List<Item>.generate(numberOfItems, (int index) {
    return Item(
      headerValue: 'Panel $index',
      expandedValue: 'This is item number $index',
    );
  });
}

在这个示例中,我们使用ExpansionPanelList来创建一个可折叠面板的列表。每个面板由ExpansionPanel组成,其中包含一个标题和一个内容部分。通过设置isExpanded属性,我们可以控制面板的展开和折叠状态。

这是一个简单的示例,你可以根据自己的需求进行修改和扩展。如果你想了解更多关于Flutter ExpansionPanelList的信息,可以查看腾讯云的Flutter开发文档:ExpansionPanelList

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券