以编程方式关闭模态底部图表

Question

我正在showModalBottomSheet<Null>()使用GestureDetector在几个小部件中显示一个BottomSheet .我希望看到BottomSheet不仅通过触摸它而且还在内部的GestureDetector的onTap事件之后关闭.但是,似乎GestureDetector没有转发触摸事件.

所以我想知道,有没有办法以编程方式触发ModalBottomSheet的关闭或告诉GestureDetector转发触摸事件？

更新(2018-04-12):

下面是一个代码片段,以便更好地理解.问题是当点击"Item 1"或"Item 2"时,ModalBottomSheet没有关闭.

showModalBottomSheet<Null>(context: context, builder: (BuildContext context)
{
  return new SingleChildScrollView(child:
    new Column(crossAxisAlignment: CrossAxisAlignment.stretch, children: [
      new GestureDetector(onTap: () { doSomething(); }, child:
        new Text("Item 1")
      ),
      new GestureDetector(onTap: () { doSomething(); }, child:
        new Text("Item 2")
      ),
    ]),
  );
});

Answer 1

我无法找到如何传递由GestureDetector捕获的事件.但是,通过编程方式关闭ModalBottomSheet

Navigator.pop(context);

所以我只是在GestureDetector的onTap回调函数中调用pop函数.

showModalBottomSheet<Null>(context: context, builder: (BuildContext context)
{
  return new SingleChildScrollView(child:
    new Column(crossAxisAlignment: CrossAxisAlignment.stretch, children: [
      new GestureDetector(onTap: () {
          Navigator.pop(context);
          doSomething();
        }, child:
        new Text("Item 1")
      ),
      new GestureDetector(onTap: () {
          Navigator.pop(context);
          doSomething();
        }, child:
        new Text("Item 2")
      ),
    ]),
  );
});

Answer 2

class _FABState extends State<FAB> {
  bool isOpen = false;

  var bottomSheetController;

  @override
  Widget build(BuildContext context) {
    return FloatingActionButton(
      onPressed: () {
        setState(() {
          isOpen = !isOpen;
        });
        print('tapped on the bottom sheet');
        if(isOpen) {
          bottomSheetController = showBottomSheet(
              backgroundColor: Colors.transparent,
              context: context,
              builder: (ctx) {
                return ClipRRect(
                  borderRadius: BorderRadius.only(
                    topRight: Radius.circular(20),
                    topLeft: Radius.circular(20),
                  ),
                  child: Container(
                    height: 150,
                    color: Colors.black,
                    child: TextField()
                  ),
                );
              });
          bottomSheetController.closed.then((value) {
            setState(() {
              isOpen = !isOpen;
            });
          });
        } else {
          Navigator.of(context).pop();
          setState(() {
            isOpen = !isOpen;
          });
        }
      },
      child: isOpen?Icon(Icons.arrow_downward):Icon(Icons.arrow_upward),
    );
  }
}

Answer 3

通常有两种类型的底片。

（I）showModalBottomSheet//像一样工作Dialog，不属于Scaffold

（II）showBottomSheet//这是Scaffold

显示和隐藏 showModalBottomSheet

此代码显示底部工作表，并在点击 FlutterLogo

@override
void initState() {
  super.initState();
  Timer.run(() {
    showModalBottomSheet(
      context: context,
      builder: (_) {
        return GestureDetector(
          onTap: () => Navigator.of(context).pop(), // closing showModalBottomSheet
          child: FlutterLogo(size: 200),
        );
      },
    );
  });
}

输出：

显示和隐藏 showBottomSheet

此代码显示一个按钮，它将打开和关闭底部的工作表。

PersistentBottomSheetController _controller;
GlobalKey<ScaffoldState> _key = GlobalKey();
bool _open = false;

@override
Widget build(BuildContext context) {
  return Scaffold(
    key: _key,
    body: Center(
      child: RaisedButton(
        onPressed: () {
          if (!_open) {
            _controller = _key.currentState.showBottomSheet(
              (_) => SizedBox(
                child: FlutterLogo(size: 200),
                width: double.maxFinite,
              ),
            );
          } else {
            _controller.close();
          }
          setState(() => _open = !_open);
        },
        child: Text(_open ? "Close" : "Open"),
      ),
    ),
  );
}

输出：

Answer 4

在颤动中显示和隐藏底部工作表：

 showModalBottomSheet(
    context: context,
    builder: (bCtx) {
      return GestureDetector(
        behavior: HitTestBehavior.opaque,
        child: Container(height: 300, child: Text('Bottom sheet widget'),),
        onTap: () {
          Navigator.of(context).pop();
        },
      );
    },
  );

Answer 5

如果您的模态表没有下降并直接返回到上一页，那么您可以使用，然后使用其他功能中的{useRootNavigator:true}a 。Navigator.pop(context);它只会隐藏模式表，而不会转到上一页。

Answer 6

一旦您的代码完成了预期的任务，您可以Navigator.of(context, rootNavigator: true).pop();在末尾添加以便模式关闭