Flutter ExpansionPanel 超级实用展开控件
Flutter ExpansionPanel 超级实用展开控件
在实际业务开发过程中，或多或少会遇到树形控件的需求。
最简单的需求比如 QQ 联系人的分组：
类似于这种，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 配合使用。
那我们点进源码看一下构造函数：
ExpansionPanel({
@required this.headerBuilder,
@required this.body,
this.isExpanded = false,
this.canTapOnHeader = false,
}) : assert(headerBuilder != null),
assert(body != null),
assert(isExpanded != null),
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 展开面板列表，用于设置其子项并为展开设置动画。
然后打开源码查看构造函数：
const ExpansionPanelList({
Key key,
this.children = const <ExpansionPanel>[],
this.expansionCallback,
this.animationDuration = kThemeAnimationDuration,
}) : assert(children != null),
assert(animationDuration != null),
_allowOnlyOnePanelOpen = false,
initialOpenPanelValue = null,
super(key: key);需要我们使用的也就三个参数：
- children：不用多说，就是 ExpansionPanel
- expansionCallback：展开回调，这里会返回点击的 index
- animationDuration：动画的时间
基本上看完构造函数，我们也就知道该怎么去写代码了，那官方也提供给我们了一个 Demo。
官方Demo
效果如下：
来看下代码：
class Item {
Item({
this.expandedValue,
this.headerValue,
this.isExpanded = false,
});
String expandedValue;
String headerValue;
bool isExpanded;
}
List<Item> generateItems(int numberOfItems) {
return List.generate(numberOfItems, (int index) {
return Item(
headerValue: 'Panel $index',
expandedValue: 'This is item number $index',
);
});
}
class ExpansionPanelPage extends StatefulWidget {
ExpansionPanelPage({Key key}) : super(key: key);
@override
_ExpansionPanelPageState createState() => _ExpansionPanelPageState();
}
class _ExpansionPanelPageState extends State<ExpansionPanelPage> {
List<Item> _data = generateItems(8);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('ExpansionPanelPage'),
),
body: SingleChildScrollView(
child: Container(
child: _buildPanel(),
),
),
);
}
Widget _buildPanel() {
return ExpansionPanelList(
expansionCallback: (int index, bool isExpanded) {
setState(() {
_data[index].isExpanded = !isExpanded;
});
},
children: _data.map<ExpansionPanel>((Item item) {
return ExpansionPanel(
headerBuilder: (BuildContext context, bool isExpanded) {
return ListTile(
title: Text(item.headerValue),
);
},
body: ListTile(
title: Text(item.expandedValue),
subtitle: Text('To delete this panel, tap the trash can icon'),
trailing: Icon(Icons.delete),
onTap: () {
setState(() {
_data.removeWhere((currentItem) => item == currentItem);
});
}),
isExpanded: item.isExpanded,
);
}).toList(),
);
}
}从上往下看。
Item
首先定义了一个 Item 类，里面包含了：
- expandedValue：展开的值
- headerValue：header的值
- isExpanded：是否已经展开
generateItems
生成指定数量的 Item
_ExpansionPanelPageState
重点来了，看build 方法：
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('ExpansionPanelPage'),
),
body: SingleChildScrollView(
child: Container(
child: _buildPanel(),
),
),
);
}_buildPanel()方法就是根据 Item 的数量生成一个 ExpansionPanelList。
那为什么要用 SingleChildScrollView 包起来？
我们先把 SingleChildScrollView 去掉来看一下效果：
发现什么都没有了，看一下log：
flutter: The following assertion was thrown during performLayout(): flutter: RenderListBody must have unlimited space along its main axis. flutter: RenderListBody does not clip or resize its children, so it must be placed in a parent that does not flutter: constrain the main axis. You probably want to put the RenderListBody inside a RenderViewport with a matching main axis.
大致意思就是说：
RenderListBody所在的主轴必须要有无线的空间，因为RenderListBody 要不断的调整children 的大小，所以必须把它放在不约束主轴的 parent 中。
在上面的gif图我们也能看出来，只有点击箭头才能展开，如果想要点击 header 也要展开的话，
使用 ExpansionPanel 的 canTapOnHeader 参数：
ExpansionPanel(
canTapOnHeader: true,
headerBuilder: xxx,
body: xxx;
)效果如下：
body is ListView
在我们实际业务中，可能最多的业务为展开是一个列表，那需要 body 是ListView。
其实和官方Demo差不多，需要注意的一点就是 shrinkWrap & physics 这两个字段：
return ListView.builder(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
);只能展开一个
有时我们也会遇到只能展开一个，点击其他的时候要关闭已经展开的。
效果如下：
代码如下，需使用 ExpansionPanelList.radio：
Widget _buildPanel() {
return ExpansionPanelList.radio(
expansionCallback: (int index, bool isExpanded) {
setState(() {
_data[index].isExpanded = !isExpanded;
});
},
children: _data.map<ExpansionPanel>((Item item) {
return ExpansionPanelRadio(
canTapOnHeader: true,
headerBuilder: (BuildContext context, bool isExpanded) {
return ListTile(
title: Text(item.headerValue),
);
},
body: ListTile(
title: Text(item.expandedValue),
subtitle: Text('To delete this panel, tap the trash can icon'),
trailing: Icon(Icons.delete),
onTap: () {
setState(() {
_data.removeWhere((currentItem) => item == currentItem);
});
}),
value: item.headerValue,
);
}).toList(),
);
}ExpansionPanelList.radio 的 children 也需要改变为： ExpansionPanelRadio。
ExpansionPanelRadio 和 ExpansionPanel 的区别就是一个 value。
ExpansionPanelRadio 是用 value 来区分的，所以每一个要是唯一的。
总结
使用 ExpansionPanel 可以很轻松的实现展开效果，
而且 ExpansionPanelList 返回的是一个 MergeableMaterial，
所以想自定义UI的，也可以自己实现。
完整代码已经传至GitHub：https://github.com/wanglu1209/WFlutterDemo