Flutter应用在iPhone上出现异常顶部白栏问题求助

问题分析 #

你遇到的iPhone顶部白栏，核心原因是SafeArea组件的默认留白行为（自动避开状态栏区域）、空AppBar的占位，以及iOS系统状态栏的样式配置冲突。要实现类似Android的沉浸式全屏，需要从Flutter代码和iOS项目配置两方面调整。

解决方案步骤 #

1. 调整Flutter代码，移除不必要留白

• 去掉SafeArea包裹：它会强制给状态栏和底部导航栏留空，是顶部白栏的主要诱因。
• 移除空AppBar：你的AppBar仅配置了状态栏样式，无实际内容，直接移除可避免顶部占位。
• 全局配置状态栏：在初始化阶段设置状态栏透明，让WebView内容延伸到状态栏下方。

修改后的完整代码：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:google_nav_bar/google_nav_bar.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int _selectedIndex = 0;
  final List<String> _urls = [
    "https://minecraft.xandersalarie.com/",
    "https://minecraft.xandersalarie.com/status",
  ];
  late WebViewController _controller;

  @override
  void initState() {
    super.initState();
    // 配置状态栏透明，内容延伸至状态栏下方
    SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
      statusBarColor: Colors.transparent,
      statusBarIconBrightness: Brightness.light, // 适配深色背景的浅色状态栏图标
    ));
    // 开启全屏模式，隐藏状态栏底部指示器（针对iPhone X及以上机型）
    SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
  }

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
    _controller.loadUrl(_urls[index]);
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        // 移除空AppBar
        body: Container(
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height,
          child: WebView(
            backgroundColor: Colors.black,
            initialUrl: _urls[_selectedIndex],
            javascriptMode: JavascriptMode.unrestricted,
            onWebViewCreated: (WebViewController webViewController) {
              _controller = webViewController;
            },
          ),
        ),
        bottomNavigationBar: Container(
          color: Colors.black,
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 18),
            child: GNav(
              backgroundColor: Colors.black,
              color: Colors.white,
              activeColor: Colors.white,
              tabBackgroundColor: Colors.white24,
              gap: 8,
              selectedIndex: _selectedIndex,
              onTabChange: _onItemTapped,
              padding: const EdgeInsets.symmetric(horizontal: 25, vertical: 10),
              tabs: const [
                GButton(icon: Icons.home, text: 'Home'),
                GButton(icon: Icons.stacked_bar_chart_outlined, text: 'Status'),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

2. iOS项目配置优化（可选，若上述代码仍有异常）

打开iOS项目的ios/Runner/Info.plist文件，添加或修改以下配置：

<!-- 允许通过代码控制状态栏样式 -->
<key>UIViewControllerBasedStatusBarAppearance</key>
<false/>
<!-- 设置状态栏图标为浅色 -->
<key>UIStatusBarStyle</key>
<string>UIStatusBarStyleLightContent</string>

额外说明 #

• 如果需要保留AppBar，可给AppBar设置backgroundColor: Colors.transparent和elevation: 0，同时移除SafeArea，让WebView在AppBar下方延伸。
• 测试时覆盖不同iPhone机型（刘海屏/非刘海屏），确保全面屏适配正常。

内容的提问来源于stack exchange，提问作者RavenGaming