在对话框上禁用阴影/覆盖层是否可行？

Question

在对话框上禁用阴影/覆盖层是否可行？

10

我想知道是否有一种方法可以禁用对话框的阴影/覆盖效果？基本上，我想让对话框看起来像这张图片右侧的样子：

我尝试的最佳方法是使用一个包含自定义对话框的堆栈，然后切换以显示或隐藏它们，但我遇到了问题，即难以滚动每个自定义对话框自己的 ListView，而不会弄乱其他对话框。我知道这违反了Material Design指南，但我正在尝试复制dribble.com上的UI。

谢谢！

编辑：

我通过编辑showGeneralDialog方法几乎实现了此效果，但仍然存在高程阴影：

await showGeneralDialog(
    context: context,
    pageBuilder: (BuildContext buildContext,
        Animation<double> animation,
        Animation<double> secondaryAnimation) {
      return SafeArea(
        child: Builder(builder: (context) {
          return AlertDialog(
             content: Container(
                 color: Colors.white,
                 width: 150.0,
                 height: 150.0,
                 child: Center(child: Text("Testing"))));
        }),
      );
    },
    barrierDismissible: true,
    barrierLabel: MaterialLocalizations.of(context)
        .modalBarrierDismissLabel,
    barrierColor: null,
    transitionDuration:
        const Duration(milliseconds: 150));

编辑2：这是一个图片，用于说明上述代码的更改，我已经成功取消了暗黑覆盖，但对话框上仍然有提升，我似乎无法摆脱它：

编辑3：我认为如果我能够在showGeneralDialog的Builder中更改AlertDialog，那么我就可以让它起作用，但我很难放入一些既是Material又不占整个屏幕的东西。

- soupjake

请问您能否粘贴这段代码：Utils.listDialog - diegoveloper

这只是一个方法，它创建了一个带有模糊玻璃效果的自定义AlertDialog。将其更改为标准的AlertDialog不会改变任何东西。 - soupjake

4个回答

7

我使用以下代码实现了结果。窍门在showDialog方法中的barrierColor属性，我将其设置为带有零不透明度值的白色，并且障碍阴影消失了。

AlertDialog alert = AlertDialog(
    backgroundColor: Colors.transparent,
    elevation: 0,
    content: new Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Loader(),
      ],
    ),
  );
  showDialog(
    barrierColor: Colors.white.withOpacity(0),
    barrierDismissible: false,
    context: context,
    builder: (BuildContext context) {
      return WillPopScope(
            onWillPop: (){},
          child: alert);
    },
  );

- Sachin Tanpure

你可以使用 barrierColor: Colors.transparent。 - dan-gph

6

朋友，请将参数“elevation”设置为0。它可以正常工作。

AlertDialog(
 elevation: 0,
),

- Anderson Adorno Mattede

1

这将移除高程框阴影，但不解决背景变暗的问题。 - Stack Underflow

很酷，当高度为0时，肯定没有阴影。非常生动。 - 无夜之星辰

1

只需在showDialog中将barrierColor参数设置为Colors.transparent。示例：

showDialog(
            context: context,
            barrierColor: Colors.transparent, // Here the solution
            builder: (context) => myDialog(),
          );

- CesareIsHere

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- soupjake · Accepted Answer

搞定了！您需要在showGeneralDialog方法的Builder中创建自己的对话框，就像小部件一样，并将barrierColor设置为null：

await showGeneralDialog(
  context: context,
  pageBuilder: (BuildContext buildContext,
      Animation<double> animation,
      Animation<double> secondaryAnimation) {
    return SafeArea(
      child: Builder(builder: (context) {
        return Material(
            color: Colors.transparent,
            child: Align(
                alignment: Alignment.center,
                child: Container(
                    height: 200.0,
                    width: 250.0,
                    color: Colors.white,
                    child:
                        Center(child: Text('Testing')))));
      }),
    );
  },
  barrierDismissible: true,
  barrierLabel: MaterialLocalizations.of(context)
      .modalBarrierDismissLabel,
  barrierColor: null,
  transitionDuration: const Duration(milliseconds: 150));