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

时间:2020-05-24 08:21:12

标签: flutter dart android-webview

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

enter image description here

这是WebView加载后发生的情况: enter image description here

这是我的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可见并起作用?

1 个答案:

答案 0 :(得分:2)

您可以使用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;
}