如何在flutter中添加ExpansionPanelList之间的间隙

Question

在flutter中，我正在尝试创建一个ExpansionPanelList，我想在扩展瓦片之间添加空间。有人能帮我拿这个吗

这是我使用过的代码：

@override
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: ExpansionPanelList.radio(
children: items
.map(
(e) => ExpansionPanelRadio(
canTapOnHeader: true,
value: e.header,
headerBuilder: (context, isExpanded) => ListTile(
title: Text(
e.header,
style: const TextStyle(fontSize: 20),
),
),
body: ListTile(
title:
Text(e.body, style: const TextStyle(fontSize: 20)),
)),
)
.toList(),
),
),
),
);
}

class Item {
final String header;
final String body;
Item({
required this.header,
required this.body,
});
}

Answer 1

您可以在ListView小部件中使用ExpansionTile，而不是ExpansionPanelList小部件。

完整示例：

main() {
runApp(const MaterialApp(home: MyApp()));
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
final List<Item> items = List.generate(
5, (index) => Item(header: 'header$index', body: 'body$index'));
return ListView.builder(
itemBuilder: (BuildContext context, int index) => Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: _buildTiles(items[index]),
),
itemCount: items.length,
);
}
Widget _buildTiles(Item item) {
return Card(
child: ExpansionTile(
key: ValueKey(item),
title: ListTile(
title: Text(
item.header,
style: const TextStyle(fontSize: 20),
),
),
children: [
ListTile(
title: Text(item.body, style: const TextStyle(fontSize: 20)),
)
],
),
);
}
}
class Item {
final String header;
final String body;
Item({
required this.header,
required this.body,
});
}

Answer 2

(1(将ExpansionPanleRadio包裹在填充中，只放底部填充。

(2( 检查它是否具有margin属性。

Answer 3

1. 实际上，你做不到。当展开列表折叠时，不能在ExpansionPanelRadio之间设置空间。ExpansionPanelRadio中的参数有限，没有裕度参数

2. 此外，您不能将ExpansionPanelRadio包装在Padding中，因为ExpansionPanelList.radio children必须是List<ExpansionPanelRadio>。所以，我不建议自定义它。它需要很多努力。

我建议使用https://pub.dev/packages/accordion插件。它可以让您完全控制您的扩展列表，而且使用起来很方便。

以下是使用此插件时的样子：

https://raw.githubusercontent.com/GotJimmy/accordion/master/assets/accordion_demo.gif

玩得开心TT