可以展開或者收縮的面板組件,收縮面板組件效果由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;});},),],),);}
}