我正在寻找一个使用自定义语法和解析器来实现动态文本颜色的flutter-markdown。虽然下面的实现成功地实现了文本颜色,但我失去了内部文本样式。
例如,字符串
"not blue <span data-color='rgb(0,0,255)'>**blue text**</span> not blue"
显示为
而不是用蓝色和粗体显示。
虽然动态颜色并不是markdown的真正目的,但它会让我的项目变得相当容易(我会使用flutter-html,但可选文本的限制让我犹豫不决)
我目前的实现如下:
class FontColorSyntax extends md.InlineSyntax {
//Hideous => matches groups as follows: <span data-color="rgb(1,2,3)">4</span>
FontColorSyntax()
: super(
r'''<span(?:.*?)data-color=['"]rgb *\((?: *([0-9]{1,3}))[, ]+(?: *([0-9]{1,3}))[, ]+(?: *([0-9]{1,3}))[, ]*\)['"](?:.*?)>(.*?)</span>''');
@override
bool onMatch(md.InlineParser parse, Match match) {
md.Element colorTag = md.Element.text('fontcolor', match.group(4) ?? "matched text");
colorTag.attributes["fontColorRed"] = match.group(1) ?? "0";
colorTag.attributes["fontColorGreen"] = match.group(2) ?? "0";
colorTag.attributes["fontColorBlue"] = match.group(3) ?? "0";
parse.addNode(colorTag);
return true;
}
}
class FontColorBuilder extends MarkdownElementBuilder {
int getColor(md.Element el, String color) =>
int.tryParse(el.attributes["fontColor$color"] ?? "0") ?? 0;
@override
Widget visitElementAfter(element, style) {
final red = getColor(element, "Red");
final green = getColor(element, "Green");
final blue = getColor(element, "Blue");
return SelectableText.rich(
TextSpan(
text: element.textContent,
style: TextStyle(
color: Color.fromRGBO(red, green, blue, 1),
)),
);
}
我对flutter/dart还是个新手,所以请原谅(但可以随时指出)我代码中的任何奇怪之处。
1条答案
按热度按时间xwbd5t1u1#
不返回SelectableText,而是返回另一个MarkdownBody小部件,这样就可以达到目的: