dart - 如何创建展开面板

Question

Here是 Expanded panel 的 Material 设计，看起来像:

我想用 Flutter 做一个类似的，不确定我是否必须从下面的代码开始或知道如何完成它!

new ExpansionPanelList(
  children: <ExpansionPanel>[
    new ExpansionPanel(
      headerBuilder: (BuildContext context, bool isExpanded) {
            isExpanded = true;
            return new ListTile(
            // leading: item.iconpic,
            title: new Text(
            "First",
            textAlign: TextAlign.left,
            style: new TextStyle(
            fontSize: 20.0,
            fontWeight: FontWeight.w400,
            ),
            ));
          },
      body: new Text("school"),
      isExpanded: true,
    ),
    new ExpansionPanel(
      headerBuilder: (BuildContext context, bool isExpanded) {
        isExpanded = true;
        return new ListTile(
          // leading: item.iconpic,
            title: new Text(
              "Second",
              textAlign: TextAlign.left,
              style: new TextStyle(
                fontSize: 20.0,
                fontWeight: FontWeight.w400,
              ),
            ));
      },
      isExpanded: false,
      body: new Text("hospital"),
    ),
    new ExpansionPanel(
        headerBuilder: (BuildContext context, bool isExpanded) {
          isExpanded = true;
          return new ListTile(
            // leading: item.iconpic,
              title: new Text(
                "Third",
                textAlign: TextAlign.left,
                style: new TextStyle(
                  fontSize: 20.0,
                  fontWeight: FontWeight.w400,
                ),
              ));
        },
        body: new Text("va facility"),
        isExpanded: true)
    ]),

更新

我只需要开始并拥有空白面板

Answer 1

如果您特别需要模仿您从 Material 设计中引用的图像。您可能想要构建自己的自定义扩展面板。

我有一个使用 AnimatedContainer 的简单示例向您展示如何创建展开和折叠效果，您可以根据需要填充页眉和正文部分。

class AnimateExpanded extends StatefulWidget {
  @override
  _AnimateExpandedState createState() => new _AnimateExpandedState();
}

class _AnimateExpandedState extends State<AnimateExpanded> {
  double _bodyHeight = 0.0;

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      backgroundColor: Colors.grey[500],
      body: new SingleChildScrollView(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new Card(
              child: new Container(
                height: 50.0,
                child: new Row(
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: <Widget>[
                    new IconButton(
                      icon: new Icon(Icons.keyboard_arrow_down),
                      onPressed: () {
                        setState(() {
                          this._bodyHeight = 300.0;
                        });
                      },
                    )
                  ],
                ),
              ),
            ),
            new Card(
              child: new AnimatedContainer(
                child: new Row(
                  mainAxisAlignment: MainAxisAlignment.end,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    new IconButton(
                      icon: new Icon(Icons.keyboard_arrow_up),
                      onPressed: () {
                        setState(() {
                          this._bodyHeight = 0.0;
                        });
                      },
                    ),
                  ],
                ),
                curve: Curves.easeInOut,
                duration: const Duration(milliseconds: 500),
                height: _bodyHeight,
                // color: Colors.red,
              ),
            ),
          ],
        ),
      ),
    );
  }
}