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

Question

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

Answer 1

Dailog class

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

flutter 中的对话框类型

AlertDialog
简单对话框
显示对话框

示例：

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

RawDialogRouteclass

允许自定义对话框弹出窗口的通用对话框路径。

它由 showGeneralDialog 在内部使用，或者可以直接推入 Navigator 堆栈以启用状态恢复。

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

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

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

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

DialogRoute class

带有 Material 进入和退出动画、模态屏障颜色和模态屏障行为的对话路线（点击屏障可关闭对话）。

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

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

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

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

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

useSafeArea 参数用于指示对话框是否应仅显示在操作系统未使用的 'safe' 屏幕区域中。默认情况下为真，这意味着对话框不会与操作系统区域重叠。如果设置为 false，对话框将只受屏幕尺寸的限制。不能为空。

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

弹出路由class

在当前路线上叠加小部件的模态路线。

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

希望能解释...

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

Flutter. Difference between Dialog vs RawDialogRoute vs DialogRoute vs PopupRoute vs ModalRoute?

flutter

dialog

popup