Flutter - 创建自己的小吃店设计

Question

我想创建一个Snackbar，看起来像下面的图片，谷歌已经创建了。像这样的东西： 我想开始创建一个，但我不知道如何开始或如何自定义Snackbar. 我不想使用颤振吐司插件。我想创建我自己的Snackbar. 如果有人指导我，那就太好了

Answer 1

首先，根据你的截图，也许这已经被支持了SnackBarBehavior，只需传递snackbar构造函数behavior: SnackBarBehavior.floating，就像这样：

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

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

例如，我想删除小吃栏中的一些填充并在顶部添加一些边框，而在撰写本文时，这是不可能的。

您不应直接修改 ，snack_bar.dart因为它会修改您的本地副本 Flutter。直接修改snack_bar.dart有几个缺点：

1. 你所有的本地 Flutter 项目都会有这些修改。
2. 如果您在一个团队中，则其他人都不会拥有这些自定义设置。
3. 如果您使用“标准”CI/CD 管道（因为您只修改了 Flutter 的本地副本），则构建的应用程序将不会有这些自定义，显然发布的应用程序也不会。
4. 升级 Flutter（或更改频道）可能会更加困难，因为 Flutter 在后台使用 git（分支、提交）进行升级

添加任何复杂调整、对SnackBar小部件实施任何自定义（当然，除了其公共界面）的最佳解决方案是implementit。

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 频道之间切换并在您的计算机上升级您的 Flutter 版本），这意味着您可以对您的项目进行版本控制BetterSnackBar（CI 工作，合作）工人将看到变化）。

Answer 2

这不是一个小吃店，但它可以起到同样的作用。

1) 使用 LinearLayout、Relative 或 Constraint 创建一个视图，该视图看起来像您想要将其放置在页面上的小吃店。

2) 将“可见性”设置为“消失”或“不可见”。

3) 将 onCLickListener 添加到按钮，使 Snackbar（您刚刚制作的布局）在单击按钮时可见。