Flutter中如何将Android系统导航栏颜色匹配Material 3设计

方法一：通过主题属性获取标准颜色（推荐） #

Material 3主题中，导航栏的默认颜色对应系统属性android:navigationBarColor，深色模式下会自动切换对应夜间属性。你之前用setSystemUIOverlayStyle未获取到正确颜色，大概率是没有正确从主题中解析属性值。

1. 在Activity中获取主题属性对应的颜色：

// Kotlin示例
val attrs = intArrayOf(android.R.attr.navigationBarColor)
val typedArray = theme.obtainStyledAttributes(attrs)
val navBarColor = typedArray.getColor(0, Color.BLACK) // 设黑色为默认兜底值
typedArray.recycle()

// Java示例
int[] attrs = new int[]{android.R.attr.navigationBarColor};
TypedArray typedArray = getTheme().obtainStyledAttributes(attrs);
int navBarColor = typedArray.getColor(0, Color.BLACK);
typedArray.recycle();

2. 将颜色应用到导航栏：

// Kotlin
window.setDecorFitsSystemWindows(true)
val windowInsetsController = ViewCompat.getWindowInsetsController(window.decorView)
windowInsetsController?.isAppearanceLightNavigationBars = false // 根据需求设置导航栏图标是否为浅色
window.navigationBarColor = navBarColor

// Java
getWindow().setDecorFitsSystemWindows(true);
WindowInsetsControllerCompat windowInsetsController = ViewCompat.getWindowInsetsController(getWindow().getDecorView());
if (windowInsetsController != null) {
    windowInsetsController.setAppearanceLightNavigationBars(false);
}
getWindow().setNavigationBarColor(navBarColor);

方法二：直接引用Material 3颜色资源 #

Gmail的Material 3导航栏颜色对应官方库的预设资源：浅色模式用md_theme_light_navigationBarColor，深色模式用md_theme_dark_navigationBarColor，可直接调用：

// Kotlin
val navBarColor = ContextCompat.getColor(this, R.color.md_theme_light_navigationBarColor)
window.navigationBarColor = navBarColor

确保项目已引入Material 3依赖：

implementation 'com.google.android.material:material:1.11.0' // 或更高版本

额外适配：Android 13+导航栏分割线 #

Gmail的Material 3导航栏在Android 13及以上系统会显示分割线，可同步设置：

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.TIRAMISU) {
    window.navigationBarDividerColor = ContextCompat.getColor(this, R.color.md_theme_light_navigationBarDividerColor)
}

常见排查点 #

• 确认App主题继承自Material 3主题，比如Theme.Material3.DayNight.NoActionBar
• Android 11及以上建议使用WindowInsetsControllerCompat替代setSystemUIOverlayStyle，后者部分属性已被废弃
• 检查是否有全屏设置、第三方库等其他代码覆盖了导航栏颜色

内容的提问来源于stack exchange，提问作者Jefferson Rodrigo de Melo