在嵌套的MaterialApp中顯示對話框-顫動

我使用的是嵌套MaterialApp使得FirstMaterialApp擁有SecondMaterialApp它的孩子。我在showDialog從呼叫時遇到一個問題SecondMaterialApp，即它出現在整個螢屏上，就好像它是從FirstMaterialApp.

我希望對話框保持在SecondMaterialApp.

在影像中，我故意將 Dialog 拉伸到整個寬度，以便很明顯它覆寫了FirstMaterialApp.

第一材料應用

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()),
        ));
  }
}

第二材料應用

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',
              ),
            ],
          ),
        );
  }
}

uj5u.com熱心網友回復：

使用showDialog名為的引數找到了解決方案useRootNavigator。將其設定為false提供所需的結果。

現在對話框被限制在子 MaterialApp 的邊界內，并且backgroundOverlyfromshowDialog只覆寫第二個材料應用程式。

uj5u.com熱心網友回復：

-> 使用您的第二個檔案代碼

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',
              ),
            \],
          ),
        );
      }
    }

uj5u.com熱心網友回復：

在對話之前創建材料

return Material(child: Dialogue();

標籤：扑 颤振布局 颤动网

上一篇：如何監聽FutureBuilder小部件內的狀態變化并反映狀態變化？

下一篇：Tkinter按鈕放置垂直拉伸