Flutter ExpansionPanel组件(可收缩的列表)

可以展开或者收缩的面板组件，收缩面板组件效果由ExpansionPanelList组件和ExpansionPanel组件共同完成。

ExpansionPanelList属性说明

ExpansionPanel

ExpansionPanel的body要求有高度，所以使用了Container。

class MyState extends State {
  late List<Widget> cards = [];

  late bool flag = true;

  @override
  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;
              });
            },
          ),
        ],
      ),
    );
  }
}