如何在 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 的大小，以便下面的导航栏可见且有效？

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(
      child: WebviewScaffold(
      useWideViewPort: true,
      url: 'https://google.com',
    ));
  }

  @override
  bool get wantKeepAlive => true;
}

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

How do I crop the size of my WebView in Flutter?

android-webview

dart

flutter