我的 iPhone 上的 flutter 应用程序上有奇怪的白色顶栏

Question

我最近在 flutter 中制作了自己的应用程序，它运行得很好。我唯一注意到的是，当我在 iPhone 上查看它时，我有一个奇怪的白色顶栏。

我添加了一张图片来向您展示我的意思。

白色顶栏

在安卓手机上测试时，白条不存在

这是我来自 main.dart 的代码：

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();
  }

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home:  Scaffold(
        appBar: AppBar(
          systemOverlayStyle: const SystemUiOverlayStyle(statusBarColor: Colors.black),
        ),
        body: SafeArea(
          child: 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',
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

我尝试了很多事情，比如将我的 webview 元素包装在容器中并使用

 width: MediaQuery.of(context).size.width, height:MediaQuery.of(context).size.height ,

我也尝试过更改应用栏：

 appBar: AppBar( systemOverlayStyle: const SystemUiOverlayStyle(statusBarColor: Colors.black), ),

在脚手架内。这也不起作用。

我的目标是让我的 webview 全屏显示（或者像 Android 沉浸模式一样）。我不知道这是否可以通过填充来实现，或者我是否必须在我的 flutter 项目的 ios 文件夹中编辑一些内容

Answer 1

SafeArea 小部件约束主体以排除 AppBar 高度和 StatusBar 高度。如果你想在整个屏幕上显示webview，那么你应该删除SafeAres和extendBody和extendBodyBehindAppBar参数。

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() {
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      statusBarColor: Colors.black, // status bar color
    ));
    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home:  Scaffold(
        extendBody: true,
        extendBodyBehindAppBar: true,
        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',
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}