是否可以在对话框中禁用 shadow/overlay?
Is it possible to disable shadow/overlay on dialog?
我想知道是否有办法禁用 shadow/overlay 影响对话框?基本上这样我就可以得到一个看起来像这张图片右侧的对话框:
我对此的最佳尝试是使用包含我的自定义对话框的堆栈,然后将其切换为显示或不显示,但我无法滚动每个自定义对话框自己的 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
但不会占据整个屏幕的内容。
成功了!您必须在 showGeneralDialog
方法的 Builder
中创建自己的对话框,例如 Widget,同时将 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));
朋友,设置参数"elevation" = 0,成功了
AlertDialog(
elevation: 0,
),
我使用以下代码实现了结果。技巧是 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);
},
);
我想知道是否有办法禁用 shadow/overlay 影响对话框?基本上这样我就可以得到一个看起来像这张图片右侧的对话框:
我对此的最佳尝试是使用包含我的自定义对话框的堆栈,然后将其切换为显示或不显示,但我无法滚动每个自定义对话框自己的 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
但不会占据整个屏幕的内容。
成功了!您必须在 showGeneralDialog
方法的 Builder
中创建自己的对话框,例如 Widget,同时将 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));
朋友,设置参数"elevation" = 0,成功了
AlertDialog(
elevation: 0,
),
我使用以下代码实现了结果。技巧是 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);
},
);