颤振 - 从底部到顶部的按钮动画答案

【问题标题】：flutter - fab button animation which will go to top from bottom颤振 - 从底部到顶部的按钮动画
【发布时间】：2020-08-10 20:55:15
【问题描述】：

我需要动画方面的帮助，当我点击第一个屏幕中的 FAB 图标时，该图标会随着动画一起上升，而另一个屏幕（如第二张图片所示）应该会显示像窗帘一样的动画。并且 fab 图标应该像第二张图片一样设置在应用栏中。

底部菜单应该在两个屏幕中都有，就像给出的屏幕截图一样。

【问题讨论】：

标签： flutter flutter-layout flutter-dependencies flutter-animation

【解决方案1】：

您可以做一件事，将浮动操作按钮包装到 AnimatedContainer

   AlignmentDirectional _ironManAlignment = AlignmentDirectional.bottomCenter; 

   ...

   floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
   floatingActionButton: AnimatedContainer(
        duration: Duration(seconds: 2),
        alignment: _ironManAlignment,
        child: FloatingActionButton(
          onPressed: () {
            _flyIronMan();
          },
          child: Icon(Icons.add),
        ),
      ),

像这样当你按下按钮然后调用这个方法


  void _flyIronMan() {
    setState(() {
      _ironManAlignment =
          AlignmentDirectional(0.0, -0.8); //AlignmentDirectional(0.0,-0.7);
    });
  }

【讨论】：

感谢您的回复，但我也想打开带有动画的新页面并从底部删除 fab 图标并设置为第二页应用栏。那么你能否给我一些例子，以便我可以快速实现它？这对我有很大的帮助。
我认为你不需要第二页。您可以使用底部工作表小部件
但是我怎样才能用它来制作我在设计中展示的我想要的屏幕呢？实际上我是新来的，我对这个小部件了解不多。你能指导我这样做吗？
是的，为什么不
Ishan Fernando link.medium.com/C3HkSWmI15 的“Flutter 5 — 底页”。请参考

【解决方案2】：

只需用Hero 小部件包装每个页面上的按钮，就像这样：

Hero(
 tag: 'fab',
 child: FloatingActionButton()
);

【讨论】：

我在主屏幕上只有一个浮动按钮，我只想打开新屏幕点击它。但在新屏幕中应该有可见的底部菜单，并且浮动按钮将设置在应用栏上，并带有设计屏幕的动画。
@DishaPatel 然后尝试在第二个屏幕上创建相同的底部菜单，并将两个底部菜单包装在两个屏幕上的 'Hero(tag: 'bottomMenu', child:...)'跨度>
这是不可能的，因为我不会用标签相应地管理它。我只想要整个应用程序中的一个底部菜单。你能帮我解决这个问题吗？
@DishaPatel 我认为你做不到。如果你尝试我建议的方法，这两个底部菜单在用户看来是同一个，这要归功于 Hero 动画。
是的，你是对的，它看起来一样，但我如何管理底部菜单。假设用户在单击 FAB 按钮时位于第二页，然后他单击第二个选项卡然后返回，然后他将显示第二个屏幕而不是第一个屏幕

【解决方案3】：

对于你想要实现的设计，我建议你使用sliding_up_panel而不是推新屏。

它有一个参数collapsed，您可以在其中输入FloatingActionButton 以在点击时展开面板，并在展开的面板中显示相同的按钮。只需将面板设置为不可拖动，滑动时不会展开。

请仔细阅读它的文档，我相信你可以通过这个小部件达到你想要的效果。

【讨论】：

您可以看到我的双屏应用栏不同，因为您建议我需要使用向上滑动面板。但是使用它我不会得到我想要的输出。因为滑动通道将来自底部，我必须在两个页面中都显示底部菜单。
@DishaPatel 我认为您可以将面板移动到底部有边距，这样它就不会覆盖底部栏。
@DishaPatel Sliding_up_panel 只是一个小部件，理论上您可以将其放置在屏幕上的任何位置。只是玩数字:)
@DishaPatel 正如我在您的案例中看到的那样，您可以简单地将页面内容包装在Stack 中，然后在其顶部添加SlidingUpPanel，也可以将其包装在Positioned(bottom: 40, ...) 中。在这种情况下，它不会覆盖底栏，并且您将实现您想要的设计。
@DishaPatel 用固定的错别字恢复了我的评论:) 你试过我的解决方案了吗？