颤音 - 如何将Snackbar定位在系统导航栏上方

Question

我的应用程序中有一个透明的系统导航栏。

该应用程序使用GetX小吃栏来投掷错误和成功消息。我坚持的是，每当应用程序投掷小吃吧时，小吃吧都会出现并通过透明导航栏消失（我可以看到小吃栏在导航栏中移动）。有什么方法可以在导航栏上方出现小吃吧？如何将小吃栏放置在系统导航栏上方？

Answer 1

您可能需要查看 snackbarbehavior 让一个人可以更改位置。如果您使用的是第三方库，则可能需要尝试将行为放入扩展方法中。在此所以问题确切的重复。

Snackbarbehavior枚举指出：

定义脚手架中应在哪里出现Snackbar，以及当脚手架还包括FloatingActionButton或BottomNavigationBar时，应如何调整其位置。

其他想法包括使用带有堆栈小部件的位置小部件来获得精确的控制。添加MediaQuery或其他分数小部件以允许多个屏幕尺寸。

Answer 2

我建议您使用Flutter团队开发的Snackbar小部件，而不是GetX Snackbar。它基本上出现在此处的导航栏上方。

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('BottomNavigationBar Sample'),
      ),
      body: Center(
        child: ElevatedButton(
      child: const Text('Show Snackbar'),
      onPressed: () {
          ScaffoldMessenger.of(context).showSnackBar(
            SnackBar(
              content: const Text('Awesome Snackbar!'),
              action: SnackBarAction(
                label: 'Action',
                onPressed: () {
                  // Code to execute.
                },
              ),
            ),
          );
        },
      ),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            label: 'Business',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            label: 'School',
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.amber[800],
        onTap: _onItemTapped,
      ),
    );
  }

Answer 3

  static GetSnackBar SuccessSnackBar({String title = 'Success', String message}) {
    Get.log("[$title] $message");
    return GetSnackBar(
      titleText: Text(title.tr, style: Get.textTheme.headline6.merge(TextStyle(color: Get.theme.primaryColor))),
      messageText: Text(message, style: Get.textTheme.caption.merge(TextStyle(color: Get.theme.primaryColor))),
      snackPosition: SnackPosition.BOTTOM,
      margin: EdgeInsets.all(20),
      backgroundColor: Colors.green,
      icon: Icon(Icons.check_circle_outline, size: 32, color: Get.theme.primaryColor),
      padding: EdgeInsets.symmetric(horizontal: 20, vertical: 18),
      borderRadius: 8,
      dismissDirection: DismissDirection.horizontal,
      duration: Duration(seconds: 5),
    );
  }

在我的应用中使用这样的。工作正常。

Answer 4

 Get.snackbar(
          "Bruh",
          "Your quantity have to at least one",
          colorText: Colors.black,
          backgroundColor: Palette.yellowColor,
        );

就我而言，这是我返回Show Shackbar以获取错误消息，Snackbar出现

在GetX Snackbar中Appbar下方的顶部，有一个小点心：属性

您可以使用它来显示您的