我遇到的问题是，android 中的 webview 保持空白（黑色或白色，具体取决于 android 主题），直到进行一些交互，无论是触摸屏幕、旋转设备还是使用音量按钮。 要重现可以创建示例 flutter，应用程序添加 webview_flutter（版本 4.9.0）， 复制 WebViewComponent 并通过单击某个按钮打开它。
新页面将打开，但当您触摸屏幕时为空白，它将显示 HTML 内容。 在真实设备 android 14 上测试。
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const WebViewPage(
content: "Some HTML Body",
title: "Cool Title",
)),
);
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
class WebViewPage extends StatefulWidget {
const WebViewPage({super.key, required this.content, this.title});
final String content;
final String? title;
@override
State<WebViewPage> createState() => _WebViewPageState();
}
class _WebViewPageState extends State<WebViewPage> {
var webViewController = WebViewController()..setJavaScriptMode(JavaScriptMode.unrestricted);
@override
void initState() {
super.initState();
// this also does not work
//webViewController.loadRequest(Uri.dataFromString("your html", mimeType: 'text/html', encoding: utf8));
webViewController..loadHtmlString('''<!DOCTYPE html>
<html lang='de-DE'>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=0.2" />
<style>
div span, div p {
font-size: 2vw !important;
}
</style>
</head>
<body style="overflow-wrap: break-word; word-wrap: break-word; white-space: normal;">
${widget.content}
<script>
console.log("js log")
</script>
</body>
</html>''')..platform.setOnConsoleMessage(onconsoleleLog);
}
@override
Widget build(BuildContext context){
return Scaffold(
appBar: AppBar(
title: Text(
(widget.title != null ? widget.title! : 'Inhalt'),
maxLines: 1,
)),
body: WebViewWidget(
controller: webViewController,
));
}
void onconsoleleLog(JavaScriptConsoleMessage consoleMessage) {
print("BROWSER LOG: ${consoleMessage.message}");
}
}
亲切的问候
我发现了一些有用的东西。好像和渲染有关系。 将
displayWithHybridComposition PlatformWebViewWidgetCreationParams params;
if (WebViewPlatform.instance is AndroidWebViewPlatform) {
params = AndroidWebViewWidgetCreationParams(
controller: webViewController.platform,
displayWithHybridComposition: true);
} else {
params = PlatformWebViewWidgetCreationParams(
controller: webViewController.platform);
}
var webViewWidget =
WebViewWidget.fromPlatformCreationParams(params: params);