如何创建扩展面板

Question

Here 是Expanded panel 的材料设计，看起来像：

我想用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

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

我有一个使用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,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 2

这是一个工作示例（包括 main 等，因此您可以粘贴到文件中并运行）

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

class ListItem {
  final WidgetBuilder bodyBuilder;
  final String title;
  final String subtitle;
  bool isExpandedInitially;

  ListItem({
    @required this.bodyBuilder,
    @required this.title,
    this.subtitle = "",
    this.isExpandedInitially = false,
  })  : assert(title != null),
        assert(bodyBuilder != null);

  ExpansionPanelHeaderBuilder get headerBuilder =>
      (context, isExpanded) => new Row(children: [
            new SizedBox(width: 100.0, child: new Text(title)),
            new Text(subtitle)
          ]);
}

class ExpansionList extends StatefulWidget {
  /// The items that the expansion list should display; this can change
  /// over the course of the object but probably shouldn't as it won't
  /// transition nicely or anything like that.
  final List<ListItem> items;

  ExpansionList(this.items) {
    // quick check to make sure there's no duplicate titles.
    assert(new Set.from(items.map((li) => li.title)).length == items.length);
  }

  @override
  State<StatefulWidget> createState() => new ExpansionListState();
}

class ExpansionListState extends State<ExpansionList> {
  Map<String, bool> expandedByTitle = new Map();

  @override
  Widget build(BuildContext context) {
    return new ExpansionPanelList(
      children: widget.items
          .map(
            (item) => new ExpansionPanel(
                headerBuilder: item.headerBuilder,
                body: new Builder(builder: item.bodyBuilder),
                isExpanded:
                    expandedByTitle[item.title] ?? item.isExpandedInitially),
          )
          .toList(growable: false),
      expansionCallback: (int index, bool isExpanded) {
        setState(() {
          expandedByTitle[widget.items[index].title] = !isExpanded;
        });
      },
    );
  }
}

void main() => runApp(
      new MaterialApp(
        home: new SingleChildScrollView(
          child: new SafeArea(
            child: new Material(
              child: new ExpansionList(
                [
                  new ListItem(
                      title: "Title 1",
                      subtitle: "Subtitle 1",
                      bodyBuilder: (context) => new Text("Body 1")),
                  new ListItem(
                      title: "Title 2",
                      subtitle: "Subtitle 2",
                      bodyBuilder: (context) => new Text("Body 1"),
                      isExpandedInitially: true)
                ],
              ),
            ),
          ),
        ),
      ),
    );

如果我不得不猜测，您会错过将扩展传递到每个扩展标头的部分，以及您跟踪每个扩展标头是否已扩展的部分。

我在这里采用了一种特殊的方式，假设每个标题都是唯一的；您可以做类似的事情，但依赖于不同的属性。或者，您可以在您的 ExpansionListState 等效项的 initState 方法中构建所有内容。

This 是一个完整的工作示例，几乎与您帖子中图片中的用户界面完全相同。您只需从 Play 商店下载flutter gallery 即可查看结果。他们的做法与我不同（在 initState 方法中构建所有内容），而且比我所做的更复杂，但也值得理解。

希望对您有所帮助 =)

Answer 3

您可以像这样在ListView 中使用ExpansionTile

        ListView(
              shrinkWrap: true,
              children: <Widget>[
                ExpansionTile(
                  backgroundColor: Colors.amber,
                  leading: Icon(Icons.event),
                  title: Text('Test1'),
                  children: <Widget>[
                    ListTile(title: Text('Title of the item')),
                    ListTile(
                      title: Text('Title of the item2'),
                    )
                  ],
                ),
                ExpansionTile(
                  title: Text('Test2'),
                  children: <Widget>[
                    ListTile(title: Text('Title of the item')),
                    ListTile(
                      title: Text('Title of the item2'),
                    )
                  ],
                )
              ],
            )