如何在 Flutter 中突出显示序列中文本中的每个单词？

Question

我想在 Flutter 中突出显示文本，但我想按顺序突出显示文本中的每个单词。因此，第一个单词被突出显示（并且前一个恢复正常，即未突出显示），然后是第二个单词，然后是第三个单词..等等。 我怎么能在 Flutter 中做这样的事情。

#编辑 我想对其进行动画处理，以便高光按顺序移动。例如，第一个单词用黄色突出显示，然后恢复正常，然后第二个单词突出显示，然后恢复正常，依此类推...... 我希望你明白了。

Answer 1

你可以试试：

class HighlightedTextWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    String text = "Hello, this is a highlighted text in Flutter";
    List<String> textList = text.split(" ");
    return Scaffold(
      body: Center(
        child: Text.rich(
          TextSpan(
            children: textList.map((text)  {
              var index = textList.indexOf(text);
              if (index % 2 == 0) {
                return TextSpan(text: text, style: TextStyle(background: Paint()..color = Colors.cyan));
              }
              return TextSpan(text: text, style: TextStyle(background: Paint()..color = Colors.limeAccent));
            }).toList() ,
          ),
        ),
      ),
    );
  }
}

这会给你：