我想创建一个Snackbar,看起来像下面的图片,由Google创建。像这样:dart - Flutter-创建自己的 snackbar 设计-LMLPHP
我想开始创建一个,但是对此我一无所知,应该如何开始或如何自定义Snackbar。我不想使用Flutter Toast插件。我想创建自己的Snackbar。如果有人在这方面指导我,那将是很棒的

最佳答案

首先,根据您的屏幕截图,SnackBarBehavior可能已支持此功能,只需传递 snackbar 构造函数behavior: SnackBarBehavior.floating即可,如下所示:

SnackBar(behavior: SnackBarBehavior.floating, content: ...)

如果仍然不够好,最好的方法是从SnackBar小部件开始并对其进行自定义。尽管小部件的构造函数参数使小部件具有相当的灵活性,但是SnackBar小部件不允许您修改它的每个小细节。

例如,我想删除 snackbar 中的一些填充物,并在顶部添加一些边框,在撰写本文时,这是不可能的。

您不应该直接修改snack_bar.dart,因为它会修改本地副本Flutter。 直接修改snack_bar.dart有两个缺点:
  • 您所有的本地Flutter项目都将进行这些修改。
  • 如果您在团队中,则没有其他人可以进行这些自定义。
  • 如果您使用“标准” CI/CD管道(因为您仅修改了Flutter的本地副本),则显然内置的应用程序将不具有这些自定义功能,发布的应用程序也将不具有这些自定义功能。
  • 升级Flutter(或更改 channel )可能会更加困难,因为Flutter在后台使用git(分支,提交)来升级

  • 添加任何复杂的调整,对SnackBar小部件实现任何自定义(当然,除了其公共(public)界面之外)的最佳解决方案是对其进行implement
    class BetterSnackBar extends StatelessWidget implements SnackBar {
      Widget build(BuildContext context) {
         // Tweak the build method for maximum customization
      }
    
      // rest of the class, you can just copy-paste it
      // from SnackBar, if you want to make sure you support
      // everything the original snack bar supports
    }
    

    这样,您仍然可以像使用原始样式一样使用自定义BetterSnackBar小部件,以使用脚手架Scaffold.of(context).showSnackBar(betterSnackBar);进行显示。

    此解决方案还使您的本地Flutter副本保持不变(其他项目不会受到它的影响,您可以在Flutter channel 之间轻松切换并在计算机上升级Flutter版本),这意味着您可以版本控制项目的BetterSnackBar(CI可以, -员工将看到更改)。

    关于dart - Flutter-创建自己的 snackbar 设计,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/53365785/

    10-11 22:28
    查看更多