给搜索界面传值

给搜索界面传值我们首先需要给ChatSearchCell传值，将列表传给ChatSearchCell，我们在ChatSearchCell中定义如下：

在创建ChatSearchCell的时候，给构造函数传值：

这样，我们就讲数据传递给了ChatSearchCell，接下来点击ChatSearchCell的时候，将数据传递给搜索页面;

我们给SearchPage添加如下构造函数：

在点击ChatSearchCell跳转SearchPage的时候，传递聊天列表的数据：

获取输入内容

接下来我们就需要获取用户在搜索框中输入的文本信息了，为了是搜索框尽可能的与业务剥离，处理独立的事件，我们将文本内容通过SearchBar的构造函数返回给搜索页面：

在文本发生改变是，调用该方法：

这样我们就能在搜索页SearchPage中获取到用户输入的内容了：

显示搜索结果

我们专门抽出来一个方法处理text，然后再次方法中过滤列表数据，获得搜索结果；我们在搜索页面定义一个resultList来接收搜索结果的数据列表：

final List<Chat> _resultList = [];

然后在_searchMessage方法中处理搜索数据：

我们先来完善一下搜索方法，将搜索结果显示出来，代码及效果如下：
iShot2021-11-20 20.37.10.gif
接下来我们完善一下ListView的显示效果：

关键字高亮显示

我们已经能够根据输入内容。匹配到对应的联系人列表了；现在就剩下最后一个效果，我们的搜索内容也就是关键字，需要在列表中的名字上边高亮显示；

我们定义一个方法_textHighlighted，在此方法中构建高亮显示的名字部件，方法默认如下：

  Widget _textHighlighted(String name) {
    return Text(name);
  }

TextSpan

想要实现文字的高亮效果，就需要使用到TextSpan这样一个部件，其定义如下：

  const TextSpan({
    this.text,
    this.children,
    TextStyle? style,
    this.recognizer,
    MouseCursor? mouseCursor,
    this.onEnter,
    this.onExit,
    this.semanticsLabel,
    this.locale,
    this.spellOut,
  })

我们重点介绍其中较为常用的几个属性：

text：该文本片段的内容；
style：该文本片段的样式；
children：是一个TextSpan数组，即TextSpan可以包括其他的TextSpan；
recognizer：在该文本片段上进行手势识别的处理；

获取关键字
首先我们要获取搜索的关键字：

处理高亮文本
处理高亮文本，我们需要对名字进行分割处理，我们先在Dart在线工具网站上写一段测试代码，来分析一下name经过关键字分割之后的情况：

我们发现，name经过_keyText的分割之后组成了一个字符串数组，在数组中我们发现规律如下：
空字符串就是关键字本身；
非空字符传要在后边自动拼接关键字，此非空字符串不能是最后一个，否则将会多拼接关键字;
如果空字符串是最后一个字符，那么不能拼接关键字；

按照这三个规律，我们能将文本信息还原；

我们先定义两种文字的显示效果：

接下来完善_textHighlighted方法代码如下：

注意，红框中的条件必不可少，否则将会出现下边的情况：
iShot2021-11-20 21.51.40.gif
最终搜索页完整代码如下：

最终效果如下：
iShot2021-11-20 22.07.42.gif

Flutter从入门到进阶

Flutter(三十一)实战-微信聊天搜索功能

给搜索界面传值

获取输入内容

显示搜索结果

关键字高亮显示

TextSpan

获取关键字

处理高亮文本