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即可。

相关推荐
ujainu8 小时前
Flutter + OpenHarmony 游戏开发进阶:用户输入响应——GestureDetector 实现点击发射
flutter·游戏·openharmony
Doro再努力8 小时前
【Linux操作系统10】Makefile深度解析:从依赖推导到有效编译
android·linux·运维·服务器·编辑器·vim
Daniel李华9 小时前
echarts使用案例
android·javascript·echarts
北原_春希9 小时前
如何在Vue3项目中引入并使用Echarts图表
前端·javascript·echarts
JY-HPS9 小时前
echarts天气折线图
javascript·vue.js·echarts
尽意啊9 小时前
echarts树图动态添加子节点
前端·javascript·echarts
吃面必吃蒜9 小时前
echarts 极坐标柱状图 如何定义柱子颜色
前端·javascript·echarts
O_oStayPositive9 小时前
Vue3使用ECharts
前端·javascript·echarts
竹秋…9 小时前
echarts自定义tooltip中的内容
前端·javascript·echarts
宝贝露.9 小时前
Axure引入Echarts图无法正常显示问题
前端·javascript·echarts