应用程序全屏但状态栏重叠

Question

我想让我的 flutter 全屏显示，但状态重叠。为了更清楚，我希望 webview 小部件与状态栏重叠。有人可以帮我弄这个吗？

例如（如下图）：

我的代码：

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

class test extends StatelessWidget{
  WebViewController _webViewController;
  String url = "https://linktomaps";
  @override
  Widget build(BuildContext context){
    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: SystemUiOverlayStyle(
        statusBarColor: Colors.transparent,
      ),
      child: Scaffold(
        body:Container(
            color: Colors.transparent,
            child: Column(children: <Widget>[
              Expanded(
                child: Container(
                    child: WebView(
                  initialUrl: url,
                  javascriptMode: JavascriptMode.unrestricted,
                  onWebViewCreated: (controller) {
                    _webViewController = controller;
                  },
                )),
              ),
            ]),
          ),
      ),
    );
  }
}

结果：

但我在其他网站上测试，结果：

所以现在弄糊涂了，是不是网站代码导致了问题？

Answer 1

您可以使用带有 SystemUiOverlayStyle 的 AnnotatedRegion 小部件来更改 chrome 样式。

import 'package:flutter/services.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: SystemUiOverlayStyle(
        statusBarColor: Colors.transparent,
      ),
      child: Scaffold(...),
    );
  }
}

Answer 2

我相信您真正想要的是状态栏真正消失，而不仅仅是透明的。如果这是你的动机，那么你的正确方法应该是这样的：

import 'package:flutter/services.dart';

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with WidgetsBindingObserver {
  @override
  Widget build(BuildContext context) {
    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: SystemUiOverlayStyle(
        statusBarColor: Colors.transparent,
      ),
      child: Scaffold(
        body: Container(),
      ),
    );
  }

  void _hideStatusBar() {
    SystemChrome.setEnabledSystemUIOverlays(<SystemUiOverlay>[SystemUiOverlay.bottom]);
  }

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    if (state == AppLifecycleState.resumed) {
      _hideStatusBar();
    }
  }

  @override
  void initState() {
    super.initState();
    _hideStatusBar();
    WidgetsBinding.instance.addObserver(this);
  }
}

这里有两部分。

首先，您需要在应用启动时立即更新SystemChrome。为此，请在 StatefulWidget 主应用小部件的 initState 功能中进行必要的更新。

其次，您需要确保如果用户将您的应用程序移至后台然后又返回前台，您的状态栏将再次被删除。原因是因为他们去的任何应用程序都可能会再次显示状态栏，但它不会自动再次消失，直到你明确告诉它。

通过添加 with WidgetsBindingObserver 来做到这一点，这样您的主窗口小部件就可以充当当应用程序返回前台时触发的事件的观察者。然后实现didChangeAppLifecycleState(AppLifecycleState state)函数来处理事件。如果需要，您甚至可以使用此方法执行一些操作，例如在应用程序离开前台时显示状态栏。

希望对您有所帮助！

应用程序全屏但状态栏重叠

App Full Screen but with status bar overlap on it

flutter

overlay

statusbar

overlap