Flutter/Dart：更改字符串中特定 unicode 字符的颜色

Question

我是 Flutter 新手，正在尝试使用代码来更改字符串中特定 Unicode 字符的颜色。颜色编码 \\u0951、\\u0952 和 \\u1cda 表示蓝色、红色和绿色。输出字符串与预期格式不匹配。我看到一些字符重复，并且在某些字符中，颜色被应用于相邻的字符。非常感谢任何帮助解决该问题的帮助。\n我希望代码能够在 Android 和 IOS 平台上运行。

\n

早些时候，当我使用 spannableStr 在 Android 中开发此应用程序时，我在 Kotlin 中有类似的代码，工作正常。\nFlutter Dart 代码是：

\n

import \'package:flutter/material.dart\';\n\nimport \'package:flutter/painting.dart\';\nimport \'package:google_fonts/google_fonts.dart\';\n\nclass TextModifierScreen extends StatefulWidget{\n  @override\n  State<StatefulWidget> createState() {\n    return TextModifierScreenState();\n  }\n}\n\nclass TextModifierScreenState extends State{\n\n  List<TextSpan> _displaySpans = [];\n  String inputString = "\xe0\xa4\xae\xe0\xa5\x83\xe0\xa5\x92\xe0\xa4\xa4\xe0\xa5\x8d\xe0\xa4\xaf\xe0\xa4\xb5\xe0\xa5\x87\xe0\xa5\x92 \xe0\xa4\xaf\xe0\xa5\x8b\xe0\xa5\x91 \xe0\xa4\xb8\xe0\xa5\x8d\xe0\xa4\xb5\xe0\xa4\xbe\xe0\xa4\xb9\xe0\xa4\xbe\xe1\xb3\x9a \xe0\xa4\xad\xe0\xa5\x82\xe0\xa5\x92 \xe0\xa4\xae\xe0\xa5\x81\xe0\xa5\x92\xe0\xa4\xad\xe0\xa4\xaf\xe0\xa5\x8b\xe0\xa5\x92\xe0\xa4\xb0\xe0\xa4\xbe \xe0\xa5\xa5";\n\n  void replaceVowelsWithColor(String input) {\n    List<TextSpan> spans = [];\n    for (int i = 0; i < input.length; i++) {\n      String char = input[i];\n      int unicode = char.codeUnitAt(0);\n      String unicodeString = \'\\\\u${unicode.toRadixString(16).padLeft(4, \'0\')}\';\n      print(\'Unicode of $char is $unicodeString\');\n      if(char == \'\\u0952\'){\n        spans.add(TextSpan(\n          text: char,\n          style: TextStyle(color: Colors.red, ),\n        ));\n      }else if(char == \'\\u0951\'){\n        spans.add(TextSpan(\n          text: char,\n          style: TextStyle(color: Colors.blue),\n        ));\n      }else if(char == \'\\u1cda\'){\n        spans.add(TextSpan(\n          text: char,\n          style: TextStyle(color: Colors.green),\n        ));\n      }else{\n        spans.add(TextSpan(\n            text: char,\n          style: TextStyle(color: Colors.black),\n        ));\n      }\n    }\n    setState(() {\n      _displaySpans = spans;\n    });\n  }\n\n\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      appBar: AppBar(\n        title: Text(\'Accents Color Replacer\'),\n      ),\n      body: Center(\n        child: Padding(\n          padding: EdgeInsets.only(left: 20, right: 20),\n        child: Column(\n          mainAxisAlignment: MainAxisAlignment.center,\n          children: <Widget>[\n            RichText(\n              text: TextSpan(\n                style: GoogleFonts.tiroDevanagariSanskrit(\n                  fontSize: 20,\n                  color: Colors.black,\n                ),\n                children: <TextSpan>[\n                  TextSpan(text: \'Original Text:\\n \'),\n                  TextSpan(text: inputString),\n                ],\n              ),\n            ),\n            SizedBox(height: 20),\n            ElevatedButton(\n              onPressed: () {\n                replaceVowelsWithColor(inputString);\n              },\n              child: Text(\'Replace colors\'),\n            ),\n            SizedBox(height: 20),\n            RichText(\n              text: TextSpan(\n                style: GoogleFonts.tiroDevanagariSanskrit(\n                  fontSize: 20,\n                  color: Colors.black,\n                ),\n                children: <TextSpan>[\n                  TextSpan(text: \'Modifed Text: \\n\'),\n                  ..._displaySpans,\n                  //_displaySpans[0],_displaySpans[2],_displaySpans[9],_displaySpans[2]\n                ],\n              ),\n            ),\n          ],\n        ),\n      ),\n      ),\n    );\n  }\n}\n

\n

第一张图片是我所看到的。第二个图像是预期的输出。\n\n

\n

提前致谢！！！

\n

[更新] 如果我替换代码来替换英文文本中的元音颜色，它似乎可以正常工作。\n

\n

void replaceVowelsWithColor(String input) {\n\n    List<TextSpan> spans = [];\n    for (int i = 0; i < input.length; i++) {\n      String char = input[i];\n      int unicode = char.codeUnitAt(0);\n      String unicodeString = \'\\\\u${unicode.toRadixString(16).padLeft(4, \'0\')}\';\n      print(\'Unicode of $char is $unicodeString\');\n      if(char == \'\\u0061\'){\n        spans.add(TextSpan(\n          text: char,\n          style: TextStyle(color: Colors.red, ),\n        ));\n      }else if(char == \'\\u0065\'){\n        spans.add(TextSpan(\n          text: char,\n          style: TextStyle(color: Colors.blue),\n        ));\n      }else if(char == \'\\u0069\'){\n        spans.add(TextSpan(\n          text: char,\n          //color: Colors.green,\n          style: TextStyle(color: Colors.green),\n        ));\n      }else if(char == \'\\u006F\'){\n        spans.add(TextSpan(\n          text: char,\n          style: TextStyle(color: Colors.yellow),\n        ));\n      }else if(char == \'\\u0075\'){\n        spans.add(TextSpan(\n          text: char,\n          style: TextStyle(color: Colors.pink),\n          ));\n      }else{\n        spans.add(TextSpan(\n          text: char,\n          style: TextStyle(color: Colors.black),\n        ));\n      }\n    }\n    setState(() {\n      _displayEngSpans = spans;\n    });\n  }\n

\n

Answer 1

解决了问题。问题在于所使用的特定字体。以下是使用不同的梵文 Google 字体的吠陀梵文脚本的输出。根据当前版本，Noto Serif Devanagari 和 Pragati Narrow 看起来可以呈现所需的吠陀口音。如果我们更改颜色，Tiro 字体会出现一些特殊字符的问题。