老孟导读:本文由共建组织行云流水提供。在这里特别感谢我们共建组织的成员,完成了近20篇高质量的文章,如果您也希望加入我们,欢迎私信我,也可以到 老孟Flutter 网站:http://laomengit.com/plan/build_plan.html 查看详情。
Flow
流式小部件,同类型的有Wrap,Row等,Flow的特点是可以调整子组件的位置和大小,结合Matrix4绘制出各种酷炫的效果。
Flow({
Key key, @required FlowDelegate delegate, //继承FlowDelegate的管理类,来控制子组件的定位 List children: const [] //可放多个子组件})
Flow仅有2个属性,
children
表示子控件,
delegate
是调整子组件的位置和大小,需要自定义。
水平展开/收起菜单
使用Flow实现水平展开/收起菜单的功能,代码如下:
class DemoFlowPopMenu extends StatefulWidget {
@override _DemoFlowPopMenuState createState() => _DemoFlowPopMenuState();}class _DemoFlowPopMenuState extends State<DemoFlowPopMenu> with SingleTickerProviderStateMixin {
//动画必须要with这个类 AnimationController _ctrlAnimationPopMenu; //定义动画的变量 IconData lastTapped = Icons.notifications; final List menuItems = [ //菜单的icon Icons.home, Icons.new_releases, Icons.notifications, Icons.settings, Icons.menu, ]; void _updateMenu(IconData icon) {
if (icon != Icons.menu) {
setState(() => lastTapped = icon); } else {
_ctrlAnimationPopMenu.status == AnimationStatus.completed ? _ctrlAnimationPopMenu.reverse() //展开和收拢的效果 : _ctrlAnimationPopMenu.forward(); } } @override void initState() {
super.initState(); _ctrlAnimationPopMenu = AnimationController( //必须初始化动画变量 duration: const Durat