如何修改带有返回按钮的底部导航栏颜色

半透黑色本质是给纯黑色添加alpha透明通道，常用的50%透明度黑色对应色值为#80000000（十六进制格式）或rgba(0,0,0,0.5)，你可以按需调整透明度参数，数值越高导航栏颜色越深、透明度越低。

安卓原生开发 #

• XML布局静态设置：直接给BottomNavigationView添加background属性

  android:background="#80000000"
  

• Kotlin动态设置：

  // 方式1：直接解析十六进制色值
  bottomNav.setBackgroundColor(Color.parseColor("#80000000"))
  // 方式2：用argb方法更直观，参数依次为透明度(0-255)、红、绿、蓝
  bottomNav.setBackgroundColor(Color.argb(128, 0, 0, 0))
  

• 如需搭配沉浸式效果，可同时设置系统导航栏为透明：

  getWindow().setNavigationBarColor(Color.TRANSPARENT);
  

前端Web开发 #

给底部导航DOM元素添加如下CSS样式即可：

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  /* rgba第四个参数为透明度，取值0-1 */
  background-color: rgba(0, 0, 0, 0.5);
  /* 可选：添加毛玻璃效果，更贴近示例的质感 */
  backdrop-filter: blur(10px);
  z-index: 999;
}

Flutter开发 #

直接给BottomNavigationBar的backgroundColor属性赋值：

bottomNavigationBar: BottomNavigationBar(
  // withOpacity参数为透明度，取值0-1
  backgroundColor: Colors.black.withOpacity(0.5),
  // 导航项配置省略
  items: const [
    BottomNavigationBarItem(icon: Icon(Icons.home), label: '首页'),
    BottomNavigationBarItem(icon: Icon(Icons.person), label: '我的'),
  ],
),

如需适配底部安全区，可在外层包裹SafeArea组件。

内容的提问来源于stack exchange，提问作者Mahmoud Al-Haroon