我想让我的 bottomNavBar 透明

Question

我想让我的底部导航栏透明，我已经尝试使用颜色属性的不透明度，但它不起作用。只是为了让你有一个想法我附上截图以便更好地理解

请忽略导航栏上的按钮，我只想要透明度，我的代码如下

return Scaffold(
  body: Column(
    .......
  bottomNavigationBar: Container(
    color: Colors.white,
    padding: EdgeInsets.all(20),
    child: Text(
      'SUIVANT',
      textAlign: TextAlign.center,
      style: TextStyle(
          fontFamily: 'Karla', fontSize: 20, fontWeight: FontWeight.bold),
    ),
  ),
);

如有任何帮助，我们将不胜感激。提前致谢。

Answer 1

我不知道你使用的是什么开发语言，但我可以告诉你在 css 方面做什么：

请尝试添加此背景颜色代码：#ffffff00 在 css

中应该是这样的

背景色：#ffffff00

Answer 2

尝试将 Container 的颜色设置为 Colors.transparent

像这样

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blue,
      body: Container(

      ),
      bottomNavigationBar: Container(
        padding: EdgeInsets.all(20),
        color: Colors.transparent,
        child: Text("Bottom Nav is Transparent", style: TextStyle(color: Colors.white),),
      ),
    );
  }

更新

如果您想使用 BottomNavigationBar，请将 elevation 设置为 0

例如

class Trans extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blue,
      body: Container(

      ),
      bottomNavigationBar: BottomNavigationBar(
        backgroundColor: Colors.transparent,
        elevation: 0,
        items: [
          BottomNavigationBarItem(title: Text("1",style: TextStyle(color: Colors.white),), icon: Icon(Icons.message)),
          BottomNavigationBarItem(title: Text("2",style: TextStyle(color: Colors.white),), icon: Icon(Icons.message))
        ],
      ),
    );
  }
}

Answer 3

经过大量思考和应用奇怪的方法后，我终于能够以一种非常不同的方式做到这一点。我必须完成 BottomNavigationBar: 属性因为它不允许修改。我不得不将主列包装在 Stack() 小部件中

return Scaffold(
  body: Stack(
    children: <Widget>[
      Column(
        children: <Widget>[
          //.......
          /*this is the Container() I had to add in stack after finishing the bottomnavbar*/
          Container(
            height: MediaQuery.of(context).size.height,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Container(),
                Container(
                  color: Colors.white.withOpacity(0.9),
                  width: MediaQuery.of(context).size.width,
                  padding: EdgeInsets.all(20),
                  child: Text(
                    'SUIVANT',
                    textAlign: TextAlign.center,
                    style: TextStyle(
                        fontFamily: 'Karla',
                        fontSize: 20,
                        fontWeight: FontWeight.bold),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    ],
  ),
);

我不知道这是一种糟糕的方法还是正确的方法，但经过大量思考后我找不到除此之外的解决方案。如有错误，请根据flutter规则随意修改。感谢大家的贡献。

This is how the result looks

我想让我的 bottomNavBar 透明

I want to make my bottomNavBar transparent

dart

flutter

bottomnavigationview