您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

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

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

如果你想折叠小部件零高度,或者有一个孩子零宽度倒塌溢出的时候,我会建议SizeTransitionScaleTransition

这是一个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可能会抱怨溢出。

其他 2022/1/1 18:15:38 有476人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶