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

【问题标题】：Flutter, WebView - rebuild with custom HTMLFlutter，WebView - 使用自定义 HTML 重建
【发布时间】：2020-03-18 22:58:48
【问题描述】：

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

TL;DR：如何提供自定义 HTML 没有 initialUrl？

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

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

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

所以我的问题是：如何更新 WebView 中的 HTML？有没有办法重置 WebView 的内部状态？

【问题讨论】：

标签： flutter webview

【解决方案1】：

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

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

【讨论】：