Flutter、WebView - 使用自定义重建 HTML

Question

我想在我的 Flutter 应用中的 WebView 中显示一些生成的 HTML。包含 WebView 的 StatefulWidget 可以更改 WebView 必须重建的某些属性。

TL;DR: 如何提供自定义 HTML without initialUrl?

到目前为止，我使用 WebView 构造函数的 initialUrl 属性来提供直接嵌入 HTML 的 URI：

WebView(
  initialUrl: Uri.dataFromString(myHtml, mimeType: 'text/html').toString(),
)

现在我意识到，当设置了某些状态时，我必须用不同的值重建 WebView。（即 WebView 上方的下拉菜单）。顾名思义，这个 URI 只是初始的。

所以我的问题是：如何更新 WebView 中的 HTML？是否有某种方法可以重置 WebView 的内部状态？

Answer 1

我猜 webview 的 api 不允许这样做，但您可以使用一个解决方法：只需将 HTML 保存到临时文件并提供一个 URI 给 WebView 使用initialUrl。这是示例：

import 'package:path/path.dart';
import 'package:path_provider/path_provider.dart';
import 'package:webview_flutter/webview_flutter.dart';

class HomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  Uri uri;

  Future<void> _showHtml(String html) async {
    final tempDir = await getTemporaryDirectory();
    final path = join(tempDir.path, 'page.html');
    final tempFile = File(path);
    tempFile.writeAsStringSync(html);
    setState(() {
      uri = Uri(scheme: 'file', path: path);
    });
  }

  @override
  void initState() {
    super.initState();
    _showHtml('<html>Test</html>');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: SafeArea(
        child: uri != null ? WebView(
          initialUrl: uri.toString(),
        ) : Container()
      ),
    );
  }
}

您还可以使用 onWebViewCreated 回调来保存 webview 的控制器，稍后使用该控制器通过 loadUrl 方法加载其他控制器。

Flutter、WebView - 使用自定义重建 HTML

Flutter, WebView - rebuild with custom HTML

webview

flutter