扑。 Dialog vs RawDialogRoute vs DialogRoute vs PopupRoute vs ModalRoute之间的区别？

Question

我无法理解所有这些类之间的区别。我找到了几个例子，它们都使用不同的类，结果没有视觉上的差异。 例如自定义路由可以扩展 PopupRoute 或 ModalRoute 而无需任何额外的更改，因为当然是继承。 如果有人可以解释所有这些类之间的区别，并且当使用一个而不是另一个时，我会很高兴）！感谢您的关注！

Answer 1

对话类

此对话框小部件对对话框的内容没有任何意见。与其直接使用这个小部件，不如考虑使用 AlertDialog 或 SimpleDialog，它们实现了特定类型的材料设计对话框。

flutter 中的对话框类型

1. 警报对话框
2. 简单对话框
3. 显示对话框

例子：

AlertDialog(
            title: Text('Message!'), // To display the title it is optional
            content: Text('Hello World!!'), // Message which will be pop up on the screen
            // Action widget which will provide the user to acknowledge the choice
                actions: [
                FlatButton(      // FlatButton widget is used to make a text to work like a button
                textColor: Colors.black,
                onPressed: () {},    // function used to perform after pressing the button
                child: Text('CANCEL'),
                ),
                FlatButton(
                textColor: Colors.black,
                onPressed: () {},
                child: Text('ACCEPT'),
                ),
            ],
            ),

RawDialogRoute 类

允许自定义对话框弹出的通用对话框路由。

由 showGeneralDialog 内部使用，也可以直接压入 Navigator 堆栈以启用状态恢复。

此函数采用 pageBuilder，通常会构建一个对话框。对话框下方的内容使用 ModalBarrier 变暗。构建器返回的小部件不与最初调用 showDialog 的位置共享上下文。如果对话框需要动态更新，请使用 StatefulBuilder 或自定义 StatefulWidget。

barrierDismissible 参数用于指示点击屏障是否会关闭对话框。默认为true，不能为null。

barrierColor 参数用于指定使对话框下方的所有内容变暗的模态屏障的颜色。如果为 null，则使用默认颜色 Colors.black54。

settings 参数定义此路由的设置。

DialogRoute 类

具有材质进入和退出动画、模态屏障颜色和模态屏障行为的对话框路径（点击屏障可关闭对话框）。

由 showDialog 内部使用，也可以直接压入 Navigator 堆栈以启用状态恢复。

这个函数需要一个构建器，它通常构建一个对话框小部件。对话框下方的内容使用 ModalBarrier 变暗。构建器返回的小部件不与最初调用 showDialog 的位置共享上下文。如果对话框需要动态更新，请使用 StatefulBuilder 或自定义 StatefulWidget。

上下文参数用于查找 MaterialLocalizations.modalBarrierDismissLabel，它为模态​​框提供了一个本地化的可访问性标签，该标签将用于模态框的屏障。不过也可以传入自定义的barrierLabel。

barrierDismissible 参数用于指示点击屏障是否会关闭对话框。默认为true，不能为null。

barrierColor 参数用于指定使对话框下方的所有内容变暗的模态屏障的颜色。如果为 null，则使用默认颜色 Colors.black54。

useSafeArea 参数用于指示对话框是否应仅显示在操作系统不使用的屏幕“安全”区域。默认情况下为 true，这意味着对话框不会与操作系统区域重叠。如果设置为 false，则对话框将仅受屏幕大小的限制。不能为空。

settings 参数定义此路由的设置。

PopupRoute 类

在当前路由上覆盖小部件的模态路由。

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(home: new MyApp()));
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter"),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            showDialog(
                context: context,
                builder: (BuildContext context) {
                  return AlertDialog(
                    content: Stack(
                      overflow: Overflow.visible,
                      children: <Widget>[
                        Positioned(
                          right: -40.0,
                          top: -40.0,
                          child: InkResponse(
                            onTap: () {
                              Navigator.of(context).pop();
                            },
                            child: CircleAvatar(
                              child: Icon(Icons.close),
                              backgroundColor: Colors.red,
                            ),
                          ),
                        ),
                        Form(
                          key: _formKey,
                          child: Column(
                            mainAxisSize: MainAxisSize.min,
                            children: <Widget>[
                              Padding(
                                padding: EdgeInsets.all(8.0),
                                child: TextFormField(),
                              ),
                              Padding(
                                padding: EdgeInsets.all(8.0),
                                child: TextFormField(),
                              ),
                              Padding(
                                padding: const EdgeInsets.all(8.0),
                                child: RaisedButton(
                                  child: Text("Submitß"),
                                  onPressed: () {
                                    if (_formKey.currentState.validate()) {
                                      _formKey.currentState.save();
                                    }
                                  },
                                ),
                              )
                            ],
                          ),
                        ),
                      ],
                    ),
                  );
                });
          },
          child: Text("Open Popup"),
        ),
      ),
    );
  }
}

模态路由

阻止与先前路由交互的路由。

MaterialApp(
  title: "Routing Demonstration",
  onGenerateRoute: _generateRoute
  routes: {
    '/': (context) => RoutingHomePage(),
    MySecondScreen.routeName: (context) => MySecondScreen(),
  }
),
...

Route _generateRoute( RouteSettings settings ) {
  switch (settings.name) {
    case MyPopupScreen.routeName:
      return MyPopupRoute();
      break;
  }
  return null;
}

...
// In some other method use the named route
  Navigator.pushNamed( context, MyPopupRoute.routeName );

class MyPopupRoute extends PopupRoute {
  static const String routeName = "/mypopup";

  Widget buildPage ( BuildContext context,
    Animation<double> animation,
    Animation<double> secondaryAnimation ) {
        return Placeholder();
    }
 }

希望能解释...