Flutter Web，HtmlElementView，“删除不允许的属性”

Question

我正在尝试在 Flutter Web 中为 Playstore 应用程序徽章创建 HtmlElementView？

我尝试了下面提到的here

  Widget _getAppStoreBadgeView() {
    final NodeValidatorBuilder _htmlValidator =
        new NodeValidatorBuilder.common()
          ..allowElement('a', attributes: ['data-target', 'data-toggle'])
          ..allowElement('button', attributes: ['data-target', 'data-toggle']);
    ui.platformViewRegistry.registerViewFactory("idid", (int viewId) {
      final element = DivElement()
        ..setInnerHtml(r"""
        <a href='https://play.google.com/store/apps/details?id=com.shahxad.evendor&pcampaignid=pcampaignidMKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1'><img alt='Get it on Google Play' src='https://play.google.com/intl/en_us/badges/static/images/badges/en_badge_web_generic.png'/></a>
        """, validator: _htmlValidator)
        ..style.width = "100%"
        ..style.height = "100%"
        ..style.border = 'none';
      return element;
    });
    return Container(
      child: HtmlElementView(viewType: "idid"),
      height: 150,
      width: 400,
    );
  }

但它不工作，因为我得到这样的。

我在 Chrome 控制台中收到此消息。

删除不允许的属性

html_dart2js.dart:39901 Removing disallowed attribute <A href="https://play.google.com/store/apps/details?id=com.shahxad.flutter_tex_example&pcampaignid=pcampaignidMKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1">

html_dart2js.dart:39901 Removing disallowed attribute <IMG src="https://play.google.com/intl/en_us/badges/static/images/badges/en_badge_web_generic.png">

Answer 1

使用 dart:html 库中的 NodeValidatorBuilder 和预定义规则 allowHtml5、allowNavigation、allowImages 并定义类 ItemUrlPolicy 以允许从生成的 html-代码。

import 'dart:html' as html;
import 'dart:ui' as ui;
import 'package:flutter/material.dart';

class ItemUrlPolicy implements html.UriPolicy {
  RegExp regex = RegExp(r'(?:http://|https://)?.*');

  bool allowsUri(String uri) {
    return regex.hasMatch(uri);
  }
}

class MyWidget extends StatefulWidget {
  @override
  MyWidgetState createState() => MyWidgetState();
}

class MyWidgetState extends State<MyWidget> {
  html.DivElement _element;

  @override
  void initState() {
    super.initState();
    _element = html.DivElement()
      ..appendHtml("""
            <a href='https://play.google.com/store/apps/details?id=com.shahxad.evendor&pcampaignid=pcampaignidMKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1'>
              <img alt='Get it on Google Play' src='https://play.google.com/intl/en_us/badges/static/images/badges/en_badge_web_generic.png'/>
            </a>
          """,
          validator: html.NodeValidatorBuilder()
            ..allowHtml5(uriPolicy: ItemUrlPolicy())
            ..allowNavigation(ItemUrlPolicy())
            ..allowImages(ItemUrlPolicy()));
    // ignore: undefined_prefixed_name
    ui.platformViewRegistry.registerViewFactory('demo-view', (int viewId) => _element);
  }

  @override
  Widget build(BuildContext context) {
    return HtmlElementView(key: UniqueKey(), viewType: "demo-view");
  }
}