使用动画在颤动中单击按钮时创建小部件答案

【问题标题】：Creating a widget upon clicking a button in flutter using animation使用动画在颤动中单击按钮时创建小部件
【发布时间】：2021-05-06 13:20:53
【问题描述】：

我是 Flutter 的新手，我有一个搜索字段，点击后它应该会扩展到另一个输入字段。我已经完成了，但是在单击搜索字段时会重新创建小部件。

如您所见，我希望这些字段通过动画很好地打开，使其看起来不错。你有什么建议吗？

【问题讨论】：

标签： flutter flutter-dependencies flutter-animation

【解决方案1】：

您可以将第二个 TextField 包装在 AnimatedContainer 中（或在 SizeTransition 中，但您必须使用 AnimationController）。如果您使用 AnimatedContainer，您可以简单地通过 bool 更改小部件的高度，小部件将自行设置动画。例如：

AnimatedContainer(
    width: MediaQuery.of(context).size.width,
    height: showSecondField ? 40 : 0,
    child: ...
)

或使用 SizeTransition：

class YourWidget extends State<...> with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<double> _anim;

  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 200),
    );
    final CurvedAnimation curve = CurvedAnimation(parent: _controller, curve: Curves.fastOutSlowIn);
    _anim = Tween<double>(begin: 0.0, end: 1.0).animate(curve);
  }

  @override
  Widget build(BuildContext context) {
    return SizeTransition(
      sizeFactor: _anim,
      child: TextField()
    );
  }
}

您可以打开或关闭：_controller.forward() 和 _controller.reverse()

【讨论】：