Question

我想创建一个Snackbar，类似于Google创建的Snackbar。像这样的东西：我想从今天开始创建一个，但是我不知道如何开始或如何自定义Snackbar。需要明确的是，我不需要任何flutter_toast插件。我正在尝试创建自己的public class CappedMap { public static int insert(AerospikeClient client, int i) { Key key = new Key("test", "testMap", "user1"); MapPolicy mPolicy = new MapPolicy(); int retVal=0; try { client.operate(null, key, MapOperation.removeByIndexRange("myMap",-10,10,MapReturnType.INVERTED), // INVERTED introduced in server version 3.16.0.1 MapOperation.put(mPolicy, "myMap", Value.get(i), Value.get("A quick brown fox jumps right over a lazy dog") )); } catch (AerospikeException e) { System.out.println("Error Code: "+e.getResultCode()); } return i; } public static void main(String[] args) { AerospikeClient client = new AerospikeClient("127.0.0.1", 3000); int retVal = 0; for (int i = 0; i < 123; i++) { System.out.println("Inserting k = "+i); i = insert(client, i); } client.close(); } }。如果有人可以帮助您走上正轨，那就太棒了。

Answer 1

这不是小吃店，但可以正常工作。

1）使用LinearLayout，Relative或Constraint创建一个看起来像您想要在其上的页面的小吃店插件的视图。

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

3）将onCLickListener添加到按钮上，以使单击该按钮时即可显示Snackbar（刚刚制作的布局）。

Answer 2

编辑：警告！！！！我检查了一下，它在您所有的项目中都会改变，所以我认为这不是一个很好的选择

您好，我一直在尝试与您做同样的事情，而我发现的，对您有所帮助的方法是编辑main快餐_bar.dart文件。您可以通过按住Control键并单击代码中的Snackbar小部件来访问它。

此后，只需在开头“ import'package：flutter / material.dart';”处添加即可。并更改它：

docker pull helmcr.azurecr.io/helloworldtest:0.7

为此：

      child: Material(
      elevation: 6.0,
      color: _kSnackBackground,
      child: Theme(
        data: darkTheme,
        child: mediaQueryData.accessibleNavigation ? snackbar : FadeTransition(
          opacity: fadeAnimation,
          child: snackbar,
        ),
      ),
    ),

实现小吃店的结果将是下一个：

Answer 3

首先，根据您的屏幕截图，SnackBarBehavior可能已经支持了此操作，只需通过快餐栏构造器behavior: SnackBarBehavior.floating，如下所示：

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

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

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

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

您当地的所有Flutter项目都将进行这些修改。
如果您在团队中，没有其他人可以进行这些自定义。
如果您使用“标准” CI / CD管道（因为您仅修改了Flutter的本地副本），则显然内置的应用程序将没有这些自定义项，发布的应用程序也将没有这些自定义项。
升级Flutter（或更改频道）可能会更加困难，因为Flutter在后台使用git（分支，提交）进行升级

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

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版本），这意味着您可以通过版本控制项目的{{1 }}（CI工作正常，同事将看到更改）。

Answer 4

如果你想实现浮动的外观，从底部向上滑动的漂亮动画，你可以手动完成，对标准的 SnackBar 实现进行一些自定义，而无需编辑 Flutter 的源代码：

final snackBar = SnackBar(
  backgroundColor: Colors.transparent,
  elevation: 0,
  content: Container(
      padding: const EdgeInsets.all(8),
      decoration: BoxDecoration(
        color: Colors.greenAccent,
        border: Border.all(color: Colors.green, width: 3),
        boxShadow: const [
          BoxShadow(
            color: Color(0x19000000),
            spreadRadius: 2.0,
            blurRadius: 8.0,
            offset: Offset(2, 4),
          )
        ],
        borderRadius: BorderRadius.circular(4),
      ),
      child: Row(
        children: [
          const Icon(Icons.favorite, color: Colors.green ),
          const Padding(
            padding: EdgeInsets.only(left: 8.0),
            child: Text('Yay! A SnackBar!\nYou did great!', style: TextStyle(color: Colors.green)),
          ),
          const Spacer(),
          TextButton(onPressed: () => debugPrint("Undid"), child: Text("Undo"))
        ],
      )
  ),
);
ScaffoldMessenger.of(context).showSnackBar(snackBar);

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

4 个答案: