有没有办法实现 Flutter ***小吃店？

Posted 2023-02-23

【中文标题】有没有办法实现 Flutter ***小吃店？

【英文标题】：Is there any way to achieve a Flutter top snackbar?

【发布时间】：2019-06-09 05:41:43

【问题描述】：

我想创建一个简单的snackbar，它来自屏幕顶部而不是底部。在flutter中我使用了本地snackbar，但它没有这样的功能。

【问题讨论】：

你检查答案了吗？

我需要类似snackbar的东西，吐司是可以的，但前提是如果我没有找到任何解决方案。

我的错，我误读了这个问题。让我更新答案。

给你，我更新了答案。

【参考方案1】：

您可以使用https://pub.dartlang.org/packages/flushbar

RaisedButton(
  child: Text('Show Top Snackbar'),
  onPressed: () 
    Flushbar(
      flushbarPosition: FlushbarPosition.TOP,
    )
      ..title = "Hey Ninja"
      ..message = "Lorem Ipsum is simply dummy text of the printing and typesetting industry"
      ..duration = Duration(seconds: 3)
      ..show(context);
  ,
),

【讨论】：

是的，我也使用过这个插件，但是如果你连续显示两个小吃栏，而不是旧的不会自行关闭，它就会有一个重大错误。这就是为什么我一直在寻找一些替代方案。感谢您的帮助，但我正在寻找更多的东西。如果您有更多的建议而不是建议。

好吧，你可以尝试阻止用户同时创建2个snackbars。

这听起来不像是我的错误。我相信小吃店的行为方式相同。想象一下，有 5 条消息要同时显示，并且由于之前的消息会自动关闭以显示下一条，因此只会出现最后一个快餐栏。

不，这个插件实际上发生的情况是，如果我们在按钮单击时显示一条消息，并且您非常快地按下按钮 8 次，您会依次获得 8 个小吃吧，那么只有最近的会自行关闭，而其他人会一直呆在那里，直到您将它们刷出，这意味着您需要刷 7 个不方便用户使用的小吃店。

flushbar 现在在 pub.dev 上被标记为“已停产”?

【参考方案2】：

我用这个得到了这个结果。该键由构建在小部件内的 Scaffold 使用。

  @override
  void initState() 
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback(_onBuildCompleted);
  

  var scaffoldKey = new GlobalKey<ScaffoldState>();

  _onBuildCompleted(_) 
    print("SHOWN" * 3);

    scaffoldKey.currentState.showSnackBar(
        new SnackBar(backgroundColor: Colors.blue[600], content: Continue()));
    // Navigator.of(context).push(_createRoute());
  

【讨论】：

这将使小吃店从底部出现。

啊，在我的坏事之前我没有注意到这一点：S.

【参考方案3】：

用Column 包裹小部件并将mainAxisAlignment 设置为MainAxisAlignment.start。另外，设置 SnackBar 的颜色为透明。

Column(
     mainAxisAlignment: MainAxisAlignment.start,
      children: [yourWidget()], ),

【参考方案4】：

2021 年 1 月。也可以使用 Getx 包 - https://pub.dev/packages/get

只需使用代码

Get.snackbar(
  'message',
  'message body',
  onTap: (_) => DoSomething(),
  duration: Duration(seconds: 4),
  animationDuration: Duration(milliseconds: 800),
  snackPosition: SnackPosition.TOP,
);

BONUS:) 您可以在没有上下文的情况下调用它 - 从控制器、函数、BLoC 等。

查看精彩教程https://www.youtube.com/watch?v=RaqPIoJSTtI&t=503s

【参考方案5】：

使用这个包https://pub.dev/packages/another_flushbar

Flushbar(
  message: "Lorem Ipsum is simply dummy text of the printing and typesetting industry",
  icon: Icon(
    Icons.info_outline,
    size: 28.0,
    color: Colors.blue[300],
    ),
  duration: Duration(seconds: 3),
  leftBarIndicatorColor: Colors.blue[300],
)..show(context);

【参考方案6】：

您可以使用设备的高度设置边距以实现此目的：

ScaffoldMessenger.of(context).showSnackBar(new SnackBar(
    content: Text('Snackbar message'),
    behavior: SnackBarBehavior.floating,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(24),
    ),
    margin: EdgeInsets.only(
        bottom: MediaQuery.of(context).size.height - 100,
        right: 20,
        left: 20),
  ));

【讨论】：

为我工作感谢@David Jentjens