【问题标题】:Flutter - How to make SnackBar to not push FloatingActionButton upward?Flutter - 如何让 SnackBar 不向上推动 FloatingActionButton?
【发布时间】:2020-03-08 20:18:39
【问题描述】:

如何让SnackbarFloatingActionButton重叠,弹出时不向上推?我附上了我的简化代码以供参考。提前谢谢你。

class Screen extends StatefulWidget{

  @override
  State<StatefulWidget> createState() => ScreenState();
}

class ScreenState extends State<Screen>{

  BuildContext context;

  @override
  Widget build(BuildContext context) => Scaffold(
    floatingActionButton: FloatingActionButton(
      onPressed: action,
    ),
    body: Builder(
      builder : (BuildContext context){
        this.context = context;
        return Container();
      }
    )
  );

  action() => Scaffold.of(context).showSnackBar(SnackBar(
    duration: Duration(milliseconds : 1000),
    content: Container(height: 10)
  ));
}

【问题讨论】:

    标签: android flutter floating-action-button android-snackbar


    【解决方案1】:

    只需使用多个Scaffolds。用外层包裹内层。用inner把一切都归于它,bodyappBarbottomNavigationBarfloatingActionButton等等。从外部的bodyBuildContext 呼叫showSnackBar。如果有的话,将drawer 从内移到外,使其保持在SnackBar 之上。

    如果您喜欢像经典吐司一样弹出SnackBar,请参阅 Siddharth Patankar 的回答。也谢谢你。

    以下是我的答案的简化代码。

      @override
      Widget build(BuildContext context) => Scaffold(
        drawer : Drawer(child: Container()),
        body: Builder(
          builder : (BuildContext context){
            this.context = context;
            return Scaffold(
              body: Container(),
              floatingActionButton: FloatingActionButton(
                onPressed: () => Scaffold.of(context).showSnackBar(SnackBar(
                  duration: Duration(milliseconds : 1000),
                  content: Container(height: 30),
                )),
              ),
            );
          }
        )
      );
    

    【讨论】:

      【解决方案2】:

      您可以将SnackBarbehavior 属性设置为SnackBarBehavior.floating,这将在其他小部件上方显示Snackbar

      应该这样做 -

      class Screen extends StatefulWidget{
      
        @override
        State<StatefulWidget> createState() => ScreenState();
      }
      
      class ScreenState extends State<Screen>{
      
        BuildContext context;
      
        @override
        Widget build(BuildContext context) => Scaffold(
          floatingActionButton: FloatingActionButton(
            onPressed: action,
          ),
          body: Builder(
            builder : (BuildContext context){
              this.context = context;
              return Container();
            }
          )
        );
      
        action() => Scaffold.of(context).showSnackBar(SnackBar(
          duration: Duration(milliseconds : 1000),
          content: Container(height: 10)
          behavior: SnackBarBehavior.floating, // Add this line
        ));
      }
      

      有关详细信息,请参阅this 链接。

      【讨论】:

      • 谢谢。很好的解决方案。有什么办法让它叠加吗?
      • 您能否详细说明您所说的覆盖是什么意思?因为我提供的解决方案已经在其他小部件上方显示了SnackBar
      • Stack一样重叠
      • 据我所知,直接使用SnackBar 小部件是不可能的。您可能需要为此创建自己的自定义小部件,然后将其包装在 Stack 中。此外,根据 Google 的官方 Material Design Guidelines,不建议使用重叠的 SnackBar
      • 另外,如果我的回答解决了您的问题,请点击大复选框接受它作为答案。干杯!
      猜你喜欢
      • 2015-12-25
      • 2016-02-16
      • 2015-11-30
      • 2015-08-18
      • 2015-12-24
      • 2016-06-03
      • 2023-01-12
      • 1970-01-01
      • 2019-06-04
      相关资源
      最近更新 更多