showGeneralDialog 中的 barrierDismissible 不适用于脚手架
barrierDismissible in showGeneralDialog is not working with Scaffold
我对 Flutter 还是个新手。我尝试使我的对话框在单击对话框外部时能够关闭。但是,如果我使用脚手架,barrierDismissible:true 将不起作用。我尝试使用 Wrap 但出现错误:将显示 No Material widget found。有没有关于如何关闭对话框的想法?
这是我的代码:
showGeneralDialog(
barrierDismissible: true,
pageBuilder: (context, anim1, anim2) {
context1 = context;
return StatefulBuilder(
builder: (context, setState) {
return Scaffold(
backgroundColor: Colors.black .withOpacity(0.0),
body: Align(
alignment: Alignment.bottomCenter,
child: Container(
child: InkWell()
)
)
}
}
)
显示 showGeneralDialog 不需要脚手架。您的代码中需要 Material 小部件,因为 InkWell 小部件需要一个 Material 祖先。您可以使用任何提供 material 的小部件,例如 Card 或 Material 小部件本身。 barrierLabel 也不能为空。
请查看下面的工作代码,或者您可以直接 运行 Dartpad https://dartpad.dev/6c047a6cabec9bbd00a048c972098671
上的代码
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: const Text("showGeneralDialog Demo"),
),
body: Center(
child: MyWidget(),
),
),
);
}
}
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return RaisedButton(
onPressed: () {
showGeneralDialog(
context: context,
barrierDismissible: true,
barrierLabel:
MaterialLocalizations.of(context).modalBarrierDismissLabel,
barrierColor: Colors.black54,
pageBuilder: (context, anim1, anim2) {
return Center(
child: Container(
width: 200,
height: 100,
child: StatefulBuilder(
builder: (context, snapshot) {
return const Card(
color: Colors.white,
child: Center(
child: InkWell(
child: Text(
"Press outside to close",
style: TextStyle(color: Colors.black),
),
),
),
);
},
),
),
);
},
);
},
child: const Text("Show Dialog"));
}
}
对于需要在 AlertDialogs 中使用 Scaffold(可能使用 ScaffoldMessenger)的任何人,这里是简单的解决方法:
用 IgnorePointer 包裹脚手架。 “barrierDismissible”值现在可以使用了。
@override
Widget build(BuildContext context) {
return IgnorePointer(
child: Scaffold(
backgroundColor: Colors.transparent,
body: AlertDialog(
title: title,
content: SizedBox(
width: MediaQuery.of(context).size.width,
child: SingleChildScrollView(
child: ListBody(
children: content
),
),
),
actions: actions,
insetPadding: const EdgeInsets.all(24.0),
shape: Theme.of(context).dialogTheme.shape,
backgroundColor: Theme.of(context).dialogTheme.backgroundColor,
)
),
);
}
我对 Flutter 还是个新手。我尝试使我的对话框在单击对话框外部时能够关闭。但是,如果我使用脚手架,barrierDismissible:true 将不起作用。我尝试使用 Wrap 但出现错误:将显示 No Material widget found。有没有关于如何关闭对话框的想法?
这是我的代码:
showGeneralDialog(
barrierDismissible: true,
pageBuilder: (context, anim1, anim2) {
context1 = context;
return StatefulBuilder(
builder: (context, setState) {
return Scaffold(
backgroundColor: Colors.black .withOpacity(0.0),
body: Align(
alignment: Alignment.bottomCenter,
child: Container(
child: InkWell()
)
)
}
}
)
显示 showGeneralDialog 不需要脚手架。您的代码中需要 Material 小部件,因为 InkWell 小部件需要一个 Material 祖先。您可以使用任何提供 material 的小部件,例如 Card 或 Material 小部件本身。 barrierLabel 也不能为空。
请查看下面的工作代码,或者您可以直接 运行 Dartpad https://dartpad.dev/6c047a6cabec9bbd00a048c972098671
上的代码import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: const Text("showGeneralDialog Demo"),
),
body: Center(
child: MyWidget(),
),
),
);
}
}
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return RaisedButton(
onPressed: () {
showGeneralDialog(
context: context,
barrierDismissible: true,
barrierLabel:
MaterialLocalizations.of(context).modalBarrierDismissLabel,
barrierColor: Colors.black54,
pageBuilder: (context, anim1, anim2) {
return Center(
child: Container(
width: 200,
height: 100,
child: StatefulBuilder(
builder: (context, snapshot) {
return const Card(
color: Colors.white,
child: Center(
child: InkWell(
child: Text(
"Press outside to close",
style: TextStyle(color: Colors.black),
),
),
),
);
},
),
),
);
},
);
},
child: const Text("Show Dialog"));
}
}
对于需要在 AlertDialogs 中使用 Scaffold(可能使用 ScaffoldMessenger)的任何人,这里是简单的解决方法:
用 IgnorePointer 包裹脚手架。 “barrierDismissible”值现在可以使用了。
@override
Widget build(BuildContext context) {
return IgnorePointer(
child: Scaffold(
backgroundColor: Colors.transparent,
body: AlertDialog(
title: title,
content: SizedBox(
width: MediaQuery.of(context).size.width,
child: SingleChildScrollView(
child: ListBody(
children: content
),
),
),
actions: actions,
insetPadding: const EdgeInsets.all(24.0),
shape: Theme.of(context).dialogTheme.shape,
backgroundColor: Theme.of(context).dialogTheme.backgroundColor,
)
),
);
}