本文介绍了如何在活动之上创建一个透明的全屏对话框 - Flutter的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试在活动之上创建一个透明的全屏对话框.我试过关注这个 thread 但解决方案不起作用.
简而言之,我需要的是:
- 全屏对话框.
- 除了我用于对话框的小部件之外的透明背景
这是我的代码:
打开对话框
void onNextBtnClick(){var route = new MaterialPageRoute(builder: (BuildContext 上下文) =>新的流派对话UI(),全屏对话:真);Navigator.of(context).push(route);}
对于对话框视图
import 'package:flutter/widgets.dart';类 HolePuncherPainter 扩展 CustomPainter {静态最终 clearPaint = new Paint()..color = 颜色.透明,..blendMode = BlendMode.clear;常量 HolePuncherPainter();@覆盖无效油漆(帆布画布,尺寸大小){画布.drawRect(new Rect.fromLTWH(0.0, 0.0, size.width, size.height), clearPaint);}@覆盖bool shouldRepaint(CustomPainter oldDelegate) {返回真;}}类 GenreDialogUI 扩展 StatefulWidget {@覆盖_GenreDialogUI createState() =>新的 _GenreDialogUI();}class _GenreDialogUI 扩展了 State{@覆盖小部件构建(BuildContext 上下文){返回新的脚手架(appBar: addAppbar(),正文:新的自定义油漆(画家:HolePuncherPainter(),孩子:新容器(颜色:颜色.透明,对齐:对齐中心,child: UtilCommonWidget.addText('透明对话框', Colors.red, 22.0, 1),),),);}}
解决方案
Navigator.of(context).push(PageRouteBuilder(不透明:假,pageBuilder: (BuildContext 上下文, _, __) {返回 YourFullScreenAlertDialog()}));
YourFullScreenAlertDialog 可以是具有背景颜色 Colors.transparent 的小部件,例如前面提到的 @creativecreatorormaybenot.
I am trying to create a transparent full screen dialog on top of activity. I have tried following this thread but solution doesn't work.
In short , what I need is:
- full screen dialog.
- transparent background except for the widget I use for the dialog
here's my code:
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 could be a widget that has a background color, Colors.transparent, like @creativecreatorormaybenot mentioned earlier.
这篇关于如何在活动之上创建一个透明的全屏对话框 - Flutter的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!