我想创建一个Snackbar
,看起来像下面的图片,由Google创建。像这样:
我想开始创建一个,但是对此我一无所知,应该如何开始或如何自定义Snackbar
。我不想使用Flutter Toast插件。我想创建自己的Snackbar
。如果有人在这方面指导我,那将是很棒的
最佳答案
首先,根据您的屏幕截图,SnackBarBehavior
可能已支持此功能,只需传递 snackbar 构造函数behavior: SnackBarBehavior.floating
即可,如下所示:
SnackBar(behavior: SnackBarBehavior.floating, content: ...)
如果仍然不够好,最好的方法是从
SnackBar
小部件开始并对其进行自定义。尽管小部件的构造函数参数使小部件具有相当的灵活性,但是SnackBar
小部件不允许您修改它的每个小细节。例如,我想删除 snackbar 中的一些填充物,并在顶部添加一些边框,在撰写本文时,这是不可能的。
您不应该直接修改
snack_bar.dart
,因为它会修改本地副本Flutter。 直接修改snack_bar.dart
有两个缺点:添加任何复杂的调整,对
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/