如何点击BottomSheet的外部来取消它

Question

我在SingleChildScrollView中有一个showModalBottomSheet小部件。当showModalBottomSheet弹出时，它会将我引导到具有自定义高度的DraggableScrollableSheet。一切都很好。但不知何故，似乎每当我使用initialChildSize进行自定义高度时，我都无法点击以忽略BottomSheet。我该怎么做？

PS。根据我目前的代码，要取消底部表单，我必须手动向下滑动表单。

代码1。

@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: Column(
children: [
Container(),
Container(
child: Expanded(
child: PageView(
controller: _pageController,
onPageChanged: (page) {},
children: [
SingleChildScrollView(
child: Column(
children: [
Container(
padding: EdgeInsets.only(
top: 1, left: 30, right: 30, bottom: 10),
child: Row(
children: [
Text(),
ElevatedButton(
onPressed: () {
showModalBottomSheet(
context: context,
builder: (context) =>
AssetScreen(),
isScrollControlled: true,
backgroundColor: Colors.transparent,
);
},
child: Icon(Icons.add, color: Colors.white),
),
],
),),
],
),
),
],
),
),
),
],
),
);
}}

代码2。

class AssetScreen extends StatelessWidget {
const AssetScreen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return DraggableScrollableSheet(
initialChildSize: 0.79,
builder: (_, controller)
=>
Container(
color: Color(0xff757575),
child: Container(
padding: EdgeInsets.all(30.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20.0),
topRight: Radius.circular(20.0),
)),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
SizedBox(),
Text(),
Center(
child: Column(
children: [],
),
),
),
);
}}

根据Dhrumil Shah在下面的评论，沮丧现在起作用了。但是，maxChildSize和minChildSize未按预期工作。这里少了什么？

@override
Widget build(BuildContext context) {
return GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: () => Navigator.pop(context),
child: DraggableScrollableSheet(
initialChildSize: 0.79,
maxChildSize: 0.79,
minChildSize: 0.3,
builder: (_, controller) =>
Container(
color: Color(0xff757575),
child: Container(
padding: EdgeInsets.all(30.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20.0),
topRight: Radius.circular(20.0),
)),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
SizedBox(),
Text(),
Center(
child: Column(
children: [],
),
),
),
),
),
),}

Answer 1

手势检测器(behavior：HitTestBehavior不透明，onTap:((=>Navigator.pop(上下文(，child:可拖动滚动表(initialChildSize:0.65，maxChildSize:1，minChildSize:0.5，(

用手势检测器包裹我的可拖动底片对我来说是