flutter 状态栏不显示 问题解决办法

本篇文章主要讲解flutter 状态栏不显示 问题解决办法,通过本篇文章你可以快速解决遇到的这个问题。

日期:2025年2月15日

作者:任聪聪

现象说明:

现象1:不显示顶部的状态栏

现象2:不显示底部的 按钮

其他说明:

1、尝试通过AppBar解决无效。

2、设置全局样式参数无效。

复制代码
  // 设置系统UI模式为正常模式,显示状态栏和导航栏
  SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);

  // 设置状态栏样式
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    statusBarColor: Colors.transparent, // 设置状态栏颜色为透明
    statusBarIconBrightness: Brightness.dark, // 设置状态栏图标为深色
  ));

备注:总之很多方法都无效的情况。

问题原因:

这是由于位于:flutter\android\app\src\main\res\values-night\styles.xml文件下开启了全屏配置导致。

解决办法:

复制代码
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- Theme applied to the Android Window while the process is starting when the OS's Dark Mode setting is on -->
    <style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
        <!-- Show a splash screen on the activity. Automatically removed when
             the Flutter engine draws its first frame -->
        <item name="android:windowBackground">@drawable/launch_background</item>
        <item name="android:forceDarkAllowed">false</item>
        <item name="android:windowFullscreen">false</item>
        <item name="android:windowDrawsSystemBarBackgrounds">true</item>
        <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
    </style>
    <!-- Theme applied to the Android Window as soon as the process has started.
         This theme determines the color of the Android Window while your
         Flutter UI initializes, as well as behind your Flutter UI while its
         running.

         This Theme is only used starting with V2 of Flutter's Android embedding. -->
    <style name="NormalTheme" parent="@android:style/Theme.Black.NoTitleBar">
        <item name="android:windowBackground">?android:colorBackground</item>
    </style>
</resources>

说明: <item name="android:windowFullscreen">false</item> 此类目改为false即可。

相关推荐
sunbyte39 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | Expanding Cards (展开式卡片)
javascript·vue.js·ecmascript
肠胃炎41 分钟前
React Contxt详解
javascript·react.js·ecmascript
xx24061 小时前
React Native简介
javascript·react native·react.js
重生之后端学习2 小时前
02-前端Web开发(JS+Vue+Ajax)
java·开发语言·前端·javascript·vue.js
zimoyin2 小时前
kotlin Android AccessibilityService 无障碍入门
android·开发语言·kotlin
布鲁斯的快乐小屋2 小时前
axios的基本使用
javascript·ajax
来自星星的坤5 小时前
【Vue 3 + Vue Router 4】如何正确重置路由实例(resetRouter)——避免“VueRouter is not defined”错误
前端·javascript·vue.js
香蕉可乐荷包蛋9 小时前
浅入ES5、ES6(ES2015)、ES2023(ES14)版本对比,及使用建议---ES6就够用(个人觉得)
前端·javascript·es6
未来之窗软件服务9 小时前
资源管理器必要性———仙盟创梦IDE
前端·javascript·ide·仙盟创梦ide
西哥写代码11 小时前
基于cornerstone3D的dicom影像浏览器 第十八章 自定义序列自动播放条
前端·javascript·vue