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

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

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

【问题讨论】:

标签: 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

    【讨论】:

    • 这确实会阻止内容调整大小,但我认为调整内容大小不是这里的问题。我仍然会遇到一个问题,即以某种方式知道内容在其中移动的区域的大小,然后确定它的“中心”在哪里,这样我就知道要翻译到哪里。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-11-06
    • 2019-08-29
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多