Question

我需要在我的应用程序中构建一个弹出对话框。我正在使用Dialog类，并用SizedBox类包装它以增加对话框的宽度。但是，对话框的宽度没有增加。如何增加宽度？

   onTap: () {
                                  showDialog(
                                    context: context,
                                    child:SizedBox(
                                     width: 900,
                                      child: Dialog(
                                        backgroundColor :Colors.white,
                                        insetAnimationDuration: const Duration(milliseconds: 10),
                                        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
                                        child: Container(
                                          child: Column(
                                            children: <Widget>[
                                              Text('hello'),
                                              FlatButton(
                                                onPressed: () {
                                                  Navigator.of(context).pop();
                                                },
                                                child: new Text("OK"),
                                              ),
                                            ],
                                          ),
                                        ),  
                                    ),
                                   ),
                                    );
                                },

Answer 1

flutter的size小部件的Dialog在源代码中以符合Material准则的方式预先设置。您可以通过在flutter安装目录中修改Dialog的源代码来更改dialog.dart小部件的大小：

      \flutter\packages\flutter\lib\src\material

并修改这些行（104和115）：

      padding: MediaQuery.of(context).viewInsets + const EdgeInsets.symmetric(horizontal: 40.0, vertical: 24.0),

然后：

     constraints: const BoxConstraints(minWidth: 280.0),

但这会将更改应用于您当前和将来的所有Dialog。另一种方法是通过复制原始dialog.dart内容（或者您可以从flutter repository获取内容）并修改上述参数并在需要自定义时使用它来创建自定义对话框类。但是您将冒着违反Material guidlines的风险，这会对您的应用程序用户的体验产生不利影响。

Answer 2

尝试

            `showDialog(
                context: context,
                builder: (context) {
                  return Dialog(
                    backgroundColor: Colors.white,
                    insetAnimationDuration:
                        const Duration(milliseconds: 100),
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(20)),
                    child: Container(       // use container to change width and height
                      height: 200,
                      width: 400,
                      child: Column(
                        children: <Widget>[
                          Text('hello'),
                          FlatButton(
                            onPressed: () {
                              Navigator.of(context).pop();
                            },
                            child: new Text("OK"),
                          ),
                        ],
                      ),
                    ),
                  );
                },
              );`

在这里，我已经弃用了showDialog的子参数，并将其替换为builder 并使用dailogs，它从屏幕边界开始。因此，如果您希望dailog适应整个屏幕，则不能这样做，但是如果是widder屏幕或横向屏幕，则可以将宽度更改为限制

无法在颤动中增加对话框的宽度

2 个答案: