Flutter ExpansionPanel是一个可折叠面板的小部件,用于在用户点击时展开或折叠内容。然而,由于ListView是一个滚动小部件,它的子项在滚动时会被回收和重建,这导致ExpansionPanel的状态无法正确保存。
解决这个问题的一种方法是使用ExpansionPanelList,它是专门为可折叠面板设计的小部件。ExpansionPanelList可以与ListView一起使用,以实现在ListView上扩展的效果。
以下是使用ExpansionPanelList的示例代码:
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。
领取专属 10元无门槛券
手把手带您无忧上云