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

【问题标题】：How to set bottom navigation bar color transparent like phone x?如何设置底部导航栏颜色像手机x一样透明？
【发布时间】：2020-04-25 23:47:22
【问题描述】：

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

我需要完整的全屏手机，因为我在安卓颤振中打电话。

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

【问题讨论】：

您可以尝试禁用 SafeArea Similar answer
如何设置导航栏颜色像手机x一样透明？

标签： flutter transparent bottombar

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

代码示例：

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

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

【讨论】：

【解决方案3】：

我已经尝试过了，但应用栏是透明的，但问题是这些小部件在放置在脚手架内后仍然保持其高度。我假设它与 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'))
          ])))

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

【讨论】：