在所有页面 Flutter 中持久化 AppBar Drawer [英] Persisting AppBar Drawer across all Pages Flutter

问题描述

我正在尝试创建一个可在我的应用程序中的所有页面上访问的统一抽屉.如何让它在所有这些页面中持续存在，而不必在每个 dart 文件中重新创建我的自定义抽屉小部件?

I am trying to create a uniform drawer that is accessible across all pages in my app. How do I make it persist throughout all these pages without having to recreate my custom Drawer widget in every single dart file?

推荐答案

对此有几个不同的选项.最基本的是希望你已经做过一些事情，但我还是会列出来:

There are a few different options for this. The most basic is hopefully something you've already done, but I'll list it anyways:

1:为你的抽屉创建一个类

您的小部件应该是它自己的有状态或无状态小部件.这样，您只需每次都实例化它.

Your widget should be its own stateful or stateless widget. This way, you just have to instantiate it each time.

class MyDrawer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Drawer(...);
  }
}

然后在每个页面中使用它时:

And then when using it in each page:

Scaffold(
  drawer: MyDrawer(...),
  ...
)

我希望你已经这样做了；如果不是，你应该是.类的构建函数不应该太大，否则会导致性能不佳和代码难以维护；从长远来看，将事物拆分为逻辑单元会对您有所帮助.

I hope you're already doing this; if not you should be. A class's build function shouldn't be too large or it can lead to poor performance and harder to maintain code; splitting things into logical units will help you in the long run.

2:为您的脚手架创建一个类

2: Create a class for your scaffold

如果必须为每个页面在脚手架中包含相同的抽屉仍然代码太多，您可以改用封装脚手架的类.它基本上会为您实际使用的每个脚手架输入进行输入.

If having to include the same drawer in a scaffold for each page is still too much code, you can instead use a class that encapsulates your scaffold. It would essentially take inputs for each of the scaffold inputs you actually use.

class MyScaffold extends StatelessWidget {

  final Widget body;

  MyScaffold({this.body});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
     body: body,
     drawer: MyDrawer(...),
    );
  }
}

然后不要在代码中使用 Scaffold，而是使用 MyScaffold(但请命名为更好的名称 =D).

And then instead of using Scaffold in your code, use MyScaffold (but please name it something better =D).

3:多层次脚手架

我只是为了完整而包含这种方式，我不推荐它.话虽如此，但在 Flutter 的正常工作流程中，您可以通过执行此操作来完成某些工作 - 例如，如果您想要在用户点击抽屉中不同项目时的自定义动画.

I'm only including this way of doing it to be complete, and I don't recommend it. That being said, there are certain things you can't get to work within flutter's normal workflow that you could do by doing this - for example if you want a custom animation for when the user taps on different items in the drawer.

基本上，在这种情况下，您要做的是在 MaterialApp 或 Navigator 之外拥有一个 Scaffold(我相信这也意味着您必须在此之外拥有另一个 Navigator，但我不是 100% 确定)).您可以让导航外的脚手架显示抽屉，而另一个(在导航内的每个页面上)会做您需要它做的任何其他事情.有一些警告 - 您必须确保获得正确的脚手架(即 Scaffold.of(context) 本身不会削减它 - 您必须获得第一个脚手架并使用它来查找更高级别的脚手架)，并且您可能需要将 GlobalKey(较低级别脚手架的)传递给 Drawer，以便它可以实际更改其中的页面.

Basically, what you'd do in this case is to have a Scaffold outside of your MaterialApp or Navigator (which I believe would also mean you'd have to have another Navigator outside that, but I'm not 100% sure). You would have the scaffold that's outside your navigation show the drawer while the other one (on each page within the navigation) would do whatever else you need it to do. There's a few caveats - you'd have to make sure you get the right scaffold (i.e. Scaffold.of(context) by itself wouldn't cut it - you'd have to get the context of the first scaffold and use it to find the higher-level one), and you'd probably need to pass a GlobalKey (of the lower-level scaffold) to the Drawer so that it could actually change pages within it.

正如我所说，我不推荐这种方法，所以我不会详细介绍更多细节，而是将其作为练习留给读者，如果他们想进入那个兔子洞！

As I said, I don't recommend this approach, so I'm not going to go into any more detail than that but rather leave it as an exercise for the reader if they want to go down that rabbit hole!

这篇关于在所有页面 Flutter 中持久化 AppBar Drawer的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！