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

Posted 2023-02-23

【中文标题】在嵌套的 MaterialApp 中显示对话框 - 颤动

【英文标题】：Showing Dialog in nested MaterialApp - flutter

【发布时间】：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',
              ),
            ],
          ),
        );
  

【参考方案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 应用程序。