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

Question

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

我需要完整的全屏显示，而我在Android的Flutter中打电话

enter image description here

enter image description here

是否有可能扑扑？我们可以显示很多应用程序，例如android设置应用程序，联系人等。...

enter image description here

Answer 1

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

• 您必须将BottomNavigationBar类型更改为BottomNavigationBar.fixed;
• 您必须更改高程，因为它应该是颜色所在的大“阴影”。

代码示例：

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

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

Answer 2

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

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'))
          ])))
您会注意到底部导航栏将显示红色（因为它是透明的，并且将显示父级的颜色（容器的红色）。