如何在颤动中为折叠元素设置动画 [英] how to animate collapse elements in flutter

问题描述

当用户点击带有动画的不同小部件(兄弟或父)时，我如何展开和折叠小部件?

新列(孩子们:<小部件>[新标头.IngridientHeader(新图标(Icons.fiber_manual_record,颜色:AppColors.primaryColor),'音轨 1'),新网格()],)

我希望用户能够点击 header.IngridientHeader 然后 Grid 小部件应该切换(如果可见则隐藏或其他方式)

我正在尝试做一些在引导程序中称为 Collapse 的事情.

通过 SizeTransition 小部件使用动画的小部件示例:

类 ExpandedSection 扩展 StatefulWidget {最后的小部件子；最终布尔扩展；ExpandedSection({this.expand = false, this.child});@覆盖_ExpandedSectionState createState() =>_ExpandedSectionState();}class _ExpandedSectionState 扩展状态<ExpandedSection>与 SingleTickerProviderStateMixin {动画控制器展开控制器；动画<双重>动画片;@覆盖无效初始化状态(){super.initState();准备动画()；_runExpandCheck();}///设置动画无效准备动画(){展开控制器 = 动画控制器(垂直同步:这个，持续时间:持续时间(毫秒:500));动画 = 曲线动画(父:扩展控制器，曲线:Curves.fastOutSlowIn，);}无效 _runExpandCheck() {如果(widget.expand){expandController.forward();}别的 {expandController.reverse();}}@覆盖无效 didUpdateWidget(ExpandedSection oldWidget) {super.didUpdateWidget(oldWidget);_runExpandCheck();}@覆盖无效处置(){expandController.dispose();super.dispose();}@覆盖小部件构建(BuildContext 上下文){返回尺寸转换(轴对齐:1.0，sizeFactor:动画，孩子:widget.child);}}

AnimatedContainer 也可以，但是如果子级 Flutter 会抱怨溢出不能调整到零宽度或零高度.

How can i expand and collapse widget when user taps on different widget ( sibling or parent ) with animation ?

new Column(
    children: <Widget>[
        new header.IngridientHeader(
            new Icon(
                Icons.fiber_manual_record,
                color: AppColors.primaryColor
            ),
            'Voice Track 1'
        ),
        new Grid()
    ],
)

I want user to be able to tap on header.IngridientHeader and then Grid widget should toggle ( hide if visible and other way around )

edit:

im trying to do something that in bootstrap is called Collapse. getbootstrap.com/docs/4.0/components/collapse

edit 2: header.IngridientHeader should stay in place all the time Grid() is scrollable ( horizontal ) widget.

解决方案

If you want to collapse a widget to zero height or zero width that has a child that overflow when collapsed, I would recommend SizeTransition or ScaleTransition.

Here is an example of the ScaleTransition widget being used to collapse the container for the four black buttons and status text. My ExpandedSection widget is used with a column to get the following structure.

An example of a Widget that use animation with the SizeTransition widget:

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 also works but Flutter can complain about overflow if the child is not resizable to zero width or zero height.

这篇关于如何在颤动中为折叠元素设置动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！