如何点击 BottomSheet 外部以将其关闭？

Question

我在

showModalBottomSheet

中有一个

SingleChildScrollView

小部件。当

showModalBottomSheet

弹出时，它会将我引导至具有自定义高度的

DraggableScrollableSheet

。一切都很好。但不知何故，似乎每当我使用

initialChildSize

自定义高度时，我都无法点击以关闭 BottomSheet。我该怎么办？

PS。根据我当前的代码，要关闭 BottomSheet，我必须手动向下滑动工作表。

代码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

GestureDetector(
    behavior: HitTestBehavior.opaque,
    onTap: () => Navigator.pop(context),
    child: DraggableScrollableSheet(
       initialChildSize: 0.65,
       maxChildSize: 1,
       minChildSize: 0.5,
    )
)

用手势检测器包裹我的可拖动底部表对我有用