是一个用于创建可展开面板列表的Flutter小部件。它提供了一种方便的方式来显示可折叠的面板,每个面板都可以包含标题和内容。
ExpansionPanelList小部件具有以下特点:
以下是一个示例代码,演示如何使用ExpansionPanelList小部件:
import 'package:flutter/material.dart';
class MyExpansionPanelList extends StatefulWidget {
@override
_MyExpansionPanelListState createState() => _MyExpansionPanelListState();
}
class _MyExpansionPanelListState extends State<MyExpansionPanelList> {
List<Item> _items = generateItems(5);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Expansion Panel List'),
),
body: SingleChildScrollView(
child: Container(
padding: EdgeInsets.all(16.0),
child: ExpansionPanelList(
elevation: 1,
expandedHeaderPadding: EdgeInsets.all(0),
expansionCallback: (int index, bool isExpanded) {
setState(() {
_items[index].isExpanded = !isExpanded;
});
},
children: _items.map<ExpansionPanel>((Item item) {
return 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(MyExpansionPanelList());
}
此示例创建了一个包含5个可展开面板的ExpansionPanelList。每个面板都有一个标题和内容,用户可以点击标题来展开或折叠面板内容。
更多关于ExpansionPanelList的信息和使用示例,请参考腾讯云Flutter官方文档:ExpansionPanelList
领取专属 10元无门槛券
手把手带您无忧上云