Flutter:在弹出对话框中导航

发布于 2025-01-09 00:16:34 字数 511 浏览 3 评论 0原文

是否可以在弹出窗口中使用单独的导航器?单独的BuildContext?

我有一个正在运行的应用程序(APP1),我想在新的应用程序(APP2)中显示它(例如,按下按钮即可打开现有应用程序)。 APP1有多个页面。

我能够将 APP1 添加为 APP2 的依赖项,并在弹出对话框(警报对话框)中加载主页。

当我尝试浏览 APP1 时,会出现此问题。如果我单击 APP1 中的按钮,它会更改整个新应用程序中的页面。

我想在弹出对话框中进行单独的导航,以便包含的应用程序导航器仅在弹出对话框中工作。

实现这一目标的首选/可能的方式是什么?

这是一个小例子: 源代码

该示例由 2 个应用程序(APP1 和 APP2)组成。 APP2 包含 APP1 并在弹出对话框中显示它。

Is it possible to use a separate Navigator in a pop up window? Separate BuildContext?

I have a working app (APP1) and I would like to show it in a new one (APP2) (e.g. on a button press to open the existing app). APP1 has multiple pages.

I was able add the APP1 as an dependency to APP2 and load the main page in a popup dialog (Alert dialog).

The issue happens when I try to navigate through the APP1. If I click on the button in the APP1 it changes the page in the whole new app.

I would like to have separate navigation in the pop up dialog, so that the included app Navigator works only in the pop-up dialog.

What would be a preferred/possible way to achieve this?

Here is a small example:
Soure code

The example consists of 2 apps (APP1 and APP2). APP2 includes APP1 and shows it in a pop up dialog.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

一直在等你来 2025-01-16 00:16:34

您可以通过在对话框组件中添加 Navigator 小部件来添加嵌套导航器(如果您在 Flutter 中使用 Navigator 1.0),这样您就可以管理该对话框本身内的页面导航,创建嵌套路由并仅在该导航堆栈内导航。

您可以执行以下操作:

class NestedDialog extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
     return Scaffold(
       body: Navigator(
          key: <ADD_UNIQUE_KEY>, // add a unique key to refer to this navigator programmatically
          initialRoute: '/',
          onGenerateRoute: (RouteSettings settings) {
              // here you return your own page widgets wrapped
              // inside a PageRouteBuilder
          }
       )
     );
   }
}

然后您甚至可以使用 Flutter 自己的 showDialog 并加载自定义对话框小部件,如下所示:

showDialog(context: context,
      barrierDismissible: true,
      builder: (BuildContext cxt) {
      return AlertDialog(
        content: NestedDialog()
      );
    });

类似的操作。试一试。这是一个 Github Gist,您可以在 DartPad.dev 上运行,这样您就可以明白我的意思。您不必创建两个应用程序;只需将您的应用程序分发到两个主要小部件中,并且子页面位于每个主小部件的子页面下;请参阅要点 https://gist.github.com/romanejaquez/d769e6e766fbacb2f5c166dd3bceab51。在 DartPad.dev 上运行它。

You can add a nested Navigator (if you're using Navigator 1.0 in Flutter) by adding the Navigator widget inside your dialog component, that way you manage the navigation of pages within that dialog itself, create nested routes and navigate only within that navigation stack.

You can do something like:

class NestedDialog extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
     return Scaffold(
       body: Navigator(
          key: <ADD_UNIQUE_KEY>, // add a unique key to refer to this navigator programmatically
          initialRoute: '/',
          onGenerateRoute: (RouteSettings settings) {
              // here you return your own page widgets wrapped
              // inside a PageRouteBuilder
          }
       )
     );
   }
}

Then you can even use Flutter's own showDialog and load your custom dialog widget like so:

showDialog(context: context,
      barrierDismissible: true,
      builder: (BuildContext cxt) {
      return AlertDialog(
        content: NestedDialog()
      );
    });

Something along those lines. Give that a shot. Here's a Github Gist you can run on DartPad.dev so you can see what I mean. You don't have to create two apps; just distribute your app into two main widgets, and the child pages go under each main widget's child pages; See gist https://gist.github.com/romanejaquez/d769e6e766fbacb2f5c166dd3bceab51. Run it on DartPad.dev.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文