我们在上一篇文章中已经完成了搜索输入框的相关功能，接下来，我们将整个搜索功能及结果显示完全实现；

要实现输入文本出现搜索结果的功能就必须要在跳转时将之前的数据列表传递给搜索页面：

• 在点击首页搜索时，需要拿到数据，跳转时传递给搜索页；
• 搜索框SearchBar将输入框中的内容实时的返回给搜索也；
• 搜索页根据SearchBar返回的内容，实时过滤数据；

给搜索界面传值

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

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

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

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

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

获取输入内容

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

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

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

显示搜索结果

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

final List<Chat> _resultList = [];

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

我们先来完善一下搜索方法，将搜索结果显示出来，代码及效果如下：

接下来我们完善一下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方法代码如下：

注意，红框中的条件必不可少，否则将会出现下边的情况：

最终搜索页完整代码如下：

最终效果如下：