防止showModalBottomSheet被外部触摸隐藏

Question

在Flutter中，是否可以防止ModalBottomSheet被触摸到外部时隐藏？就像在showDialog()中使用barrierDismissible属性一样，我们可以使用该属性来防止对话框在外部触摸时关闭

- Govaadiyo

Answer 1

您可以按照以下方式使用 isDismissible: false 和 enableDrag: false

showModalBottomSheet(
      isDismissible: false,
      enableDrag: false,

      builder: (context) {
        return Container(
         height: 100.0
       )
      }
  );

- Martin Alvarado Diaz

Answer 2

你需要使用showBottomSheet()，而不是showModalBottomSheet()，前者不包含障碍物，更适合。

更多信息请参见这里。

- CopsOnRoad

---

抱歉，各位，我知道“showBottomSheet”，但我正在寻找“showModalBottomSheet()”。 - Govaadiyo

showModalBottomSheet和showBottomSheet之间唯一的区别是后者不能通过触摸其上下文以外的区域来解除。这不就是你要求的吗？ - CopsOnRoad

是的，但我认为在打开“showBottomSheet”后我们可以访问/触摸外部小部件？如果我错了，请纠正我。 - Govaadiyo

你说得对，你可以访问外部小部件，我想知道你具体要找什么模型？你只是想在打开表格时防止那些外部小部件被点击吗？你可以使用 AbsorbPointer 小部件来实现这个功能。 - CopsOnRoad

Answer 3

    class MyHomePage extends StatefulWidget {
    @override
    _MyHomePageState createState() => _MyHomePageState();
    }

    class _MyHomePageState extends State<MyHomePage> {
    final _scaffoldKey = new GlobalKey<ScaffoldState>();
    VoidCallback _showPersBottomSheetCallback;

    @override
    void initState() {
        super.initState();
        _showPersBottomSheetCallback = _showBottomSheet;
    }

    void _showBottomSheet() {
        setState(() {
        _showPersBottomSheetCallback = null;
        });

        _scaffoldKey.currentState
            .showBottomSheet((context) {
            return new Container(
                color: Colors.greenAccent,
                height: 300.0,
                child: new Center(
                child: new Text("Hi BottomSheet"),
                ),
            );
            })
            .closed
            .whenComplete(() {
            if (mounted) {
                setState(() {
                _showPersBottomSheetCallback = _showBottomSheet;
                });
            }
            });
    }

    @override
    Widget build(BuildContext context) {
        return new Scaffold(
        key: _scaffoldKey,
        appBar: new AppBar(
            title: new Text("Flutter BottomSheet"),
        ),
        body: GestureDetector(
            behavior: HitTestBehavior.opaque,
            onTap: () {},
            child: Padding(
            padding: const EdgeInsets.only(top: 10.0),
            child: new Center(
                child: new Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                    new RaisedButton(
                    onPressed: _showPersBottomSheetCallback,
                    child: new Text("Persistent"),
                    ),
                ],
                ),
            ),
            ),
        ),
        );
    }
    }

- Amit Prajapati

---

当您已经有专用的 showBottomSheet() 回调时，我认为这只是一种解决方法而不是解决方案。 - CopsOnRoad

Answer 4

尝试在showModalBottomSheet内将isDismissible设置为false。

        showModalBottomSheet(
                    isDismissible: false,
                    context: context,
                    builder: (BuildContext bc) {
                      return SheetWidget();
                    },
                  );

其中SheetWidget是您要作为BottomSheet调用的小部件

- farid98