如何为扑中的倒塌元素设置动画 [英] how to animate collapse elements in flutter

问题描述

当用户点击带有动画的其他窗口小部件（同级或父级）时，如何展开和折叠窗口小部件？

 新列（
子级：< Widget> [
新标题。IngridientHeader（
新的Icon（
 Icons.fiber_manual_record，
颜色：AppColors.primaryColor 
），
'语音轨道1'
），
新的Grid（） 
]，
）
  

我希望用户能够点击标题.IngridientHeader和Grid小部件应进行切换（如果可见以及其他方式，则进行隐藏）

edit：

im尝试在引导程序中执行的操作称为崩溃。

与SizeTransition小部件一起使用动画的小部件示例：

  class ExpandedSection扩展StatefulWidget {
 
最终的Widget子对象； 
的最终bool扩展； 
 ExpandedSection（{this.expand = false，this.child}）; 
 
 @override 
 _ExpandedSectionState createState（）=> _ExpandedSectionState（）; 
} 
 
 class _ExpandedSectionState扩展State< ExpandedSection>使用SingleTickerProviderStateMixin {
 AnimationController expandController; 
 Animation< double>动画; 
 
 @override 
 void initState（）{
 super.initState（）; 
 prepareAnimations（）; 
 _runExpandCheck（）; 
} 
 
 ///设置动画
 void prepareAnimations（）{
 expandController = AnimationController（
 vsync：this，
 duration ：持续时间（毫秒：500）
）； 
 animation = CurvedAnimation（
父级：expandController，
曲线：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 
窗口小部件build（BuildContext context）{
 return SizeTransition（
 axisAlignment：1.0，
 sizeFactor：animation，
 child：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屋！