我的 Flutter 应用程序中有一个 CupertinoAlertDialog 和 AlertDialog。每次弹出对话框时,其后面的所有内容都会变得更暗。我想删除背景。我该怎么做?
CupertinoDialogAction(
child: Text('Delete',
style: TextStyle(color: Colors.red),
),
onPressed: () async {
await CommentActivity.delete(postData[index]['id'])
.then((response) {
if (response) {
setState(() {
postData.removeAt(index);
createPageActivity();
renderPageActivity();
});
Navigator.of(context).pop();
}
});
}
)
],
)
部分解决该问题的另一种解决方案是使用几乎透明的颜色作为屏障:
showDialog<void>(
barrierColor: Color(0x01000000),
)
只需使用 de navigator 启动对话框,而不是使用 showDialog() 并使用 PageRouteBuilder
Navigator.of(context).push(
PageRouteBuilder(
pageBuilder: (context, _, __) => AlertDialog(),
opaque: false),
);
我认为你正在谈论对话框背景中的黑色推子...... 是材质/库比蒂诺实现的一部分,在材质中具有固定值 Colors.black54。
您必须复制
showDialog()
代码并进行修改。
演示:
// common Dialog widget shown in both implementation.
Widget buildDialog(BuildContext context) {
return CupertinoDialogAction(
child: Text(
'Delete',
style: TextStyle(color: Colors.red),
),
onPressed: () async {
Navigator.of(context).pop();
},
);
}
void openDialog(BuildContext context) {
// open custom dialog.
openCustomDialog(context);
// open default dialog.
// openFlutterDialog(context);
}
// regular Fluter showDialog()
void openFlutterDialog(BuildContext context) {
showDialog(
context: context,
builder: (ctx) {
return buildDialog(ctx);
},
);
}
void openCustomDialog(BuildContext context) {
showCustomDialog(
context: context,
builder: (ctx) {
return buildDialog(ctx);
},
);
}
// custom implementation of showDialog()...
Future<T> showCustomDialog<T>({
@required BuildContext context,
bool barrierDismissible = true,
WidgetBuilder builder,
}) {
assert(debugCheckHasMaterialLocalizations(context));
final ThemeData theme = Theme.of(context, shadowThemeOnly: true);
return showGeneralDialog(
context: context,
pageBuilder: (BuildContext buildContext, Animation<double> animation,
Animation<double> secondaryAnimation) {
final Widget pageChild = Builder(builder: builder);
return SafeArea(
child: Builder(builder: (BuildContext context) {
return theme != null
? Theme(data: theme, child: pageChild)
: pageChild;
}),
);
},
barrierDismissible: barrierDismissible,
barrierLabel: MaterialLocalizations.of(context).modalBarrierDismissLabel,
// KEY PART TO MODIFY, Flutter doesn't allow a transparent Color,
// values under opacity .01 are considered transparent and will throw an error.
// But this value is transparent enough.
barrierColor: Colors.black.withOpacity(0.01),
// you can modify the default FadeTransition duration here.
transitionDuration: const Duration(milliseconds: 2000),
);
}
这是您要找的吗?
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);
},
);
您可以在
Dialog
类参数中添加透明颜色。
例如,如果您像这样调用自定义对话框:
showDialog(
context: context,
builder: (BuildContext context) {
return HighlightDialog(); // call your custom dialog class file
},
);
然后您可以像这样删除自定义
Dialog
类或文件中的背景:
import 'package:flutter/material.dart';
class HighlightDialog extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Dialog(
backgroundColor: Colors.transparent, // remove background
child: Container(), // your custom dialog view
);
}
}
希望有帮助!