Flutter 如何在flatter中突出显示搜索的单词

我想把我这样打的字加粗

我尝试使用RichText，但它只在一个位置固定，搜索文本可以是中心、开始和结束

我有什么办法可以这样做吗？

，您可以将

TextSpan

与

RichText

一起使用。以下是如何实现它的想法：

class\u MyWidgetState扩展状态{
字符串-文本；
静态常量列表_文本=[
//在课文的开头
“颤振-创纪录的美丽本地应用程序”，
//附引号
“最新的‘颤振’问题-StackOverflow”，
//在课文的中间
“Github:Flatter使部署变得简单快捷…”
];
@凌驾
小部件构建（构建上下文）{
返回列(
crossAxisAlignment:crossAxisAlignment.start，
儿童：[
TextFormField(
//每次键入文本字段时，更新
//具有要搜索的新文本的小部件
一旦更改：（text）=>setState（（）=>\u text=text）
),
…_text.map（（文本）{
//如果未键入文本，请返回文本本身
如果（_text==null）返回文本（text）；
//查找搜索文本的开始索引
final int i=text.toLowerCase（）
.indexOf（_text.toLowerCase（））；
//如果文本不存在，请返回文本本身
如果（i==-1）返回文本（Text）；
返回RichText(
text:TextSpan(
样式：TextStyle(
颜色：颜色，黑色，
尺寸：15，
),
儿童：[
//从文本的开头到
//搜索文本时，将其设为默认样式
TextSpan（text:text.substring（0，i）），
//从搜索文本的开始到结束
//对于搜索文本，将其设置为粗体样式
TextSpan(
text:text.substring（i，i+_text.length），
样式：文本样式（fontWeight:fontWeight.bold）
),
//从搜索文本的结尾到结尾
//对于文本，将其设为默认样式
TextSpan（text:text.substring（i+\u text.length）），
]
)
);
}),
]
);
}
}

，您可以将

文本span

与

RichText

一起使用。以下是如何实现它的想法：

class\u MyWidgetState扩展状态{
字符串-文本；
静态常量列表_文本=[
//在课文的开头
“颤振-创纪录的美丽本地应用程序”，
//附引号
“最新的‘颤振’问题-StackOverflow”，
//在课文的中间
“Github:Flatter使部署变得简单快捷…”
];
@凌驾
小部件构建（构建上下文）{
返回列(
crossAxisAlignment:crossAxisAlignment.start，
儿童：[
TextFormField(
//每次键入文本字段时，更新
//具有要搜索的新文本的小部件
一旦更改：（text）=>setState（（）=>\u text=text）
),
…_text.map（（文本）{
//如果未键入文本，请返回文本本身
如果（_text==null）返回文本（text）；
//查找搜索文本的开始索引
final int i=text.toLowerCase（）
.indexOf（_text.toLowerCase（））；
//如果文本不存在，请返回文本本身
如果（i==-1）返回文本（Text）；
返回RichText(
text:TextSpan(
样式：TextStyle(
颜色：颜色，黑色，
尺寸：15，
),
儿童：[
//从文本的开头到
//搜索文本时，将其设为默认样式
TextSpan（text:text.substring（0，i）），
//从搜索文本的开始到结束
//对于搜索文本，将其设置为粗体样式
TextSpan(
text:text.substring（i，i+_text.length），
样式：文本样式（fontWeight:fontWeight.bold）
),
//从搜索文本的结尾到结尾
//对于文本，将其设为默认样式
TextSpan（text:text.substring（i+\u text.length）），
]
)
);
}),
]
);
}
}

我使用

flatter\u html

String highlightWord(String query, String text) {
     String result = text.replaceFirst('$query', '<b>$query</b>');
     return result;
   }

---

它对我来说非常有效

我找到了一个使用

flatter\u html

String highlightWord(String query, String text) {
     String result = text.replaceFirst('$query', '<b>$query</b>');
     return result;
   }

---

它对我来说非常有效

TextSpan

具有

子项

属性-因此，如果您的粗体文本位于中间，则

子项

列表将包含3项：第一项仅包含文本，第二个为粗体样式和文本，第三个为纯文本

TextSpan

具有

子项

属性-因此，如果您的粗体文本位于中间，则

子项

列表将有3项：第一项为纯文本，第二项为粗体样式和文本，第三项为纯文本