Flutter应用在一加和摩托罗拉设备上的状态栏重叠问题

我看了你的代码，这种状态栏和AppBar重叠的问题在部分安卓设备上确实容易出现，主要是因为SafeArea的层级配置、系统UI样式和安卓主题的适配没对齐。下面给你几个针对性的修复方案，一步步来：

1. 调整SafeArea的包裹层级（核心修复） #

你现在把整个Scaffold都包在了SafeArea里，但Scaffold的AppBar组件本身就会自动适配状态栏高度，两者叠加反而会导致布局计算异常，尤其是在一加、摩托罗拉这类对系统inset处理略有差异的设备上。

修改方式：把SafeArea从Scaffold外面移到Scaffold的body内部，只给内容区域添加安全区域适配，让AppBar直接和状态栏交互：

@override
Widget build(BuildContext context) {
  return AnnotatedRegion<SystemUiOverlayStyle>(
    value: SystemUiOverlayStyle.light.copyWith(
      statusBarColor: Colors.transparent,
      statusBarIconBrightness: Brightness.light,
    ),
    // 移除外层的SafeArea，直接返回Scaffold
    child: Scaffold(
      appBar: AppBar(
        // 保持你原来的AppBar代码不变
        title: Obx(() { 
          if (controller.tabIndex.value == 0) {
            return DropdownButton<String>(
              isExpanded: false,
              dropdownColor: AppColors.kWhiteColor,
              value: controller.selectedLocationId.value,
              onChanged: (selectedValue) {
                controller.selectedLocationId.value = selectedValue.toString();
              },
              items: controller.locationDropDownMenuItem.value,
              iconEnabledColor: AppColors.kBlackColor,
              underline: Container(),
              style: TextStyle(
                fontSize: 14,
                fontWeight: FontWeight.w500,
                color: AppColors.kBlackColor,
              ),
            );
          } else {
            return Text('Flutter App');
          }
        }),
        actions: [
          appBarAActionItem(
            iconData: Icons.account_balance_wallet_outlined,
            onTap: () => Get.toNamed(Routes.WALLET),
          ),
          appBarAActionItem(
            iconData: Icons.notifications_none_outlined,
            onTap: () => Get.toNamed(Routes.NOTIFICATIONS),
          ),
        ],
      ),
      drawer: NavigationDrawerWidget(),
      // 给body加上SafeArea，确保内容不被状态栏/导航栏遮挡
      body: SafeArea(
        child: Obx(
          () => IndexedStack(
            index: controller.tabIndex.value,
            children: [
              MeetingRoomView(
                locationId: controller.selectedLocationId.value,
              ),
              TicketView(),
            ],
          ),
        ),
      ),
      bottomNavigationBar: Obx(
        () => BottomNavigationBar(
          onTap: controller.changeTabIndex,
          currentIndex: controller.tabIndex.value,
          unselectedItemColor: AppColors.kBlackColor,
          selectedItemColor: AppColors.kDodgerBlueColor,
          type: BottomNavigationBarType.fixed,
          backgroundColor: Colors.white,
          elevation: 0,
          showSelectedLabels: true,
          showUnselectedLabels: true,
          items: [
            bottomNavigationBarItem(
              Icons.meeting_room_outlined,
              'Meeting Room',
            ),
            bottomNavigationBarItem(
              Icons.support_agent_outlined,
              'Tickets',
            ),
          ],
        ),
      ),
    ),
  );
}

2. 优化安卓主题配置（styles.xml） #

你的styles.xml里已经设置了状态栏透明，但需要补充一个属性确保系统能正确识别透明状态栏，避免设备兼容性问题：

在LaunchTheme和NormalTheme中添加android:windowDrawsSystemBarBackgrounds属性：

<style name="LaunchTheme" parent="@android:style/Theme.Light.NoTitleBar">
    <item name="android:windowBackground">@drawable/launch_background</item>
    <item name="android:windowNoTitle">true</item>
    <item name="android:statusBarColor">@android:color/transparent</item>
    <!-- 新增这个属性 -->
    <item name="android:windowDrawsSystemBarBackgrounds">true</item>
</style>

<style name="NormalTheme" parent="@android:style/Theme.Light.NoTitleBar">
    <item name="android:windowBackground">?android:colorBackground</item>
    <item name="android:windowNoTitle">true</item>
    <item name="android:statusBarColor">@android:color/transparent</item>
    <!-- 新增这个属性 -->
    <item name="android:windowDrawsSystemBarBackgrounds">true</item>
</style>

3. 全局初始化系统UI样式（可选但推荐） #

为了避免页面切换时的样式冲突，你可以在main函数里全局设置一次系统UI样式，和页面内的AnnotatedRegion保持一致：

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  // 全局设置状态栏样式
  SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
    statusBarColor: Colors.transparent,
    statusBarIconBrightness: Brightness.light,
  ));
  
  runApp(MyApp());
}

为什么这些修改能解决问题？ #

• 调整SafeArea层级后，AppBar可以直接利用Flutter内置的状态栏适配逻辑，避免重复计算安全区域导致的重叠；
• 补充安卓主题的windowDrawsSystemBarBackgrounds属性，确保一加、摩托罗拉这类设备能正确渲染透明状态栏；
• 全局初始化样式能保证所有页面的状态栏表现一致，减少页面切换时的异常。

你可以先尝试第一个修改（调整SafeArea层级），大部分情况下这个就能解决重叠问题，如果还有小问题再补充后面的步骤~

内容来源于stack exchange