Question

我有一个html文档，我想用flutter_html插件用Flutter渲染它。我想以不同的方式呈现不同的字体。例如。我想为粗体设置不同的字体和大小，为非粗体设置不同的

。

我尝试阅读文档，该文档具有Html构造函数的属性customRenderer，我无法理解其实现。

下面是文档中的代码。

  Html(
    data: """
      <!--For a much more extensive example, look at example/main.dart-->
      <div>
        <h1>Demo Page</h1>
        <p>This is a fantastic nonexistent product that you should buy!</p>
        <h2>Pricing</h2>
        <p>Lorem ipsum <b>dolor</b> sit amet.</p>
        <h2>The Team</h2>
        <p>There isn't <i>really</i> a team...</p>
        <h2>Installation</h2>
        <p>You <u>cannot</u> install a nonexistent product!</p>
        <!--You can pretty much put any html in here!-->
      </div>
    """,
    padding: EdgeInsets.all(8.0),
    backgroundColor: Colors.white70,
    defaultTextStyle: TextStyle(fontFamily: 'serif'),
    linkStyle: const TextStyle(
      color: Colors.redAccent,
    ),
    onLinkTap: (url) {
    },
    customRender: (node, children) {
      if(node is dom.Element) {
        switch(node.localName) {
          case "video": return Chewie(...);
          case "custom_tag": return CustomWidget(...);
        }
      }
    },
  )

如果我可以根据标签名称更改字体大小和字体系列，那就可以了。

Answer 1

可能有点晚了，但这就是您为img标签执行customRender以便从资产加载图像的方式。我猜想创建自定义字体可能会以类似的方式工作，但要使用“文本”小部件。

别忘了导入dom.Element。

第二天，我使用飞镖，所以可能有一种更优雅的方式，但这可行。

import 'package:html/dom.dart' as dom;

// create full screen scrollable html widget
Widget getUiForLoaded(String html) {
  return SingleChildScrollView(
      child: Html(
        data: html,
        customRender: getCustomRender()
      ));
}

// define all customRenders
Map<String, CustomRender> getCustomRender() {
  var customRender = HashMap<String, CustomRender>();
  // load img sources from assets
  // e.g. <img src='image01.png'/>
  customRender["img"] = getImageCustomRender; 
  return customRender;
}

// create customRender for asset images
Widget getImageCustomRender(RenderContext context,
    Widget parsedChild,
    Map<String, String> attributes,
    dom.Element element) {
  return new Image.asset("assets/drawables/${attributes["src"]}");
}

如何使用flutter_html包根据html标签呈现自定义窗口小部件？

1 个答案: