如何去除Flutter WebView白色背景及flutter_inappwebview加载后底部空白

一、移除WebView底部空白 #

你出现底部空白的核心原因是WebView当前用Flexible包裹，会默认撑满父容器剩余高度，而你没有将WebView的高度和实际加载的内容高度做绑定，内容高度小于父容器剩余高度时就会出现底部空白，按以下步骤修改：

• 将包裹InAppWebView的Flexible组件替换为SizedBox，高度绑定你声明的height动态变量
• 调整高度获取时机：你当前仅在WebView初始化时获取高度，此时页面尚未加载完成，拿到的高度不准，需要在onPageFinished（页面加载完成回调）中获取内容高度更新变量
• 注入JS清除网页默认边距：html、body标签自带默认margin和padding，会导致计算的高度多出多余空间，需要加载完成后清除默认边距

二、设置WebView内容背景透明 #

你已经配置了transparentBackground: true但无效，是因为WebView本身透明后，加载的网页自带默认白色背景，需要额外清除网页本身的背景色：

• 页面加载完成后注入JS，将html、body标签的背景设置为透明
• 确认WebView的所有父容器的背景色符合你的预期，WebView本身透明后会透出父容器的背景色

核心代码修改示例 #

你只需要修改InAppWebView部分的代码即可，修改后的代码如下：

// 把原来包裹InAppWebView的Flexible替换为SizedBox
SizedBox(
  height: height,
  child: InAppWebView(
    key: webViewKey,
    initialUrlRequest: URLRequest(url: Uri.parse(initialurl)),
    initialUserScripts: UnmodifiableListView<UserScript>([]),
    initialOptions: InAppWebViewGroupOptions(
      crossPlatform: InAppWebViewOptions(
        supportZoom: true,
        javaScriptEnabled: true,
        transparentBackground: true,
        useShouldOverrideUrlLoading: true,
        disableVerticalScroll: true,
        preferredContentMode: UserPreferredContentMode.RECOMMENDED,
        mediaPlaybackRequiresUserGesture: false,
      ),
      android: AndroidInAppWebViewOptions(
        useHybridComposition: true,
      ),
      ios: IOSInAppWebViewOptions(
        allowsInlineMediaPlayback: true,
      )
    ),
    onWebViewCreated: (controller) async {
      webViewController = controller;
      controller.addJavaScriptHandler(
        handlerName: "newHeight",
        callback: (List<dynamic> arguments) async {
          int? height = arguments.isNotEmpty ? arguments[0] : await controller.getContentHeight();
          setState(() => this.height = height!.toDouble());
        });
    },
    // 新增onPageFinished回调
    onPageFinished: (controller, url) async {
      // 清除网页默认边距和背景色
      await controller.evaluateJavascript(source: """
        document.documentElement.style.background = 'transparent';
        document.body.style.background = 'transparent';
        document.body.style.margin = '0';
        document.body.style.padding = '0';
      """);
      // 调用handler传递准确的页面高度
      await controller.evaluateJavascript(source: "window.flutter_inappwebview.callHandler('newHeight', document.body.scrollHeight);");
      setState(() {
        loaded = false;
      });
    },
    // 你原来的其他回调保持不变
    onLoadStart: (controller, url) {
      setState(()  {
        this.loaded=true;
        this.url = url.toString();
        urlController.text = this.url;
      });
    },
    androidOnPermissionRequest: (controller, origin, resources) async {
      return PermissionRequestResponse(
        resources: resources,
        action: PermissionRequestResponseAction.GRANT);
    },
    shouldOverrideUrlLoading: (controller, navigationAction) async {
      var uri = navigationAction.request.url!;
      if (![
        "http",
        "https",
        "file",
        "chrome",
        "data",
        "javascript",
        "about"
      ].contains(uri.scheme)) {
        if (await canLaunch(url)) {
          await launch(url);
          return NavigationActionPolicy.CANCEL;
        }
      }
      return NavigationActionPolicy.ALLOW;
    },
  ),
),

内容的提问来源于stack exchange，提问作者User