时间戳

首页 > 解决方案 > 如果使用背景，在不同页面上使用 FloatingActionButton？

flutter - 如果使用背景，在不同页面上使用 FloatingActionButton？

问题描述

我正在学习 Flutter 并使用他们提供的 Shrine 演示应用程序 ( https://codelabs.developers.google.com/codelabs/mdc-101-flutter/ ) 作为尝试其他小部件的基础。我正在使用 Shrine 菜单作为抽屉的替代品进行导航。

我有几个不同的路线/页面，我希望每个都有自己的 FloatingActionButton，在每个页面上执行不同的功能，其中一些没有按钮，而其他一些可能有一个 BottomAppBar。

为了使用 FloatingActionButton，它需要作为参数传递给 Scaffold，但 Shrine 背景只有一个 Scaffold，它还保存着选择菜单选项的状态。

如果每个页面都有自己的 Scaffold，那么这将很容易，但是我会失去 Shrine 应用程序所拥有的酷菜单。

我如何使用带有多个不同页面的 Shrine 样式菜单，每个页面都有自己独特的 FloatingActionButton 或 BottomAppBar？

我应该将菜单状态移动到其他地方吗？我是否应该以某种方式将子小部件中的按钮操作传递回背景的脚手架（如果是，如何）？我应该放弃并使用抽屉吗？

标签： flutter

解决方案

除了在 Scaffold 中使用 FloactingActionButton 属性，您还可以将按钮放置在页面的右下角，并在各个页面中使用“Positioned”小部件。

例如： 

         body: Stack( // must add Stack widget
               chidren: <Widget> [
               .
               .
               . // your other widgets on this page
               .
                Positioned(
                          right: 10,
                          bottom: 10,
                          child: FloatingActionButton(
                            onPressed: () => yourFunction,
                            ),
                            child: Icon(Icons.add),
                            backgroundColor: Colors.red,
                          ),
                        ),
            ],
        );

希望这可以帮助 ：）

推荐阅读