Flutter ExpansionPanel组件(可收缩的列表)
可以展开或者收缩的面板组件,收缩面板组件效果由ExpansionPanelList组件和ExpansionPanel组件共同完成。
ExpansionPanelList属性说明
属性 | 说明 |
---|---|
children | 子元素 |
expansionCallback | 设置回调事件 |
ExpansionPanel
属性 | 说明 |
---|---|
headerBuilder | 收缩的标题 |
body | 内容 |
isExpanded | 设置内容 |
ExpansionPanel的body要求有高度,所以使用了Container。
class MyState extends State {late List<Widget> cards = [];late bool flag = true;Widget build(BuildContext context) {Container container = Container(padding: EdgeInsets.all(10),child: Card(child: ListTile(title: Text("08:00"),subtitle: Text("每天"),onTap: () {},),),);cards.add(container);cards.add(container);cards.add(container);cards.add(container);cards.add(container);return Scaffold(appBar: AppBar(title: Text(""), centerTitle: true),body: Column(children: [ExpansionPanelList(children: [ExpansionPanel(headerBuilder: (context, isExpanded) {return Text("水果");},body: Container(height: MediaQuery.of(context).size.height * 0.5,width: MediaQuery.of(context).size.width,child: ListView(children: cards),),isExpanded: flag,),],expansionCallback: (panelIndex, isExpanded) {setState(() {flag = isExpanded;});},),],),);}
}