颤振在底部表顶部显示 Snackbar

Posted 2023-02-23

【中文标题】颤振在底部表顶部显示 Snackbar

【英文标题】：Flutter Showing Snackbar On Top of Bottom Sheet

【发布时间】：2019-08-03 16:58:41

【问题描述】：

在我的代码中，我调用了底部工作表来显示瓷砖列表。这些磁贴包含显示快餐栏的按钮。该功能工作正常，唯一的问题是小吃栏显示在底部工作表后面，因此只有关闭底部工作表才能看到它。它们中的每一个都使用以下代码调用：

1.底页：

  void _settingModalBottomSheet(context, stream, scaffoldKey ) 
    if (_availableRides.length == 0) 
      return null;
     else 
      return scaffoldKey.currentState.showBottomSheet((context) 
        return Column(
          children: Widgets;
      );
    
  

2。小吃店

widget.scaffoldKey.currentState.showSnackBar(SnackBar(
         content: Text("Created", textAlign: 
    TextAlign.center,),),

有谁知道我如何将快餐栏放置在底部表的前面

【参考方案1】：

SnackBar 对此有一个属性。它叫做behavior，你可以这样做：

SnackBar(
    behavior: SnackBarBehavior.floating,
    ...

SnackBarBehavior enum

浮动 → const SnackBarBehavior

此行为将导致 SnackBar 显示在其他小部件上方 脚手架。这包括显示在 BottomNavigationBar 和一个 FloatingActionButton。

有关详细信息，请参阅 material.io/design/components/snackbars.html。

【讨论】：

不幸的是，它显示得比底部板甚至 FAB 还要高，这看起来很奇怪。我希望有一个选项可以在底部显示它，就像在 SnackBarBehavior.fixed 中一样，但在底部工作表上。

抱歉，建议的解决方案对我不起作用。谢谢。

【参考方案2】：

所以我可以通过在底部工作表中添加另一个 Scaffold() 并传递一个新的脚手架键来解决这个问题

【讨论】：

哦，天哪。我刚刚重构为在任何地方使用GlobalKey<ScaffoldState> 以显示SnackBar，因为BottomSheet 无法访问其父Scaffold，现在我必须丢弃所有内容。

你能分享一些sn-p吗

【参考方案3】：

我通过 Set (padding from bottom to SnackBar) 解决了 (bottomSheet : height) 的高度。

在这种情况下，我有这个底部表：

bottomSheet: Container(
          child: RaisedButton(...),
          width: MediaQuery.of(context).size.width,
          height: AppBar().preferredSize.height * 0.85,
        ),

还有这家小吃店：

_scaffoldKey.currentState.showSnackBar(SnackBar(
padding:EdgeInsetsDirectional.only(
bottom:AppBar().preferredSize.height * 0.85),
backgroundColor: Colors.red,
duration: new Duration(milliseconds: 3000),
content: Text('ETC..'),
                ));

【参考方案4】：

我通过将 bottomSheet 更改为 bottomNavigationBar 解决了这个问题，因为浮动小吃店解决方案对我不起作用。

【讨论】：

您在哪里进行了此更改？请分享。谢谢。

Scaffold 具有 bottomSheet 和 bottomNavigationBar 属性。当脚手架有一个 bottomSheet 小部件时，小吃栏不会显示在小部件的前面。当我把它改成bottomNavigation bar时，snackbar会显示在小部件的前面。

我已经有了一个bottomNavigationBar、bottomModelSheet和snackbar。 bottomModelSheet 显示为正在工作的 bottomNavigationBar 的叠加层。但是当我想在bottomModelSheet 上显示snackbar 时，它不会显示。 Snackbar 显示在bottomNavigationBar 和bottomModelSheet 之间。如果你有这方面的经验。请分享您的想法。非常感谢。

【参考方案5】：

您可以使用flushbar 包。如果需要与 bottomSheet 一起使用，我认为这是更好的选择。

bottomSheet 中的任何事件

 CustomFlushBar().flushBar(text: 'Thank you for your payment!', context: context,duration: 2);

CustomFlushBar 类

  class CustomFlushBar 
      void flushBar(int duration, @required String text, Color iconColor, IconData iconData, Color backgroundColor, @required BuildContext context) async 
        await dismiss();
        Flushbar(
          margin: EdgeInsets.all(8),
          borderRadius: 8,
          backgroundColor: backgroundColor ?? Palette.greenButton,
          icon: Icon(iconData ?? Icons.done, color: iconColor ?? Palette.white),
          flushbarStyle: FlushbarStyle.FLOATING,
          message: text,
          duration: Duration(seconds: duration ?? 3),
        )..show(context);
      
    
      Future<void> dismiss() async 
        if (!Flushbar().isDismissed()) 
          await Flushbar().dismiss();
        
      
    

【讨论】：

@AnandKumar context 应该是您页面的上下文，而不是底页上下文