如何为扑中的倒塌元素制作动画

如何为扑中的倒塌元素制作动画,第1张

如何为扑中的倒塌元素制作动画

如果你想折叠小部件零高度,或者有一个孩子零宽度倒塌溢出的时候,我会建议
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可能会抱怨溢出。



欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/4894248.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-11-12
下一篇 2022-11-12

发表评论

登录后才能评论

评论列表(0条)

保存