我有一个带有 FAB 的主屏幕，按下它时我想显示一个对话框供用户输入。
目前我正在使用 showDialog() 和 SimpleDialog。
showDialog(
context: context,
builder: (BuildContext context) {
return SimpleDialog(
title: NormalText('New Counter Item'),
contentPadding: EdgeInsets.fromLTRB(24.0, 0.0, 24.0, 24.0),
children: <Widget>[
Container(
...
)
],
);
}
);
但是，我似乎无法用它来定制几乎任何东西（更小、弯曲的角和位于屏幕下方的位置）。 AlertDialog 好像是一样的。
是否有自定义这些属性？
【问题讨论】：
return showDialog<void>(
barrierDismissible: true,
context: context,
builder: (BuildContext context) {
return new Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(0),
child: new Container(
height: 100,
width: MediaQuery.of(context).size.width,
color: Colors.purple,
child: new Column(
children: <Widget>[
new Text(
'custom dialog text',
style: new TextStyle(
fontSize: 14,
color: Colors.white,
),
),
],
),
),
)
],
);
},
);
希望这会有所帮助， 谢谢
【讨论】：
没有。这些并非设计为可定制的。他们在设计时考虑到了 Material Design 原则。
如果您想要自定义设计，您可以根据 Align 和/或 DecoratedBox 制作自己的模态
【讨论】：
import "package:flutter/material.dart"
SimpleDialog 和 AlertDialog 旨在满足特定的需求。它们有一定程度的定制，但最终它们只是为了显示简单的弹出对话框，为用户提供一些信息并提示对话框响应（即“是”、“否”、“取消”、“保存”、等等）。
如果您想要一个更可定制的弹出对话框，您将需要创建自己的。不过，从好的方面来说，它真的很简单。让 showDialog 中的构建器返回一个 Dialog 小部件，其中的子级设置为您想要的任何内容：
showDialog(
context: context,
builder: (BuildContext cxt) {
return Dialog(
child: Container(
...
),
);
},
);
显然，您将需要重新创建标题栏和操作栏等内容，但您可以打开 SimpleDialog 和 AlertDialog 的源代码并复制它们那里的内容，或者您可以推出自己的解决方案.
【讨论】：
这并不像你想象的那么可怕。 你只需要克隆 Dialog.dart，然后 将 Center 小部件替换为 Align。
当然也可以重命名东西；例如我的对话，我的显示对话，我的简单对话。
是的，就是这么简单。
如果你在滚动，添加 Align 小部件的对齐参数作为一个额外的参数怎么样......
【讨论】：
不管接受的答案是什么；有一些方法可以按照您要求的方式自定义 SimpleDialog。
SimpleDialog 的宽度/高度会根据子级及其填充方式而增长。下面的代码将生成一个宽度为 336 高度为 300 的对话框：
showDialog(
context: context,
builder: (BuildContext context) {
return SimpleDialog(
insetPadding: EdgeInsets.zero,
titlePadding: EdgeInsets.zero,
contentPadding: EdgeInsets.zero,
children: [
Container(
width: 300,
height: 300,
),
],
);
},
);
不确定添加到宽度上的 36 像素是多少；但这表明尺寸可以自定义。
可以使用shape 属性自定义角。下面的代码显示了一个带有 4 像素圆边的绿色边框：
showDialog(
context: context,
builder: (BuildContext context) {
return SimpleDialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(4.0),
side: BorderSide(
color: Colors.green,
),
),
/* ... */
);
},
);
我发现我可以使用insetPadding 属性在页面上上下移动对话框。这定义了屏幕边缘和对话框之间所需的最小空间量。虽然有点麻烦，但如果你知道屏幕的大小和对话框的大小，你可以用一些简单的数学来微调对话框的位置。
假设屏幕高度为 1920 像素，对话框高度为 300 像素，以下代码应将对话框放置在距屏幕顶部边缘 100 像素的位置，而不是在中心位置：
showDialog(
context: context,
builder: (BuildContext context) {
return SimpleDialog(
insetPadding: EdgeInsets.only(bottom: 1520),
/* ... */
);
},
);
这是因为我要求屏幕底部边缘和对话框之间的最小填充；并且该规定下对话框存在的唯一位置是靠近顶部。
【讨论】：
这是一个干净的解决方案，如果由于某种原因你有一个 TextField/TextFormField 并且在那里你有一个 onsubmit 属性，那么你可以关注：
onSubmit: () {
showDialog(
context: context,
builder: (context){
return WillPopScope(
onWillPop: () { return Future(() => false); }, // this will prevent going back
child: AlertDialog(
content: Row(
children: [
progressWidget(),
Container(margin: EdgeInsets.only(left: 10.0),child:Text("Loading" )),
],),
)
);
}
);
yourCallToMethod.whenComplete((){
Navigator.of(context).pop();
});
},
好处？
当显示showAlert 时，如果有人随意或激进地点击屏幕，则屏幕会返回。这可以防止这种行为，并且仅在您的函数完成时关闭 showAlert。
【讨论】：
showGeneralDialog<T>函数并设置isBarrierDismissible: true来阻止用户关闭对话框。
您实际上可以通过在构建器中添加SingleChildScrollView() + 填充（用于从顶部的偏移）来修改它的位置（仅高度），如下所示：
showDialog<String>(
context: context,
builder: (ctxDialog) =>
SingleChildScrollView(
child: Padding(
padding: EdgeInsets.only(top: 150.0),
child: AlertDialog()
)
)
);
【讨论】：
:- 我们可以通过给底部来改变对话框的垂直位置 insetPadding 喜欢
insetPadding: EdgeInsets.only(bottom: XX);
:- 水平位置由水平填充或左侧
insetPadding: EdgeInsets.symmetric(horizontal:XX);
or
insetPadding: EdgeInsets.only(left: XX,right:YY);
【讨论】：