flutter - 如何设置底部导航栏颜色像手机x一样透明？

Question

现在我正在运行最新的稳定版 1.12.13+hotfix.5

当我在安卓颤振中打电话时，我需要完整的全屏。

颤振有可能吗？我们可以展示很多应用程序，例如android设置应用程序，联系人等......

Answer 1

您可以通过将此代码片段添加到您的构建方法来做到这一点

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      systemNavigationBarColor: Colors.transparent);

Answer 2

我已经尝试过了，但是应用栏是透明的，但问题是这些小部件在放置在脚手架内后仍然保持高度。我假设它与 BotttomNavigationBar 的情况相同，因此在这种情况下，您可以将其添加到堆栈中（我就是这样做的），因此它确实出现在您的内容之上，并且确实反映了它的透明度，如下：

Scaffold(
      body: Container(
          color: Colors.red,
          child: Stack(children: <Widget>[
            Align(
                alignment: Alignment.bottomCenter,
                child: BottomNavigationBar(
                    elevation: 0,
                    backgroundColor: Colors.transparent,
                    items: const <BottomNavigationBarItem>[
                      BottomNavigationBarItem(
                        icon: Icon(Icons.home),
                        title: Text('Home'),
                      ),
                      BottomNavigationBarItem(
                        icon: Icon(Icons.business),
                        title: Text('Business'),
                      ),
                      BottomNavigationBarItem(
                        icon: Icon(Icons.school),
                        title: Text('School'),
                      ),
                    ],
                    currentIndex: 0,
                    selectedItemColor: Colors.amber[800])),
            Center(child: Text('hello'))
          ])))

你会注意到底部导航栏会显示为红色（因为它是透明的并且会显示父级的颜色（容器颜色为红色）。

Answer 3

BottomNavigationBar 中有一个名为“backgroundColor”的属性，您可以使用 Colors.transparent 使其像图片一样。但是，还有两个技巧：

• 您必须将 BottomNavigationBar 类型更改为 BottomNavigationBar.fixed;
• 你必须改变高度，因为它会是一个大的“阴影”，颜色应该是。

代码示例：

bottomNavigationBar: BottomNavigationBar(
          type: BottomNavigationBarType.fixed,
          backgroundColor: Colors.transparent,
          elevation: 0,  

如果您想对图标产生移动效果，请为每个图标声明一种颜色。