如何生成List<TextSpan>动态？

Question

大家早上好,

我有不同长度的单词，我需要用当前单词的每个字母创建一个动态的TextSpan列表。

我有个例子可以用截图来解释我的意思

  var txtColor = 'a';
  var word = 'rate'.split('');

  levlup() {
    List<TextSpan> textSpans = <TextSpan>[
      TextSpan(text: word[0], style: TextStyle(color: txtColor == word[0] ? Colors.red: Colors.black)),
      TextSpan(text: word[1], style: TextStyle(color: txtColor == word[1] ? Colors.red: Colors.black)),
      TextSpan(text: word[2], style: TextStyle(color: txtColor == word[2] ? Colors.red: Colors.black)),
      TextSpan(text: word[3], style: TextStyle(color: txtColor == word[3] ? Colors.red: Colors.black)),

    ];
    return textSpans;
  }

  Widget build(BuildContext context) {

    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            RichText(
              text: TextSpan(
                style: TextStyle(color: Colors.black, fontSize: 18),
                children: levlup(),
              ),
            )
          ],
        ),
      ),
    );
  }
}

在这里输入图像描述

Answer 1

像这样吗？

List<TextSpan> textSpans = word.map((c) => TextSpan(text: c, style: TextStyle(color: txtColor == c ? Colors.red: Colors.black))).toList();