在 webview flutter 中修复 header (navbar)

Question

我目前正在做一个项目，我需要使用 flutter 将网站转换为移动应用程序我用 WEBVIEW 小部件做到了，但是当我滚动页面时，我手机中 webview 的 header 没有固定，我的网站的 header (navBar) 也滚动了，但我希望它甚至被修复如果我滚动页面这是我的代码：

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';


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

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

class _HomePageState extends State<HomePage> with TickerProviderStateMixin{

  final Completer<WebViewController> _controller =
  Completer<WebViewController>();

  late WebViewController _webViewController;


  @override
  Widget build(BuildContext context) {
    String hexString = "1b5c80";
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Welcome to Flutter',
      home: Scaffold(
        body: WebView(
          initialUrl: "https://www.journaldunet.fr/web-tech/dictionnaire-du-webmastering/1203251-blog-definition-et-acteurs/",
          javascriptMode: JavascriptMode.unrestricted,
          onWebViewCreated: (WebViewController webViewController) {
            _webViewController = webViewController;
            _controller.complete(webViewController);
            },
          onPageFinished: (String url) {
            _webViewController.evaluateJavascript("javascript:(function() { " +
                "var footer = document.getElementsByTagName('footer')[0];" +
                "footer.parentNode.removeChild(footer);" +
                "})()");
            },
          gestureNavigationEnabled: true,
        ),
      ),
    );
  }

  JavascriptChannel _toasterJavascriptChannel(BuildContext context) {
    return JavascriptChannel(
        name: 'Toaster',
        onMessageReceived: (JavascriptMessage message) {
          // ignore: deprecated_member_use
          Scaffold.of(context).showSnackBar(
            SnackBar(content: Text(message.message)),
          );
        });
  }
}

这是我的手机应用程序：

Answer 1

如果你在Flutter中构建自己的AppBar，那么它会根据你的情况进行修复。但是如果 header 来自 Webview 那么你无法控制这个...... 因为 Webview 只是您网站在 flutter 应用程序中的视图...

Answer 2

用 SafeArea 包裹你的脚手架。

SafeArea(
  child: Scaffold

在 webview flutter 中修复 header (navbar)

Fixing header (navbar) in webview flutter

android

header

webview

dart

flutter