时间戳

首页 > 解决方案 > Flutter，WebView - 使用自定义 HTML 重建

flutter - Flutter，WebView - 使用自定义 HTML 重建

问题描述

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

TL;DR：如何在没有 initialUrl的情况下提供自定义 HTML ？

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

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

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

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

标签： flutterwebview

解决方案

我猜 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方法。

推荐阅读