dart - 如何在活动之上创建一个透明的全屏对话框 - Flutter
问题描述
我正在尝试在活动之上创建一个透明的全屏对话框。我已尝试关注此线程,但解决方案不起作用。
简而言之,我需要的是:
- 全屏对话框。
- 透明背景,除了我用于对话框的小部件
这是我的代码:
打开对话框
void onNextBtnClick(){
var route = new MaterialPageRoute(
builder: (BuildContext context) =>
new GenreDialogUI(),fullscreenDialog: true
);
Navigator.of(context).push(route);
}
对于对话框视图
import 'package:flutter/widgets.dart';
class HolePuncherPainter extends CustomPainter {
static final clearPaint = new Paint()
..color = Colors.transparent,
..blendMode = BlendMode.clear;
const HolePuncherPainter();
@override
void paint(Canvas canvas, Size size) {
canvas.drawRect(
new Rect.fromLTWH(0.0, 0.0, size.width, size.height), clearPaint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return true;
}
}
class GenreDialogUI extends StatefulWidget {
@override
_GenreDialogUI createState() => new _GenreDialogUI();
}
class _GenreDialogUI extends State<GenreDialogUI> {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: addAppbar(),
body: new CustomPaint(
painter: HolePuncherPainter(),
child: new Container(
color: Colors.transparent,
alignment: Alignment.center,
child: UtilCommonWidget.addText('Transparent Dialog', Colors.red, 22.0, 1),
),
),
);
}
}
解决方案
Navigator.of(context).push(PageRouteBuilder(
opaque: false,
pageBuilder: (BuildContext context, _, __) {
return YourFullScreenAlertDialog()
}
));
YourFullScreenAlertDialog 可以是具有背景颜色 Colors.transparent 的小部件,就像前面提到的@creativecreator或可能未提及。
推荐阅读
- amazon-web-services - AWS App Runner 在运行状况检查时“创建失败”
- python-3.x - 如何获得掷骰子的概率总和,其中一个是公平的,另一个是不公平的?
- macos - 如何以编程方式在 MacOS 上的触摸栏布局之间切换?
- typescript - 考虑扩展 BeforeAll 以便处理登录
- mysql - mysql存储过程中的参数问题
- oracle - 在自治中打开数据库操作后的两个登录页面
- reactjs - 有没有办法在 React 中处理 URIError?
- java - Spring Data JPA如何在使用get(“property”)链与Join时指定Join类型或Fetch Mode
- angular - 将组件拆分成更小的组件,同时保持 Angular 中父组件的 `ngModel` 和 `ngModelChange` 绑定
- apache-spark - Spark 在 Dataset.map 期间错误地反序列化对象