flutter 动画展开菜单_Flutter ExpansionPanel 超级实用展开控件

在实际业务开发过程中，或多或少会遇到树形控件的需求。

最简单的需求比如 联系人的分组：

类似于这种，Flutter 给我们提供了相当便捷的 UI 组件 ExpansionPanel。

ExpansionPanel

看名字也能看出来，是一个"扩展面板"。

那按照惯例，我们首先打开官网，查看一下它的说明：

A material expansion panel. It has a header and a body and can be either expanded or collapsed. The body of the panel is only visible when it is expanded.

Expansion panels are only intended to be used as children for ExpansionPanelList.

一个material 扩展面板。它有一个 header 和一个 body ，可以展开或折叠。面板的 body 仅在展开时可见。

扩展面板仅用作于 ExpansionPanelList。

看说明也就能明白了，它不单独使用，只能和 ExpansionPanelList 配合使用。

那我们点进源码看一下构造函数：

1. `ExpansionPanel({`

2. `@required this.headerBuilder,`

3. `@required this.body,`

4. `this.isExpanded = false,`

5. `this.canTapOnHeader = false,`

6. `}) : assert(headerBuilder != null),`

7. `assert(body != null),`

8. `assert(isExpanded != null),`

9. `assert(canTapOnHeader != null);`

一共有四个参数：

headerBuilder：header

body：body

isExpanded：是否展开

canTapOnHeader：header是否可以点击

看完了 ExpansionPanel 的构造函数，下面就看一下 ExpansionPanelList 。

ExpansionPanelList

照例先看它的介绍：

A material expansion panel list that lays out its children and animates expansions.

material 展开面板列表，用于设置其子项并为展开设置动画。

然后打开源码查看构造函数：

1. `const ExpansionPanelList({`

2. `Key key,`

3. `this.children = const [],`

4. `this.expansionCallback,`

5. `this.animationDuration = kThemeAnimationDuration,`

6. `}) :