如何自定义对话框的位置、大小和背景？

Question

我有一个带有 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似乎是一样的。

反正有自定义这些属性吗？

Answer 1

尽管已接受的答案是这样说的；有多种方法可以按照您要求的方式自定义 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),
      /* ... */
    );
  },
);

这是因为我要求屏幕底部边缘和对话框之间的最小填充；在此规定下，对话框存在的唯一位置是靠近顶部。

Answer 2

不可以。这些不是为可定制而设计的。它们被设计成尊重 Material Design 原则。

如果您想要自定义设计，您可以基于Align和/或制作自己的模态DecoratedBox

Answer 3

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

希望这会有所帮助，谢谢

Answer 4

SimpleDialog并且AlertDialog旨在满足一组特定的需求。它们有一定程度的自定义，但最终它们只是为了显示简单的弹出对话框，为用户提供一些信息并提示对话响应（即“是”、“否”、“取消”、“保存”、等等。）。

如果您想要一个更可定制的弹出对话框，您将需要创建自己的。不过，从好的方面来说，这真的很简单。让构建器showDialog返回一个Dialog小部件，其中的子部件设置为您想要的任何东西：

showDialog(
  context: context,
  builder: (BuildContext cxt) {
    return Dialog(
      child: Container(
        ...
      ),
    );
  },
);

很显然，你将需要重新东西，如标题栏，操作栏，但你可以破解打开的源代码SimpleDialog，并AlertDialog复制它们有什么就有什么，或者你可以推出自己的解决方案。

Answer 5

它并不像你想象的那么可怕。您只需要克隆 Dialog.dart，并用 Align 替换 Center 小部件。

当然也要重命名东西；例如，MyDialog、myShowDialog、MySimpleDialog。

是的，就是这么容易。

如果你在滚动，如何添加 Align 小部件的对齐参数作为额外的......