showBottomSheet 弹框后,如何知道父级页面被点击?
时间: 2024-01-28 17:02:44 浏览: 68
可以在父级页面中使用 GestureDetector 或 InkWell 等手势识别器来监听用户的点击事件,并在回调函数中关闭弹框。具体实现可以参考以下代码:
```dart
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
bool _isBottomSheetVisible = false;
@override
Widget build(BuildContext context) {
return Scaffold(
key: _scaffoldKey,
appBar: AppBar(
title: Text("My App"),
),
body: GestureDetector(
onTap: () {
if (_isBottomSheetVisible) {
Navigator.pop(context);
setState(() {
_isBottomSheetVisible = false;
});
}
},
child: Center(
child: RaisedButton(
child: Text("Show Bottom Sheet"),
onPressed: () {
showModalBottomSheet(
context: context,
builder: (BuildContext context) {
return Container(
height: 200.0,
child: Center(
child: Text("Bottom Sheet"),
),
);
},
);
setState(() {
_isBottomSheetVisible = true;
});
},
),
),
),
);
}
}
```
在上面的代码中,我们在父级页面中使用了 GestureDetector 来监听用户的点击事件。当弹框出现时,如果用户在父级页面上点击,就会触发 GestureDetector 的 onTap 回调函数,这时我们就可以关闭弹框并更新状态了。同时需要注意的是,在打开弹框时,需要将 `_isBottomSheetVisible` 设置为 `true`,以便在父级页面被点击时能够正确地处理逻辑。
阅读全文