html - Flutter-呈现HTML无序列表

Question

我试图用Flutter(具体来说是 ul )表示HTML代码，并对其进行最小化样式设置。我尝试使用了 flutter_html 软件包，并且看到有一个customRender选项。

基本上，我想做的是:

在每个 li 元素下添加一个空格。

删除左边距(默认情况下，在flutter_html上位于该位置)。

更改项目符号点的颜色。不需要，但是会很好。

我对Flutter和Dart还是很陌生，所以我无法使customRender正常工作。也许有人知道如何解决它？还是有更好的方法呢？

添加一些代码以供引用。

import 'package:flutter_html/flutter_html.dart';

// ... Some non-essential code ...

Align(
  alignment: Alignment.centerLeft,
  child: Html(
    data: """${unorderedList}""",
    customRender: (node, children) {
      if (node is dom.Element) {
        switch (node.localName) {
          case "li":
            return Column(children: children);
        }
      }
      return null;
    },
  )
)

注意:取出 customRender 块会产生一个左边距。

编辑: vb10 解决方案的补充，允许多行列表项文本。

Wrap customListItem(dom.Element node) {
  return Wrap(
    spacing: 25.0,
    children: [
      Row(
        crossAxisAlignment: CrossAxisAlignment.start, 
        children: [
          Padding(
            // Top padding adjusts for text offset, set it to the font size.
            padding: const EdgeInsets.only(top: 18.0, right: 15.0), 
            child: CircleAvatar(radius: 4)
          ),
          Expanded(child: Text(node.text)),
        ]
      ),
      SizedBox(height: 25.0),
    ]
  );
}

Answer 1

您不会忘记两个规则:

您可以创建自定义窗口小部件，以便将富文本格式设置为false(默认为True)

您有自定义窗口小部件选项，需要页面空白(例如项目间距)。

看下面的代码:

 Html(
    data: data,
    useRichText: false,
    customRender: htmlCustomRenderer,
  )

如果您详细了解 this。(lib / html-parser)

结果: