Flutter中如何让Android的手势导航栏完全透明?

Flutter 开发中 安卓机器都有 像ios 的手势操作栏, 也就是屏幕底下的 那条线。

但这条线默认是有颜色的 (像下面这样)

一、全屏幕方式

复制代码
void main() {
   // 全屏沉浸式
   SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: [])

   runApp(YouApp());
}

问题也比较明显, 当想用手势的时候 需要向上滑动两次,先拉出手势条,然后再操作

二、使用同色覆盖(对 非单一色无法处理)

网易云音乐 就是使用了此方式。至少是发文章此时的 版本是这样的。

* 多个页面底色不同时,需要重新调用此代码。

复制代码
SystemChrome.setSystemUIOverlayStyle(
    const SystemUiOverlayStyle(
      systemNavigationBarColor: Colors.grey, // 根据主题设置底栏颜色
      statusBarColor: Colors.transparent, // 如果想要状态栏透明,可以设置为透明色
    ),
  );

效果如下

三、与 ios 效果相同。

最后一种也就是像ios 一样,手势栏覆盖在UI之上。

其实只在 第二部分代码中,多加一行代码即可。

值得注意的是, 一旦初始化完成后, 如果再调用此函数 SystemChrome.setEnabledSystemUIMode() 进行其他设置,会重新覆盖SystemUiMode.edgeToEdge 配置,导致 手势栏又变成 有背景色的样子

复制代码
void main() {
  SystemChrome.setSystemUIOverlayStyle(
    const SystemUiOverlayStyle(
      systemNavigationBarColor: Colors.transparent, // 根据主题设置底栏颜色
      statusBarColor: Colors.transparent, // 如果想要状态栏透明,可以设置为透明色
    ),
  );

   // 让 Flutter 在导航栏后面绘制
   SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);

   runApp(YouApp());
}

最终效果:

相关推荐
android_xc1 小时前
Android Studio适配butterknife遇到的坑
android·ide·android studio·butterknife
2501_915918411 小时前
uni-app 项目 iOS 上架效率优化 从工具选择到流程改进的实战经验
android·ios·小程序·uni-app·cocoa·iphone·webview
00后程序员张1 小时前
如何在不同 iOS 设备上测试和上架 uni-app 应用 实战全流程解析
android·ios·小程序·https·uni-app·iphone·webview
黑金IT1 小时前
Dart → `.exe`:Flutter 桌面与纯命令行双轨编译完全指南
flutter
iOS_MingXing1 小时前
flutter TabBar 设置isScrollable 第一个有间距
flutter
米豆同学3 小时前
SufraceFlinger图像合成原理(3)-SurfaceFlinger中Layer的创建和销毁
android
米豆同学3 小时前
SufraceFlinger图像合成原理(2)-SurfaceFlinger与应用进程间的通信
android
用户2018792831673 小时前
uses-library:系统应用报NoClassDefFoundError问题
android
叽哥3 小时前
Kotlin学习第 4 课:Kotlin 函数:从基础定义到高阶应用
android·java·kotlin
mg6683 小时前
安卓玩机工具----安卓“搞机工具箱”最新版 控制手机的玩机工具
android·智能手机