Flutter隐藏系统栏后全面屏边缘返回手势触发异常如何解决？

问题根因 #

你使用的SystemChrome.setEnabledSystemUIOverlays([])属于已废弃的API，底层调用的是Android原生旧版沉浸模式，该模式默认会优先拦截屏幕边缘滑动手势用于唤起已隐藏的系统栏，手势不会直接传递到应用层，因此需要滑动两次才能触发返回操作。

完整解决方案 #

1 Flutter侧代码配置 #

替换旧版API为新版本实现，同时增加系统栏唤起后的自动隐藏逻辑，在页面初始化（如initState）或全局启动时调用：

import 'package:flutter/services.dart';

// 配置全屏沉浸模式
SystemChrome.setEnabledSystemUIMode(
  SystemUiMode.immersiveSticky,
  overlays: [],
);

// 监听系统栏可见状态变化，唤起后自动隐藏
SystemChrome.setSystemUIChangeCallback((systemOverlaysAreVisible) async {
  if (systemOverlaysAreVisible) {
    Future.delayed(const Duration(milliseconds: 400), () {
      SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky, overlays: []);
    });
  }
});

2 Android原生侧配置 #

修改android/app/src/main/kotlin/[你的应用包名]/MainActivity.kt文件，增加原生层面的沉浸模式配置：

import android.os.Build
import android.view.View
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.R) {
            window.setDecorFitsSystemWindows(false)
            window.insetsController?.apply {
                systemBarsBehavior = android.view.WindowInsetsController.BEHAVIOR_SHOW_TRANSIENT_BARS_BY_SWIPE
            }
        } else {
            @Suppress("DEPRECATION")
            window.decorView.systemUiVisibility = (
                View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY
                or View.SYSTEM_UI_FLAG_LAYOUT_STABLE
                or View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
                or View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
                or View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
                or View.SYSTEM_UI_FLAG_FULLSCREEN
            )
        }
    }
}

如果你的项目使用Java编写MainActivity，对应调整语法即可生效。

3 iOS适配 #

iOS侧默认不会触发该问题，若测试时出现同类异常，在项目ios/Runner/Info.plist中新增两项配置即可：

• 将Status bar is initially hidden设置为YES
• 将View controller-based status bar appearance设置为NO

内容的提问来源于stack exchange，提问作者Eldar Sakaev