如何通过单击 Flutter 中屏幕的其他区域来管理警报对话框？
How to Manage alert dialog by clicking other areas of Screen in Flutter?
我的应用程序中有一个 activity。我正在使用警报对话框。当我到达此 activity 并且警报对话框打开时，当我单击屏幕的其他区域时它消失了，但问题是当我想单击任何文本字段的内部时它一次又一次地重新出现。我希望它消失后再次出现，直到我再次转到其他 activity 和 return 到此 activity。我是 Flutter 的新手，几天前我就遇到了这个问题，我多次搜索这个问题但没有找到解决方案，任何可以帮助我的人，在此先感谢。
代码
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'bottomnavigationbar.dart';
class Contact extends StatefulWidget {
@override
_ContactState createState() => _ContactState();
}
class _ContactState extends State<Contact> {
@override
Widget build(BuildContext context) {
AlertDialog dialog = new AlertDialog(
content: Container(
width: 260.0,
height: 187.0,
decoration: new BoxDecoration(
shape: BoxShape.rectangle,
// color: const Color(0xFFFFFF),
borderRadius: new BorderRadius.all(new Radius.circular(50.0)),
),
child: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.all(1),
),
Container(
child: GestureDetector(
onTap: () {
// Route route =
// MaterialPageRoute(builder: (context) => Payment1());
// Navigator.pushReplacement(context, route);
// Navigator.pushNamed(context, "myRoute");
},
child: new Text(
"For Bikes-979578-6541",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.red,
fontSize: 18,
// fontWeight: FontWeight.w700,
),
),
),
),
Padding(
padding: EdgeInsets.all(1),
),
Divider(
thickness: 1.5,
),
Padding(
padding: EdgeInsets.all(1),
),
Container(
child: GestureDetector(
onTap: () {
// Route route =
// MaterialPageRoute(builder: (context) => Payment1());
// Navigator.pushReplacement(context, route);
// Navigator.pushNamed(context, "myRoute");
},
child: new Text(
"For Boats-979-541-3607",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.red,
fontSize: 18,
//fontWeight: FontWeight.w700,
),
),
),
),
Padding(
padding: EdgeInsets.all(1),
),
Divider(
thickness: 1.5,
),
Padding(
padding: EdgeInsets.all(1),
),
Container(
child: GestureDetector(
onTap: () {
// Route route =
// MaterialPageRoute(builder: (context) => Payment1());
// Navigator.pushReplacement(context, route);
// Navigator.pushNamed(context, "myRoute");
},
child: new Text(
"redtiderentals@yahoo.com",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.red,
fontSize: 18,
// fontWeight: FontWeight.w700,
),
),
),
),
Padding(
padding: EdgeInsets.all(1),
),
Divider(
thickness: 1.5,
),
Padding(
padding: EdgeInsets.all(1),
),
Container(
child: GestureDetector(
onTap: () {
// Route route =
// MaterialPageRoute(builder: (context) => Payment1());
// Navigator.pushReplacement(context, route);
// Navigator.pushNamed(context, "myRoute");
},
child: new Text(
"Follow Us on Facebook!",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.red,
fontSize: 18,
// fontWeight: FontWeight.w700,
),
),
),
),
Padding(
padding: EdgeInsets.all(1),
),
Divider(
thickness: 1.5,
),
Padding(
padding: EdgeInsets.all(1),
),
Container(
child: GestureDetector(
onTap: () {
// Navigator.pop(dialog);
// Route route =
// MaterialPageRoute(builder: (context) => Payment1());
// Navigator.pushReplacement(context, route);
// Navigator.pushNamed(context, "myRoute");
// Navigator.of(context).pop(false),
},
child: new Text(
"Done",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.red,
fontSize: 18,
//fontWeight: FontWeight.w700,
),
),
),
),
],
),
),
);
Future.delayed(
Duration.zero,
() => showDialog(
context: context, builder: (BuildContext context) => dialog),
);
TextStyle style = TextStyle(
fontFamily: 'Montserrat', color: Colors.white, fontSize: 16.0);
return Scaffold(
appBar: AppBar(
title: Text("Contact"),
centerTitle: true,
actions: <Widget>[
new IconButton(
icon: new Icon(
Icons.more_horiz,
size: 35,
color: Colors.white,
),
// tooltip: 'Closes application',
// onPressed: () => exit(0),
),
],
),
body: SingleChildScrollView(
child: Container(
padding: EdgeInsets.all(1),
color: Colors.black,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.width / 1.6,
// constraints: BoxConstraints.expand(),
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("images/contactpage.png"),
fit: BoxFit.cover),
),
),
Padding(
padding: EdgeInsets.all(8),
),
Text(
"Contact Info",
style: TextStyle(
color: Colors.red,
fontSize: 20,
fontWeight: FontWeight.w400,
),
),
Padding(
padding: EdgeInsets.all(8),
),
Divider(
color: Colors.white,
indent: 40,
endIndent: 40,
),
Padding(
padding: EdgeInsets.all(8),
),
Container(
padding: EdgeInsets.all(16),
child: Column(
//mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"We are a locally owned. family run business providing equipment rentals in Matagorda Country. We are dedicated to making your experience with us go as smoothly as possible. Fill out the form below or call us if you have any questions or concerns.",
style: TextStyle(
color: Colors.white70,
fontSize: 15,
fontWeight: FontWeight.w400,
),
),
Text(
"Mobile No:",
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.w400),
),
TextField(
style: style,
maxLength: 30,
cursorColor: Colors.red,
textAlign: TextAlign.left,
keyboardType: TextInputType.number,
decoration: InputDecoration(
hintText: 'Enter your mobile number',
hintStyle:
TextStyle(fontSize: 16, color: Colors.white),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
borderSide: BorderSide(
width: 0,
style: BorderStyle.none,
),
),
filled: true,
fillColor: Color(0xFF1E1E1E),
contentPadding: EdgeInsets.all(16),
),
),
Text(
"Email:",
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.w400),
),
TextField(
style: style,
maxLength: 16,
cursorColor: Colors.red,
textAlign: TextAlign.left,
keyboardType: TextInputType.emailAddress,
decoration: InputDecoration(
hintText: 'Enter your email',
hintStyle:
TextStyle(fontSize: 16, color: Colors.white),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
borderSide: BorderSide(
width: 0,
style: BorderStyle.none,
),
),
filled: true,
fillColor: Color(0xFF1E1E1E),
contentPadding: EdgeInsets.all(16),
),
),
Text(
"Description:",
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.w400),
),
TextField(
keyboardType: TextInputType.text,
maxLines: 8,
maxLength: 1000,
style: style,
cursorColor: Colors.red,
textAlign: TextAlign.left,
decoration: InputDecoration(
hintText: 'Enter Description Here',
hintStyle:
TextStyle(fontSize: 16, color: Colors.white),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
borderSide: BorderSide(
width: 0,
style: BorderStyle.none,
),
),
filled: true,
fillColor: Color(0xFF1E1E1E),
contentPadding: EdgeInsets.all(16),
),
),
Material(
elevation: 5.0,
borderRadius: BorderRadius.circular(30.0),
color: Colors.red,
child: MaterialButton(
minWidth: MediaQuery.of(context).size.width,
padding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
onPressed: () {
// Route route =
// MaterialPageRoute(builder: (context) => Payment2());
// Navigator.pushReplacement(context, route);
},
child: Text("Submit",
textAlign: TextAlign.center,
style: style.copyWith(
color: Colors.white,
fontWeight: FontWeight.w800)),
),
),
],
))
],
),
),
),
bottomNavigationBar: BottomNavigation(),
);
}
}
视频link
[问题视频][1]
[1]: https://drive.google.com/file/d/11i4R9DZAImO8CGw7TwOwQ0wbXXn9yHLr/view?usp=sharing
出现这种情况是因为您在构建方法中定义了警报对话框。每次重建小部件或您的状态更改时都会运行构建方法，因此您的警报对话框会重新出现。
尝试将 AlertDialog 对话框变量移到构建方法之外。
在 Widget 构建之外定义警报对话框并在需要时调用它
createAlertDialog(BuildContext){
return AlertDialog( //Your work )
@override Widget build(BuildContext context) {
//Whenver you need alertdialog call createAlertDialog() }```
Flutter 有一个 showDialog() 方法，专门用于对话框小部件。您可以将 AlertDialog 小部件放入其中并调用 initState() 中的 showDialog() 方法，该方法将在创建有状态小部件时恰好调用一次，因此在重建期间不会调用它。如果您想在点击其他区域时关闭对话框，请将 showDialog() 方法的 barrierDismissible 参数设置为 true。
你只需要像这样修改_ContactState class：
class _ContactState extends State<Contact> {
@override
void initState() {
super.initState();
Future.delayed(
Duration.zero,
() => showDialog(
context: context,
barrierDismissible: true,
builder: (_) => AlertDialog(
// content
),
)
);
}
@override
Widget build(BuildContext context) {
//your original code without the AlertDialog widget
}
}
==========================
.已更新
我对此进行了一些更改 code.Now 它工作正常
我的应用程序中有一个 activity。我正在使用警报对话框。当我到达此 activity 并且警报对话框打开时，当我单击屏幕的其他区域时它消失了，但问题是当我想单击任何文本字段的内部时它一次又一次地重新出现。我希望它消失后再次出现，直到我再次转到其他 activity 和 return 到此 activity。我是 Flutter 的新手，几天前我就遇到了这个问题，我多次搜索这个问题但没有找到解决方案，任何可以帮助我的人，在此先感谢。 代码
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'bottomnavigationbar.dart';
class Contact extends StatefulWidget {
@override
_ContactState createState() => _ContactState();
}
class _ContactState extends State<Contact> {
@override
Widget build(BuildContext context) {
AlertDialog dialog = new AlertDialog(
content: Container(
width: 260.0,
height: 187.0,
decoration: new BoxDecoration(
shape: BoxShape.rectangle,
// color: const Color(0xFFFFFF),
borderRadius: new BorderRadius.all(new Radius.circular(50.0)),
),
child: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.all(1),
),
Container(
child: GestureDetector(
onTap: () {
// Route route =
// MaterialPageRoute(builder: (context) => Payment1());
// Navigator.pushReplacement(context, route);
// Navigator.pushNamed(context, "myRoute");
},
child: new Text(
"For Bikes-979578-6541",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.red,
fontSize: 18,
// fontWeight: FontWeight.w700,
),
),
),
),
Padding(
padding: EdgeInsets.all(1),
),
Divider(
thickness: 1.5,
),
Padding(
padding: EdgeInsets.all(1),
),
Container(
child: GestureDetector(
onTap: () {
// Route route =
// MaterialPageRoute(builder: (context) => Payment1());
// Navigator.pushReplacement(context, route);
// Navigator.pushNamed(context, "myRoute");
},
child: new Text(
"For Boats-979-541-3607",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.red,
fontSize: 18,
//fontWeight: FontWeight.w700,
),
),
),
),
Padding(
padding: EdgeInsets.all(1),
),
Divider(
thickness: 1.5,
),
Padding(
padding: EdgeInsets.all(1),
),
Container(
child: GestureDetector(
onTap: () {
// Route route =
// MaterialPageRoute(builder: (context) => Payment1());
// Navigator.pushReplacement(context, route);
// Navigator.pushNamed(context, "myRoute");
},
child: new Text(
"redtiderentals@yahoo.com",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.red,
fontSize: 18,
// fontWeight: FontWeight.w700,
),
),
),
),
Padding(
padding: EdgeInsets.all(1),
),
Divider(
thickness: 1.5,
),
Padding(
padding: EdgeInsets.all(1),
),
Container(
child: GestureDetector(
onTap: () {
// Route route =
// MaterialPageRoute(builder: (context) => Payment1());
// Navigator.pushReplacement(context, route);
// Navigator.pushNamed(context, "myRoute");
},
child: new Text(
"Follow Us on Facebook!",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.red,
fontSize: 18,
// fontWeight: FontWeight.w700,
),
),
),
),
Padding(
padding: EdgeInsets.all(1),
),
Divider(
thickness: 1.5,
),
Padding(
padding: EdgeInsets.all(1),
),
Container(
child: GestureDetector(
onTap: () {
// Navigator.pop(dialog);
// Route route =
// MaterialPageRoute(builder: (context) => Payment1());
// Navigator.pushReplacement(context, route);
// Navigator.pushNamed(context, "myRoute");
// Navigator.of(context).pop(false),
},
child: new Text(
"Done",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.red,
fontSize: 18,
//fontWeight: FontWeight.w700,
),
),
),
),
],
),
),
);
Future.delayed(
Duration.zero,
() => showDialog(
context: context, builder: (BuildContext context) => dialog),
);
TextStyle style = TextStyle(
fontFamily: 'Montserrat', color: Colors.white, fontSize: 16.0);
return Scaffold(
appBar: AppBar(
title: Text("Contact"),
centerTitle: true,
actions: <Widget>[
new IconButton(
icon: new Icon(
Icons.more_horiz,
size: 35,
color: Colors.white,
),
// tooltip: 'Closes application',
// onPressed: () => exit(0),
),
],
),
body: SingleChildScrollView(
child: Container(
padding: EdgeInsets.all(1),
color: Colors.black,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.width / 1.6,
// constraints: BoxConstraints.expand(),
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("images/contactpage.png"),
fit: BoxFit.cover),
),
),
Padding(
padding: EdgeInsets.all(8),
),
Text(
"Contact Info",
style: TextStyle(
color: Colors.red,
fontSize: 20,
fontWeight: FontWeight.w400,
),
),
Padding(
padding: EdgeInsets.all(8),
),
Divider(
color: Colors.white,
indent: 40,
endIndent: 40,
),
Padding(
padding: EdgeInsets.all(8),
),
Container(
padding: EdgeInsets.all(16),
child: Column(
//mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"We are a locally owned. family run business providing equipment rentals in Matagorda Country. We are dedicated to making your experience with us go as smoothly as possible. Fill out the form below or call us if you have any questions or concerns.",
style: TextStyle(
color: Colors.white70,
fontSize: 15,
fontWeight: FontWeight.w400,
),
),
Text(
"Mobile No:",
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.w400),
),
TextField(
style: style,
maxLength: 30,
cursorColor: Colors.red,
textAlign: TextAlign.left,
keyboardType: TextInputType.number,
decoration: InputDecoration(
hintText: 'Enter your mobile number',
hintStyle:
TextStyle(fontSize: 16, color: Colors.white),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
borderSide: BorderSide(
width: 0,
style: BorderStyle.none,
),
),
filled: true,
fillColor: Color(0xFF1E1E1E),
contentPadding: EdgeInsets.all(16),
),
),
Text(
"Email:",
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.w400),
),
TextField(
style: style,
maxLength: 16,
cursorColor: Colors.red,
textAlign: TextAlign.left,
keyboardType: TextInputType.emailAddress,
decoration: InputDecoration(
hintText: 'Enter your email',
hintStyle:
TextStyle(fontSize: 16, color: Colors.white),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
borderSide: BorderSide(
width: 0,
style: BorderStyle.none,
),
),
filled: true,
fillColor: Color(0xFF1E1E1E),
contentPadding: EdgeInsets.all(16),
),
),
Text(
"Description:",
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.w400),
),
TextField(
keyboardType: TextInputType.text,
maxLines: 8,
maxLength: 1000,
style: style,
cursorColor: Colors.red,
textAlign: TextAlign.left,
decoration: InputDecoration(
hintText: 'Enter Description Here',
hintStyle:
TextStyle(fontSize: 16, color: Colors.white),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
borderSide: BorderSide(
width: 0,
style: BorderStyle.none,
),
),
filled: true,
fillColor: Color(0xFF1E1E1E),
contentPadding: EdgeInsets.all(16),
),
),
Material(
elevation: 5.0,
borderRadius: BorderRadius.circular(30.0),
color: Colors.red,
child: MaterialButton(
minWidth: MediaQuery.of(context).size.width,
padding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
onPressed: () {
// Route route =
// MaterialPageRoute(builder: (context) => Payment2());
// Navigator.pushReplacement(context, route);
},
child: Text("Submit",
textAlign: TextAlign.center,
style: style.copyWith(
color: Colors.white,
fontWeight: FontWeight.w800)),
),
),
],
))
],
),
),
),
bottomNavigationBar: BottomNavigation(),
);
}
}
视频link [问题视频][1] [1]: https://drive.google.com/file/d/11i4R9DZAImO8CGw7TwOwQ0wbXXn9yHLr/view?usp=sharing
出现这种情况是因为您在构建方法中定义了警报对话框。每次重建小部件或您的状态更改时都会运行构建方法，因此您的警报对话框会重新出现。
尝试将 AlertDialog 对话框变量移到构建方法之外。
在 Widget 构建之外定义警报对话框并在需要时调用它
createAlertDialog(BuildContext){
return AlertDialog( //Your work )
@override Widget build(BuildContext context) {
//Whenver you need alertdialog call createAlertDialog() }```
Flutter 有一个 showDialog() 方法，专门用于对话框小部件。您可以将 AlertDialog 小部件放入其中并调用 initState() 中的 showDialog() 方法，该方法将在创建有状态小部件时恰好调用一次，因此在重建期间不会调用它。如果您想在点击其他区域时关闭对话框，请将 showDialog() 方法的 barrierDismissible 参数设置为 true。
你只需要像这样修改_ContactState class：
class _ContactState extends State<Contact> {
@override
void initState() {
super.initState();
Future.delayed(
Duration.zero,
() => showDialog(
context: context,
barrierDismissible: true,
builder: (_) => AlertDialog(
// content
),
)
);
}
@override
Widget build(BuildContext context) {
//your original code without the AlertDialog widget
}
}
========================== .已更新
我对此进行了一些更改 code.Now 它工作正常