如何为位置因布局更改而更改的 Flutter 小部件设置动画答案

【问题标题】：How to animate a Flutter widget whose position changes due to layout changes如何为位置因布局更改而更改的 Flutter 小部件设置动画
【发布时间】：2023-03-08 08:51:01
【问题描述】：

我问的问题与this question 相同，但在他们的情况下，他们能够通过不适用的英雄动画解决问题。我的情况是，当用户关注搜索字段时，键盘会出现并将内容向上移动。我希望能够向上设置该内容的动画，使其不会跳跃（并且在关闭键盘时也为其运动设置动画），但位置完全取决于布局，这意味着我不知道最终位置是什么将是为了使用类似 SlideTransition 的东西。

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

【问题讨论】：

你看过stackoverflow.com/questions/54563854/…

标签： flutter flutter-animation

【解决方案1】：

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

以下是相关代码的示例：

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(

【讨论】：

【解决方案2】：

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

【讨论】：

这确实会阻止内容调整大小，但我认为调整内容大小不是这里的问题。我仍然会遇到一个问题，即以某种方式知道内容在其中移动的区域的大小，然后确定它的“中心”在哪里，这样我就知道要翻译到哪里。