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

Question

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

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

Answer 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()