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

问题描述

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

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

我希望用户能够点击 header.IngridientHeader 然后网格小部件应该切换(如果可见则隐藏)

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

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

class ExpandedSection 扩展 StatefulWidget {最终的 Widget 子项；最终布尔扩展；ExpandedSection({this.expand = false, this.child});@覆盖_ExpandedSectionState createState() =>_ExpandedSectionState();}class _ExpandedSectionState extends State与 SingleTickerProviderStateMixin {动画控制器 expandController;动画<double>动画片;@覆盖无效的初始化状态(){super.initState();准备动画()；_runExpandCheck();}///设置动画无效准备动画(){展开控制器 = 动画控制器(垂直同步:这个，持续时间:持续时间(毫秒:500));动画 = 弯曲动画(父级:expandController，曲线:Curves.fastOutSlowIn，);}无效_runExpandCheck(){如果(小部件.展开){expandController.forward();}别的 {expandController.reverse();}}@覆盖void didUpdateWidget(ExpandedSection oldWidget) {super.didUpdateWidget(oldWidget);_runExpandCheck();}@覆盖无效处置(){expandController.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屋！