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

Question

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

早些时候，当我使用 spannableStr 在 Android 中开发这个应用程序时，我在 Kotlin 中也有类似的代码，并且按预期工作。 Flutter Dart 代码是：

import 'package:flutter/material.dart';

import 'package:flutter/painting.dart';
import 'package:google_fonts/google_fonts.dart';

class TextModifierScreen extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return TextModifierScreenState();
  }
}

class TextModifierScreenState extends State{

  List<TextSpan> _displaySpans = [];
  String inputString = "मृ॒त्यवे॒ यो॑ स्वाहा᳚ भू॒ मु॒भयो॒रा ॥";

  void replaceVowelsWithColor(String input) {
    List<TextSpan> spans = [];
    for (int i = 0; i < input.length; i++) {
      String char = input[i];
      int unicode = char.codeUnitAt(0);
      String unicodeString = '\\u${unicode.toRadixString(16).padLeft(4, '0')}';
      print('Unicode of $char is $unicodeString');
      if(char == '\u0952'){
        spans.add(TextSpan(
          text: char,
          style: TextStyle(color: Colors.red, ),
        ));
      }else if(char == '\u0951'){
        spans.add(TextSpan(
          text: char,
          style: TextStyle(color: Colors.blue),
        ));
      }else if(char == '\u1cda'){
        spans.add(TextSpan(
          text: char,
          style: TextStyle(color: Colors.green),
        ));
      }else{
        spans.add(TextSpan(
            text: char,
          style: TextStyle(color: Colors.black),
        ));
      }
    }
    setState(() {
      _displaySpans = spans;
    });
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Accents Color Replacer'),
      ),
      body: Center(
        child: Padding(
          padding: EdgeInsets.only(left: 20, right: 20),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            RichText(
              text: TextSpan(
                style: GoogleFonts.tiroDevanagariSanskrit(
                  fontSize: 20,
                  color: Colors.black,
                ),
                children: <TextSpan>[
                  TextSpan(text: 'Original Text:\n '),
                  TextSpan(text: inputString),
                ],
              ),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                replaceVowelsWithColor(inputString);
              },
              child: Text('Replace colors'),
            ),
            SizedBox(height: 20),
            RichText(
              text: TextSpan(
                style: GoogleFonts.tiroDevanagariSanskrit(
                  fontSize: 20,
                  color: Colors.black,
                ),
                children: <TextSpan>[
                  TextSpan(text: 'Modifed Text: \n'),
                  ..._displaySpans,
                  //_displaySpans[0],_displaySpans[2],_displaySpans[9],_displaySpans[2]
                ],
              ),
            ),
          ],
        ),
      ),
      ),
    );
  }
}

第一张图片就是我所看到的。第二张图片是预期的输出。

提前致谢！

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

void replaceVowelsWithColor(String input) {

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

Answer 1

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