如何在Flutter中以编程方式关闭Persistent Bottom Sheet?

iyr7buue  于 2023-05-19  发布在  Flutter
关注(0)|答案(2)|浏览(207)

如何在Flutter中以编程方式关闭Persistent BottomSheet?也是有没有一种方法来显示只有一部分的持久性底部工作表和用户可以拖动工作表向上查看全部内容?
下面的代码显示持久的底部工作表。

homeScaffoldKey.currentState.showBottomSheet<Null>((BuildContext context) {
  return Container(
      height: 300.0,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Padding(
              padding: EdgeInsets.all(16.0),
              child: Text(
                'Persistent header for bottom bar!',
                textAlign: TextAlign.left,
              )),
          Text(
            'Then here there will likely be some other content '
                'which will be displayed within the bottom bar',
            textAlign: TextAlign.left,
          ),
        ],
      ));
});
2g32fytz

2g32fytz1#

您可以使用关闭底部工作表

Navigator.of(context).pop();

或者,您可以使用PersistentBottomSheetController关闭底部工作表。你要这么做。

PersistentBottomSheetController _controller; // instance variable

下面可以放在onPressed()类型的事件中,将显示底部工作表。

_controller = homeScaffoldKey
    .currentState
    .showBottomSheet((BuildContext context) {
     return YourWidgetImplementation();
  },
);

您可以使用

_controller.close();

也是有没有一种方法来显示只有一部分的持久性底部工作表和用户可以拖动工作表向上查看全部内容?
对不起,你必须自己做,到目前为止在Flutter中还没有这样的内置东西。您可以使用GestureDetector来按照自己的方式操作这些东西。
可以使用this answer

epfja78i

epfja78i2#

是的,通过在showModalBottomSheet方法中将isScrollControlled属性设置为true,可以只显示底部工作表的一部分。这允许模态底部工作表仅占用屏幕的一部分,然后向上拖动以显示其余内容。

showModalBottomSheet(
    context: context,
    isScrollControlled: true,
    builder: (BuildContext context) {
      return SingleChildScrollView(
        child: Container(
          height: MediaQuery.of(context).size.height * 0.8,
          padding: EdgeInsets.all(16.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              Text(
                'This is the partial modal',
                style: TextStyle(
                  fontSize: 24.0,
                  fontWeight: FontWeight.bold,
                ),
              ),
              SizedBox(height: 16.0),
              Text(
                'Drag up to see more content',
                textAlign: TextAlign.center,
              ),
              SizedBox(height: 16.0),
            ],
          ),
        ),
      );
    },
  );
}

相关问题