在Flutter中,可以使用ExpansionTile小部件来创建可折叠的列表。ExpansionTile小部件是一个带有标题和内容的可展开/折叠小部件。当用户点击标题时,内容部分会展开或折叠。
要在颤动中折叠其他ExpansionTile元素,可以使用ExpansionPanelList小部件。ExpansionPanelList小部件是一个带有多个ExpansionPanel的列表,每个ExpansionPanel都可以展开或折叠。
下面是一个示例代码,演示如何在颤动中折叠其他ExpansionTile元素:
import 'package:flutter/material.dart';
class MyExpansionPanelList extends StatefulWidget {
@override
_MyExpansionPanelListState createState() => _MyExpansionPanelListState();
}
class _MyExpansionPanelListState extends State<MyExpansionPanelList> {
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;
_data.forEach((otherItem) {
if (otherItem != item) {
otherItem.isExpanded = false;
}
});
});
},
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',
);
});
}
void main() {
runApp(MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Expansion Panel List'),
),
body: MyExpansionPanelList(),
),
));
}
在这个示例中,我们创建了一个MyExpansionPanelList小部件,它继承自StatefulWidget。在build方法中,我们使用ListView来显示ExpansionPanelList的列表。每个ExpansionPanelList都有一个expansionCallback回调函数,用于处理展开/折叠事件。在回调函数中,我们更新数据源中的isExpanded属性,并将其他ExpansionPanel的isExpanded属性设置为false,以实现在颤动中折叠其他ExpansionTile元素的效果。
这只是一个简单的示例,你可以根据自己的需求进行修改和扩展。希望对你有帮助!
领取专属 10元无门槛券
手把手带您无忧上云