(保姆级推荐)在Flutter web中加载html是一种什么体验在浏览中是不存在webview，且我们之前文章所用的w

启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第17天，点击查看活动详情

Flutter系列文章列表

如何在flutter web 中加载html？很多同学可能会说:"当然是用webview啦"，请仔细审题，我的题目是在flutter web中，在浏览中是不存在webview，且我们之前文章所用的webview_flutter是不支持web端的。那么接一下来我们就会想到，既然浏览器不支持webview，但是却支持iframe,是否可以用iframe来代替webview呢？结果还真我猜对了，现在进入正文嗯内容。

HtmlElementView类

官网地址：api.flutter.dev/flutter/wid…
在flutter widgets 中真的存在一个HtmlElementView组件，翻阅资料，它其实就是一个iframe。在 Flutter Web 的 Widget 层次结构中嵌入一个 HTML 元素。

注意：这仅适用于 Flutter Web。要在其他平台上嵌入 Web 内容，请考虑使用该flutter_webview插件。嵌入 HTML 是一项代价高昂的操作，在 Flutter 等效项可行时应避免使用。

基本使用

import 'dart:ui' as ui;
import 'package:flutter/material.dart';
import 'package:universal_html/html.dart';
class PaymentPage extends StatefulWidget {
  const PaymentPage({Key? key}) : super(key: key);

  @override
  State<PaymentPage> createState() => _PaymentPageState();
}

class _PaymentPageState extends State<PaymentPage> {

  @override
  void initState() {
    ui.platformViewRegistry.registerViewFactory(  //  1. 注册
        'payment',
            (int viewId) => IFrameElement()
          ..style.border = 'none'
          ..src = 'https://testdemo.com');
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("Payment"),
        ),
        body: GestureDetector(
          child: const HtmlElementView(viewType: "payment"),  //  2. 使用，”payment“为注册唯一标识符
        ));
  }
}

PlatformViewRegistry

我的理解是在UI中注入视图
registerViewFactory()方法是PlatformViewRegistry中的一个属性，它需要传入两个参数：第一个参数是指平台视图类型的唯一标识符，第二个参数则是则是需要加载的html文件。它可以是本地文件路劲地址，也可以远程文件url,更可以直接加载html 元素。

加载本地html文件

@override
  void initState() {
    ui.platformViewRegistry.registerViewFactory(
        'payment',
            (int viewId) => IFrameElement()
          ..style.border = 'none'
          ..src = '/web/test.html');  //  这里使用的是绝对路劲地址
    super.initState();
}

加载远程文件url文件

@override
  void initState() {
    ui.platformViewRegistry.registerViewFactory(
        'payment',
            (int viewId) => IFrameElement()
          ..style.border = 'none'
          ..src = 'https://testdemo.com');
    super.initState();
}

直接加载html 元素

@override
  void initState() {
    ui.platformViewRegistry.registerViewFactory(
        'payment',
            (int viewId) => HtmlHtmlElement()
          ..style.border = 'none'
          ..setInnerHtml(<h1>Hello World</h1>));
    super.initState();
}

项目警告

dart:ui 无法找到platformViewRegistry方法

在最新的flutter sdk中标记语法问题，不影响项目正常运行，存在洁癖症患者的同学可以直接把他关闭，在yaml文件中设置

analyzer:
  errors:
    undefined_prefixed_name: ignore

结束语

关于flutter web中加载html的学习到这里就结束了，给大家留一下一个小问题，如果我们用HtmlElementView 加载的html中还有一个iframe标签，我们如何使用js来通信。哈哈哈，千万不要怀疑，这种需求真的存在！如果你觉得你的方法更完美，可以在评论区留下你的答案，我是与你们一起成长的小安子！