flutter 如何改变句子中一个单词的颜色?

yws3nbqq  于 2022-11-30  发布在  Flutter
关注(0)|答案(2)|浏览(183)

这是我的文本我想改变颜色这是在单引号和最后的ID,这是动态的文本它来自API -〉

您的查询“THIS IS TESTING SUBJECT TRYING TO EXPLORE HAHA .”已使用票证ID引发:编号0606 c2 a23 d9 e
我想做这样的x1c 0d1x
怎么把它弄成这样

pbpqsu0x

pbpqsu0x1#

您可以使用RichText小部件来实现此目的,在该小部件中,您可以为文本的不同部分指定不同的样式

RichText(
 text: TextSpan(
 text: 'Hello ',
 style: DefaultTextStyle.of(context).style,
 children: const <TextSpan>[
  TextSpan(text: 'bold', style: TextStyle(fontWeight: FontWeight.bold)),
  TextSpan(text: ' world!'),
],
),
)
ig9co6j1

ig9co6j12#

假设我们有一个单引号模式

Your query 'THIS IS TESTING SUBJECT TRYING TO EXPLORE HAHA .' has been raised with ticket id: #0606c2a23d9e

让我们将任务拆分为子任务:
首先,指定regex

final regex = RegExp('\'.+\'');

接下来,让我们尝试用regex求出target的值(假设我们总是忽略这里的空性情况)

final target = regex.stringMatch(string)!;

接下来,将原始字符串中的target替换为一些placeholder

final placeholder = '{@}';
final updatedString = string.replaceAll(regex, placeholder);

接下来,将updatedString拆分为tokens

final tokens = updatedString.split(RegExp(' '));

如果token是一个placeholder,那么我们用target和所需的样式替换它

final spans = tokens
    .map((e) => e == placeholder
        ? TextSpan(text: target + ' ', style: TextStyle(color: Colors.blue))
        : TextSpan(text: e + ' '))
    .toList();

最后,把所有东西都收集起来

Text.rich(TextSpan(children: spans)))

完整代码示例

class Page extends StatelessWidget {
  final String string;

  const Page({Key? key, required this.string}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final regex = RegExp('\'.+\'');
    const placeholder = '{@}';
    final target = regex.stringMatch(string)!;
    final updatedString = string.replaceAll(regex, placeholder);
    final tokens = updatedString.split(RegExp(' '));
    final spans = tokens
        .map((e) => e == placeholder
        ? TextSpan(text: target + ' ', style: const TextStyle(color: Colors.blue))
        : TextSpan(text: e + ' '))
        .toList();
    
    return Center(child: Text.rich(TextSpan(children: spans)));
  }
}

相关问题