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

Question

我正在加载一个 WebView Page 在我 NavBar 项目。当我调试我的应用程序时，它显示了一个加载屏幕，上面有 NavBar 但一旦 WebView 负载 NavBar 被隐藏在它的后面。我使用的是 翩翩起舞 插件来加载WebViews。

这是发生在 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 widget来实现。

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