美文网首页
Flutter 在横屏侧面Dialog中显示SnackBar时,

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

作者: 风雪守候 | 来源:发表于2023-12-18 16:35 被阅读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了

    相关文章

      网友评论

          本文标题:Flutter 在横屏侧面Dialog中显示SnackBar时,

          本文链接:https://www.haomeiwen.com/subject/fjmagdtx.html