在嵌套的 MaterialApp 中显示对话框 - 颤动答案

【问题标题】：Showing Dialog in nested MaterialApp - flutter在嵌套的 MaterialApp 中显示对话框 - 颤动
【发布时间】：2022-01-19 11:43:36
【问题描述】：

我正在使用嵌套的 MaterialApp，这样，FirstMaterialApp 将 SecondMaterialApp 作为其子级。我在从SecondMaterialApp 调用showDialog 时遇到了一个问题，即它出现在整个屏幕上，就好像它是从FirstMaterialApp 打开一样。

我希望对话框保持在SecondMaterialApp 的边界内。

在图片中，我故意将 Dialog 拉伸到宽度上，以便它明显覆盖FirstMaterialApp。

First MaterialApp

class FirstMaterialApp extends StatelessWidget {
  const FirstMaterialApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'First Material App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('First App Scaffold'),
        ),
        body: Center(
          child: DeviceFrame(
              device: Devices.ios.iPhone12, screen: const SecondMaterialApp()),
        ));
  }
}

Second MateriaApp

class SecondMaterialApp extends StatelessWidget {
  const SecondMaterialApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
        title: 'Second Materia App', home: SecondScaffold());
  }
}

class SecondScaffold extends StatelessWidget {
  const SecondScaffold({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.only(top: 40.0),
      child: Scaffold(
        appBar: AppBar(
          title: const Text('Second App Home'),
        ),
        body: Center(
          child: TextButton(
            child: const Text('Open Dialog'),
            onPressed: () async {
              await showDialog(
                  context: context,
                  builder: (buildContext) => CustomDialog());
            },
          ),
        ),
      ),
    );
  }
}

class CustomDialog extends StatelessWidget {
  const CustomDialog({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Dialog(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: const [
              Text(
                'Dialog',
                style: TextStyle(fontSize: 20.0),
              ),
              Text(
                'Message Text',
              ),
            ],
          ),
        );
  }
}

【问题讨论】：

标签： flutter flutter-layout flutter-web

【解决方案1】：

-> 使用您的第二个文件代码

import 'package:flutter/cupertino.dart';
    import 'package:flutter/material.dart';
    
    class SecondMaterialApp extends StatelessWidget {
      const SecondMaterialApp({Key? key}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        return const MaterialApp(
            title: 'Second Materia App', home: SecondScaffold());
      }
    }
    
    class SecondScaffold extends StatelessWidget {
      const SecondScaffold({Key? key}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        return Container(
          margin: const EdgeInsets.only(top: 40.0),
          child: Scaffold(
            appBar: AppBar(
              title: const Text('Second App Home'),
            ),
            body: Center(
              child: TextButton(
                child: const Text('Open Dialog'),
                onPressed: () async {
                  await showDialog(
                      context: context,
                      builder: (buildContext) => const CustomDialog());
                },
              ),
            ),
          ),
        );
      }
    }
    
    class CustomDialog extends StatelessWidget {
      const CustomDialog({
        Key? key,
      }) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        return CupertinoAlertDialog(
          content: Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: const \[
              Text(
                'Dialog',
                style: TextStyle(fontSize: 20.0),
              ),
              Text(
                'Message Text',
              ),
            \],
          ),
        );
      }
    }

【讨论】：

现在对话框被限制在第二个应用程序的边界，但背景覆盖仍然覆盖第一个应用程序。
发送 SS 你的代码
没明白，请详细说明！

【解决方案2】：

使用名为useRootNavigator 的showDialog 参数找到了解决方案。将其设置为 false 提供了所需的结果。

现在对话框仅限于子 MaterialApp 的边界，showDialog 中的 backgroundOverly 仅涵盖第二个 Material 应用。

【讨论】：

【解决方案3】：

在对话之前创建材料

return Material(child: Dialogue());

【讨论】：

使用 Material 作为 Dialog 的父级显示了一个唯一的对话框，并且父小部件都消失了。
你能解释一下你到底想要什么吗？因为我运行你的代码........
非常感谢，但是我的问题已经解决了，我已经回答了这个问题。我希望对话框显示在子 Material 应用程序的边界内，其背景覆盖仅覆盖子 Material 应用程序。