Flutter Android 全透明状态栏与导航栏

在移动应用开发中，实现沉浸式界面可以显著提升用户体验，让内容完全扩展到整个屏幕空间。本文将详细介绍如何在Flutter应用中实现状态栏和导航栏的全透明效果。

一、Flutter端设置状态栏透明

在Flutter中，我们可以使用SystemChrome.setSystemUIOverlayStyle方法来定制状态栏的样式。以下是具体的实现方法：

1. 全局设置状态栏透明

要进行全局设置，通常在应用的入口文件（main.dart）中进行配置：

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
  runApp(MyApp());

  // 设置状态栏透明
  if (Platform.isAndroid) {
    SystemUiOverlayStyle systemUiOverlayStyle = const SystemUiOverlayStyle(
      statusBarColor: Colors.transparent, // 设置状态栏颜色为透明
      statusBarIconBrightness: Brightness.dark, // 设置状态栏图标颜色为深色
    );
    SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '透明状态栏示例',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: MyHomePage(),
    );
  }
}

2. 单页面设置状态栏透明

如果只需要在特定页面实现透明状态栏，可以使用AnnotatedRegion组件：

class TransparentStatusBarPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: const SystemUiOverlayStyle(
        statusBarColor: Colors.transparent,
        statusBarIconBrightness: Brightness.light, // 根据背景色调整图标颜色
      ),
      child: Scaffold(
        backgroundColor: Colors.blue,
        appBar: AppBar(
          title: Text('透明状态栏页面'),
          backgroundColor: Colors.transparent, // AppBar背景色透明
          elevation: 0, // 去除阴影
        ),
        body: Container(),
      ),
    );
  }
}

3. 与AppBar结合使用的注意事项

当设置状态栏透明后，内容可能会延伸到状态栏下方，需要适当调整布局：

Scaffold(
  extendBodyBehindAppBar: true, // 允许body延伸到AppBar下方
  appBar: AppBar(
    title: Text('透明状态栏'),
    backgroundColor: Colors.transparent, // 设置AppBar背景透明
    elevation: 0.0, // 去除阴影
  ),
  body: Container(
    // 内容区域
  ),
)

二、Android端设置导航栏透明

要实现导航栏透明，需要在Android原生端进行配置。

1. 修改styles.xml文件

在android/app/src/main/res/values/styles.xml文件中，修改或添加以下样式：

<resources>
    <!-- 应用主题 -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- 自定义主题设置 -->
        <item name="android:windowTranslucentNavigation">true</item>
        <item name="android:navigationBarColor">@android:color/transparent</item>
        <!-- 以下为可选设置，确保一致性 -->
        <item name="android:statusBarColor">@android:color/transparent</item>
        <item name="android:windowDrawsSystemBarBackgrounds">true</item>
    </style>
</resources>

2. 在AndroidManifest.xml中应用主题

确保在AndroidManifest.xml中将主题应用到你的Activity：

<application
    android:name=".Application"
    android:label="Your App"
    android:icon="@mipmap/ic_launcher"
    android:theme="@style/AppTheme"> <!-- 应用自定义主题 -->
    <activity
        android:name=".MainActivity"
        android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
        android:hardwareAccelerated="true"
        android:launchMode="singleTop"
        android:windowSoftInputMode="adjustResize">
        <!-- 活动特定设置 -->
    </activity>
</application>

3. 可选：在MainActivity中进一步配置

对于更精细的控制，可以在MainActivity中进一步配置：

// Kotlin版本
import android.os.Build
import android.os.Bundle
import android.view.WindowManager
import io.flutter.embedding.android.FlutterActivity

class MainActivity: FlutterActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        // 设置沉浸式导航栏
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            window.navigationBarColor = getColor(android.R.color.transparent)
            window.setFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS,
                WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS)
        }
    }
}

三、处理布局适配问题

设置状态栏和导航栏透明后，内容可能会与系统UI重叠，需要适当调整布局。

1. 使用SafeArea组件

最简便的方法是使用Flutter的SafeArea组件：

Scaffold(
  body: SafeArea(
    child: YourContentWidget(), // 你的内容组件
  ),
)

2. 手动处理边距

如果需要更精细的控制，可以手动处理边距：

Container(
  padding: EdgeInsets.only(
    top: MediaQuery.of(context).padding.top, // 状态栏高度
    bottom: MediaQuery.of(context).padding.bottom, // 导航栏高度
  ),
  child: YourContentWidget(),
)

四、兼容性考虑

Android版本差异：透明导航栏功能从Android 4.4（API 19）开始支持，但完全实现需要Android 5.0（API 21）及以上版本。
平台检查：在设置前检查平台版本：

if (Platform.isAndroid) {
  // 仅Android平台执行设置
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    statusBarColor: Colors.transparent,
  ));
}

图标颜色适配：根据背景色深浅调整状态栏图标颜色：

SystemUiOverlayStyle(
  statusBarColor: Colors.transparent,
  statusBarIconBrightness: Brightness.light, // 浅色背景用暗色图标
  // 或
  statusBarIconBrightness: Brightness.dark,  // 深色背景用浅色图标
)

五、常见问题与解决方案

第二次打开页面设置失效：在混合开发中，可能会遇到此问题。解决方案是在Android端重写onPostResume方法。
输入法弹出时布局异常：使用官方推荐的方法三可避免此问题。
特定厂商设备兼容性：小米、魅族等设备可能有特殊行为，需进行针对性测试。

总结

通过结合Flutter端的SystemChrome.setSystemUIOverlayStyle方法和Android原生端的styles.xml配置，我们可以完美实现状态栏和导航栏的透明效果，打造沉浸式的用户体验。关键在于两端的协同配置以及处理好透明化后的布局适配问题。

实现时务必注意版本兼容性测试，并在不同设备上验证效果，确保最佳的用户体验。