flutter 项目在小米 Pad 分屏的时候会直接白屏

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

This topic created in 505 days ago, the information mentioned may be changed or developed.

有用户反馈小米在应用分屏的时候会白屏。

就买了一个设备做测试。

开始测试的时候发现有些页面正常，有些是白屏。

后面找到了原因：

return Scaffold(
  appBar: AppBar(
    title: Text('Account'),
  ),
  backgroundColor: Theme.of(context).colorScheme.surfaceVariant,
  body: Text('Account'),
);

只要存在 appBar ，在分屏的时候就会白屏。

原本以为是我产品使用了大量组件是不是有其他兼容的问题

直接重新创建一个新的 flutter 项目，demo 里只要存在 appBar 也是白屏。

这么重要的组件小米竟然有兼容问题，有点离谱...

网上搜了下解决方案要对每个文件加兼容代码，也没继续尝试。

这样每写一个组件都要加这个兼容代码这也太恶心了。

不知道大家有没有好的解决方案。

Supplement 1 · Jun 23, 2025

flutter 3.2
Pad 设备是 Xiaomi Pad 7Pro
系统版本：2.0.202.0

Supplement 2 · Jun 23, 2025

还有一台红米 Xiaomi Pad 6
系统最新版本：2.0.9.0
这个设备下是正常的

Supplement 3 · Jun 23, 2025

这是一个非常基础的组件
appabr 几乎每个页面都会用到
在大部分设备下没兼容问题，更不要提原生安卓了
小米部分系统版本下跑不起来
那我觉得是小米系统的问题

Supplement 4 · Mar 9

MIUI 小窗口白屏的根本原因：

小窗口模式下，系统仍然把状态栏高度（ MediaQuery.padding.top ）报告为正常值（比如 28dp ），但小窗口本身可能只有 80~100dp 高。Flutter 的 Scaffold 用这个 padding 来计算 AppBar 的位置，导致内容区高度变为负数或接近 0 ，页面就白屏了。

修复方式

在 MaterialApp 的 builder 里拦截 MediaQuery ，当检测到 padding.top >= 窗口高度 * 40% 时（正常全屏不可能，只有小窗口才会触发），强制把 padding.top 清零，AppBar 就能正常渲染了：

builder: (context, child) {
final mq = MediaQuery.of(context);
final windowHeight = mq.size.height;
final statusBarHeight = mq.padding.top;
if (statusBarHeight > 0 && statusBarHeight >= windowHeight * 0.4) {
return MediaQuery(
data: mq.copyWith(
padding: mq.padding.copyWith(top: 0),
viewPadding: mq.viewPadding.copyWith(top: 0),
),
child: child!,
);
}
return child!;
},

这是 cluade code 帮我写的处理方案实测可以解决 xiaomi pad 上的问题

flutter

appbar

分屏

19 replies • 2025-07-23 12:07:11 +08:00