Laomeng Guide: the Flutter component has a big feature, that is, many complex components are assembled by one small component. Today, I'll talk about how to realize the ExpansionPanelList of the system.
Before understanding the ExpansionPanelList implementation, let's first understand the MergeableMaterial, which shows multiple mergeablematerialtitem components. When the sub components change, open or close the sub components in an animated way. The parent control of MergeableMaterial needs to be an unrestricted control in the direction of the main axis, such as SingleChildScrollView, Row, Column, etc.
The basic usage is as follows:
SingleChildScrollView( child: MergeableMaterial( children: [ MaterialSlice( key: ValueKey(1), child: Container( height: 45, color: Colors.primaries[1 % Colors.primaries.length], )), MaterialGap(key: ValueKey(2)), MaterialSlice( key: ValueKey(3), child: Container( height: 45, color: Colors.primaries[1 % Colors.primaries.length], )), MaterialGap(key: ValueKey(4)), MaterialSlice( key: ValueKey(5), child: Container( height: 45, color: Colors.primaries[1 % Colors.primaries.length], )), ], ), )
The effect is as follows:
The sub control of MergeableMaterial can only be MaterialSlice and MaterialGap. MaterialSlice is a control with sub control. It displays the actual content. MaterialGap is used for segmentation and can only be placed in the middle of MaterialSlice.
In the static case, no specific effect can be seen. The usage of dynamic change sub components is as follows:
List<MergeableMaterialItem> items = []; List.generate(_count, (index) { items.add(MaterialSlice( key: ValueKey(index * 2), child: Container( height: 45, color: Colors.primaries[index % Colors.primaries.length], ))); }); return SingleChildScrollView( child: MergeableMaterial( children: items, ), )
The effect is as follows:
It mainly focuses on the animation effect when adding / deleting sub components.
Add split lines and shadows:
MergeableMaterial( hasDividers: true, elevation: 24, children: items, )
The effect is as follows:
Shadow value cannot be set casually, only the following values can be set: 1, 2, 3, 4, 6, 8, 9, 12, 16, 24
What effect can this control achieve? See the following effect:
Implementation code:
bool _expand = false; @override Widget build(BuildContext context) { return Column( children: <Widget>[ Container( height: 45, color: Colors.green.withOpacity(.3), alignment: Alignment.centerRight, child: IconButton( icon: Icon(Icons.arrow_drop_down), onPressed: () { setState(() { _expand = !_expand; }); }, ), ), _expand ? MergeableMaterial( hasDividers: true, elevation: 24, children: [ MaterialSlice( key: ValueKey(1), child: Container( height: 200, color: Colors.green.withOpacity(.3), )) ], ) : Container(), Container( height: 45, color: Colors.red.withOpacity(.3), ), ], ); }
Do you think of ExpansionPanelList when you see this effect? The system control ExpansionPanelList is implemented with this control.
Communication
Address of laomeng Flutter blog (nearly 200 controls usage): http://laomengit.com
Welcome to Flutter exchange group (WeChat: laomengit) and official account [Lao Meng Flutter]:
