Flutter降价:为彩色文本编写内联sytax/builder

zhte4eai  于 2022-12-19  发布在  Flutter
关注(0)|答案(1)|浏览(130)

我正在寻找一个使用自定义语法和解析器来实现动态文本颜色的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还是个新手,所以请原谅(但可以随时指出)我代码中的任何奇怪之处。

xwbd5t1u

xwbd5t1u1#

不返回SelectableText,而是返回另一个MarkdownBody小部件,这样就可以达到目的:

return MarkdownBody(
    styleSheet: MarkdownStyleSheet.fromTheme(ThemeData(
        textTheme:
            const TextTheme(bodyText2: TextStyle(
                color: Color.fromRGBO(red, green, blue, 1)
            )))),
    data: element.textContent);

相关问题