Flutter InAppWebView 加载页面但不显示内容

Question

我在 Flutter 中使用 InAppWebView 它适用于混合简单应用程序，它只有一个 webview、一些服务和 flutter_native_slpah 有时网页不会加载，但是当我关闭屏幕然后再次打开时，或者当我按下返回按钮（触发确认对话框）时，整个页面都会显示。

InAppWebView(
    initialUrlRequest: URLRequest(
    url: Uri.parse(base + 'login')
    ),
    initialOptions: InAppWebViewGroupOptions(
      android: AndroidInAppWebViewOptions(
        disableDefaultErrorPage: false,
        // useHybridComposition: true,
        supportMultipleWindows: false,
        cacheMode: AndroidCacheMode.LOAD_DEFAULT,
      ),
      crossPlatform: InAppWebViewOptions(
        javaScriptEnabled: true,
        mediaPlaybackRequiresUserGesture: false,
        // debuggingEnabled: true,
      ),
    ),
    onWebViewCreated: (InAppWebViewController controller) {
      webViewController = controller;
      controller.addJavaScriptHandler(handlerName: 'FLUTTER', callback: (args) {
        final Map<String, dynamic> data = json.decode(args[0]);
        handler(data);
      });
    },
    onLoadStop: (InAppWebViewController controller, Uri uri) {
      // FlutterNativeSplash.remove();
    },
    androidOnPermissionRequest: (InAppWebViewController controller, String origin, List<String> resources) async {
      return PermissionRequestResponse(resources: resources, action: PermissionRequestResponseAction.GRANT);
    }
);

我尝试在控制器加载后更新 url，启动后问题仍然存在。

webview 在小部件中的包装方式如下：

return WillPopScope(
    child: Scaffold(
        body: Column(children: <Widget>[Expanded(child: webView)])
    ),
    onWillPop: _goBack
);

Answer 1

您可以使用 IndexedStack 小部件在您的 WebView 尚未加载 URL 时显示加载小部件，然后在加载 WebView 完成时显示 InAppWebView 小部件。

这里我创建了一个示例代码来说明我的意思：

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

class InAppWebViewPage extends StatefulWidget {
  final String title, uri;

  const InAppWebViewPage({Key? key, required this.title, required this.uri})
      : super(key: key);

  @override
  _InAppWebViewPageState createState() => _InAppWebViewPageState();
}

class _InAppWebViewPageState extends State<InAppWebViewPage> {
  int _stackIndex = 1;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Padding(
        padding: EdgeInsets.all(12),
        child: Expanded(
          child: IndexedStack(
            index: _stackIndex,
            children: [
              InAppWebView(
                initialUrlRequest: URLRequest(url: Uri.parse(widget.uri)),
                initialOptions: InAppWebViewGroupOptions(
                  crossPlatform:
                      InAppWebViewOptions(useShouldOverrideUrlLoading: true),
                ),
                onLoadStop: (_, __) {
                  setState(() {
                    _stackIndex = 0;
                  });
                },
                onLoadError: (_, __, ___, ____) {
                  setState(() {
                    _stackIndex = 0;
                  });
                  //TODO: Show error alert message (Error in receive data from server)
                },
                onLoadHttpError: (_, __, ___, ____) {
                  setState(() {
                    _stackIndex = 0;
                  });
                  //TODO: Show error alert message (Error in receive data from server)
                },
              ),
              const SizedBox(
                height: 50,
                child: CircularProgressIndicator(),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Flutter InAppWebView 加载页面但不显示内容

Flutter InAppWebView loads the page but doesn't show the content

flutter

webview

flutter-inappwebview