flutter - 如何在Flutter中裁剪WebView的大小？

Question

我正在其中一个WebView Page项中加载NavBar。当我调试我的应用程序时，它会显示一个带有NavBar的加载屏幕，但是一旦WebView加载，NavBar就会隐藏在它的后面。我正在使用webview_flutter插件加载WebView。



这是WebView加载后发生的情况:


这是我的WebView页面的代码:

import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';

class HomeWebView extends StatefulWidget {
  @override
  _HomeWebViewState createState() => _HomeWebViewState();
}

class _HomeWebViewState extends State<HomeWebView>
    with AutomaticKeepAliveClientMixin<HomeWebView> {
  @override
  Widget build(BuildContext context) {
    super.build(context);
    return WebviewScaffold(
      useWideViewPort: true,
      url: 'https://google.com',
    );
  }

  @override
  bool get wantKeepAlive => true;
}

有没有一种方法可以裁剪 WebView Scaffold的大小，以使下面的NavBar可见并起作用？

Answer 1

您可以使用SafeArea小部件来实现此目的:

import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';

class HomeWebView extends StatefulWidget {
  @override
  _HomeWebViewState createState() => _HomeWebViewState();
}

class _HomeWebViewState extends State<HomeWebView>
    with AutomaticKeepAliveClientMixin<HomeWebView> {
  @override
  Widget build(BuildContext context) {
    super.build(context);
    return SafeArea(
      WebviewScaffold(
      useWideViewPort: true,
      url: 'https://google.com',
    ));
  }

  @override
  bool get wantKeepAlive => true;
}