如何为位置因布局变化而变化的 Flutter 小部件制作动画

Question

我问的问题与相同，只是在他们的情况下，他们能够使用此处不适用的 Hero 动画解决问题。我遇到的情况是，当用户聚焦搜索字段时，键盘会出现并将内容向上移动。我希望能够向上动画该内容，以便它不会跳跃（并在键盘关闭时也为其动画动画），但位置完全取决于布局，这意味着我不知道最终位置是什么将是为了使用类似 SlideTransition 的东西。

附上我目前情况的截图。居中的放大镜图标和文本是我想要制作动画的小部件组。

Answer 1

只需将 Scaffold 中的属性 resizeToAvoidBottomInset 设置为 false。

Answer 2

似乎解决方案取决于几件事 - 一个是我必须将 Scaffold 小部件上的 resetToAvoidBottomInset 属性设置为 false，但另外我不得不使用一个 AnimatedPadding 小部件，该小部件将填充应用到居中内容的底部，该填充等于 MediaQuery.of(context).viewInsets.bottom 值，该值占键盘占用的 space 。这当然有效，但感觉很奇怪，因为我依赖于对小部件外部发生的事情的了解来提供动画。

这是相关代码的示例：

Expanded(
              child: Container(
                color: Colors.white,
                child: AnimatedPadding(
                  padding: EdgeInsets.only(
                      bottom: MediaQuery.of(context).viewInsets.bottom),
                  duration: const Duration(milliseconds: 600),
                  curve: Curves.easeInOut,
                  child: Center(

如何为位置因布局变化而变化的 Flutter 小部件制作动画

How to animate a Flutter widget whose position changes due to layout changes

flutter

flutter-animation