当用户 使用动画点击不同的小部件(同级或父级)时,如何展开和折叠小部件?
new Column( children: <Widget>[ new header.IngridientHeader( new Icon( Icons.fiber_manual_record, color: AppColors.primaryColor ), 'Voice Track 1' ), new Grid() ], )
我希望用户能够点击header.IngridientHeader,然后切换Grid小部件(如果可见和其他方式隐藏)
编辑:
即时通讯试图做的事情在引导中称为崩溃。getbootstrap.com /docs/4.0/components/collapse
编辑2:header.IngridientHeader应该始终在Grid()可滚动(水平)小部件的所有位置上。scrollable ( horizontal ) widget.
如果你想折叠小部件零高度,或者有一个孩子零宽度倒塌溢出的时候,我会建议 SizeTransition 或ScaleTransition 。
这是一个ScaleTransition小部件的示例,该小部件用于折叠 四个黑色按钮和状态文本的容器。我的ExpandedSection 小部件与一列一起使用,以获取以下结构。ScaleTransition小部件的示例
一个将动画与SizeTransition小部件一起使用的小部件的示例:
class ExpandedSection extends StatefulWidget { final Widget child; final bool expand; ExpandedSection({this.expand = false, this.child}); @override _ExpandedSectionState createState() => _ExpandedSectionState(); } class _ExpandedSectionState extends State<ExpandedSection> with SingleTickerProviderStateMixin { AnimationController expandController; Animation<double> animation; @override void initState() { super.initState(); prepareAnimations(); _runExpandCheck(); } ///Setting up the animation void prepareAnimations() { expandController = AnimationController( vsync: this, duration: Duration(milliseconds: 500) ); animation = CurvedAnimation( parent: expandController, curve: Curves.fastOutSlowIn, ); } void _runExpandCheck() { if(widget.expand) { expandController.forward(); } else { expandController.reverse(); } } @override void didUpdateWidget(ExpandedSection oldWidget) { super.didUpdateWidget(oldWidget); _runExpandCheck(); } @override void dispose() { expandController.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return SizeTransition( axisAlignment: 1.0, sizeFactor: animation, child: widget.child ); } }
AnimatedContainer 也可以工作,但是如果不能将孩子的大小调整为零宽度或零高度,Flutter可能会抱怨溢出。