Flutter 在横屏侧面Dialog中显示SnackBar时,

2023-12-18  本文已影响0人  风雪守候

当手机横屏时,在侧面弹出不全屏的dialog后,需要在dialog中显示SnackBar时,发现除了dialog中会显示SnackBar,底下一层也会重复显示一个SnackBar,现在要去掉底下一层那个显示。
首先显示SnackBar需要Scaffold.

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: TextButton(
          child: const Text('显示消息'),
          onPressed: () {
            ScaffoldMessenger.of(context).showSnackBar(const SnackBar(content: Text('显示SnackBar')));
          },
        ),
      ),
    );

以上代码就可以显示一个SnackBar消息
但是在横屏侧边非全屏dialog中会发现底部有重复的显示。
要去掉底部那个SnackBar,首先要使用自己界面的Scaffold的context

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Builder(
        builder: (context) {
          return Center(
            child: TextButton(
              child: const Text('显示消息'),
              onPressed: () {
                ScaffoldMessenger.of(context).showSnackBar(const SnackBar(content: Text('显示SnackBar')));
              },
            ),
          );
        }
      ),
    );

如上面代码所示,加一层Builder嵌套可以让下面使用的是当前Scaffold的context,但是此时运行发现还是会有底部一层的SnackBar显示,这个时候需要通过ScaffoldMessenger来做隔断,如下

  @override
  Widget build(BuildContext context) {
    return ScaffoldMessenger(
      child: Scaffold(
        body: Builder(
          builder: (context) {
            return Center(
              child: TextButton(
                child: const Text('显示消息'),
                onPressed: () {
                  ScaffoldMessenger.of(context).showSnackBar(const SnackBar(content: Text('显示SnackBar')));
                },
              ),
            );
          }
        ),
      ),
    );

使用ScaffoldMessenger嵌套以后就可以将SnackBar显示限定在当前的Scaffold中,这样底部就不会再显示SnackBar了

上一篇 下一篇

猜你喜欢

热点阅读