上一篇文章咱们曾经实现首页聊天页面的导航条和列表展现，明天的工作是实现搜寻 cell 的展现和点击之后的搜寻页面的性能。

自定义 SearchCell

新建 search_cell.dart 文件

实现 SearchCell 代码

SearchCell 的话，因为仅仅只是展现，点击之后就进入搜寻页了，应该来说是不须要状态的，所以用一个 StatelessWidget 就够了。而后布局的形式应用一个 Container 蕴含一个 Row，Row 里面包一个图片和文本就能够了。布局的形式其实多种多样，能实现就好了。残缺代码如下：

一个有意思的中央是，flutter 外面的 Image 竟然能够设置色彩，而且色彩是设置给图片的。比方我的放大镜图片本来是彩色的，设置红色之后，竟然真的变红色了！！！

应用 SearchCell

SearchCell 的展现就算写完了，而后在 ChatPage.dart 中应用，咱们把 ListView 的 itemBuilder 办法抽取进去，而后因为咱们多加了一个 SearchCell，所以 itemCount 须要加 1，而后取_chatList 数据的时候也要解决一下下标。

自定义 SearchPage

新建 search_page.dart 文件

简略实现 SearchPage

SearchPage 作为一个页面，应用 StatelessWidget 必定是无奈胜任的，所以应用一个 StatefulWidget。而因为 AppBar 的款式和咱们须要显示的效果图还是有差异的，所以这里咱们不应用 Scaffold 提供的 AppBar 了。咱们自定义一个 SearchBar，配合一个 ListView 来搭建根本的布局。这外面根本没有陈腐的货色，就简略贴一下代码：

SearchBar 因为是在 SearchPage 中应用的，所以就间接定义在 SearchPage 中了，代码也是先简略定义如下：

点击跳转到 SearchPage

在搜寻 cell 外面实现点击办法，而后跳转到 SearchPage，显示成果如图：

实现 SearchBar

SearchBar 的布局

SearchBar 的布局，最外层分为高低两个局部，下面的局部是零碎状态栏的高度。上面的局部就是显示搜寻条的高度。而搜寻条的布局，应用 Row 分隔为左右两个局部，左侧蕴含放大镜，文本输入框和删除图片。右侧就是一个返回下级页面的勾销。这里次要提一下 flutter 中的文本框，跟 iOS 中 UITextField 真的很不一样，UITextField 中左侧的图标，右侧的删除，都是封装在外部的。而在 flutter 中，文本框 TextField 真的就只有文本框，没有其余的货色，都须要本人增加。残缺代码如下：

SearchBar 事件处理

勾销的解决

点击勾销须要 pop 到上一个界面，给勾销加一个 GestureDetector 实现 onTap 就好了。代码如下：

革除按钮性能实现

首先作为一个开发者，有一个学习的气氛跟一个交换圈子特地重要，这是一个我的 iOS 开发公众号：编程大鑫，不论你是小白还是大牛都欢送入驻，让咱们一起提高，独特倒退！（群内会收费提供一些群主珍藏的收费学习书籍材料以及整顿好的几百道面试题和答案文档！）

未输出文本的时候，不显示革除按钮。有输出文本的时候，显示革除按钮。点击革除按钮，清空文本内容并暗藏革除按钮。

应用一个 bool 值 _showClear 管制革除按钮的显示暗藏。代码如下：

在文本变动的时候，批改 _showClear 值并刷新状态。文本的变动在 TextField 的 onChanged 属性就能够监听到。代码如下：

最初就是革除按钮的点击性能，因为须要清空 TextField 的文本内容，须要应用到 TextEditingController, 给 TextField 的controller 属性赋值，而后通过 TextEditingController 对象革除文本内容。文本革除之后并不会主动调用零碎的 onChanged 办法，本人手动调用一下就好了。代码如下：

SearchBar 回调文本框的内容

文本框的内容变动的时候，须要回调给 SearchBar 内部，这样咱们能力在 SearchPage 页面进行搜寻内容。应用一个回调作为参数就能够实现了。代码如下：

onChanged是一个闭包属性，在初始化 SearchBar 的时候传入，在 TextField 的文本变动的时候调用闭包，并将文本作为参数回传给 SearchBar 内部。因为将 onChanged 作为了必传参数，所以编译器天然会在用到了 SearchBar 的中央报错。很容易找到报错的中央，加个参数就好了。

SearchBar 相干的代码就算差不多实现了，其实能够将 SearchBar 独自作为一个文件独立进去。接下来就是解决 SearchPage 了

实现 SearchPage

搜寻页面的搜寻性能，往细了说，能够搜寻很多内容，咱们这里只是简略的搜寻名字，只有名字蕴含输出的内容，就将搜寻后果展现进去。因为这里对中文名进行搜寻的时候，能匹配到的数据比拟少，所以这里曾经将网络申请返回的名字由中文改为英文名字了。后面展现中文名字的截图就不做批改了。

SearchPage 的搜寻性能

增加 datas 数据源

要实现 SearchPage 的搜寻性能，那么它首先必须要有数据源，很显著它的数据源是从首页来的。先定义一个datas, 作为必传参数，而后通过内部层层传递过去。

datas定义好了当前，报红色谬误的中央，就是须要传参数的中央，很不便，都不必咱们本人去翻哪里须要加参数了。发现 SearchCell 外面须要传入数据源，同样的形式，在 SearchCell 外面定义datas, 而后在报错的中央解决。

就这样子顺藤摸瓜，直到来到 chat_page 将数据源传入就实现了

SearchPage 本人的数据源

SearchPage 须要展现搜寻之后的后果，所以本人定义一个数组用来寄存搜寻的后果。并且临时先应用 Text 做一个最简略的展现。代码如下：

实现搜寻性能并展现数据

搜寻的性能实现很简略，就是判断数据源外面的名字是否蕴含输出的文本，如果蕴含就全副增加并展现。代码如下：

APP 上如图，我输出 son，显示后果：

SearchPage 的搜寻后果列表展现

SearchPage 的搜寻后果列表展现的数据款式，应该和首页是相似的。所以能够间接应用首页的布局。代码如下：

SearchPage 高亮显示搜到的后果

这里的思路是，高亮显示搜到的后果，那么一般的文本必定是不行了，必须是富文本。如何找到搜寻的关键字在文本中的地位呢，这个不必咱们思考了。flutter 中对字符串有一个分隔办法 split, 这个办法跟 iOS 中的字符串的componentsSeparatedByString: 办法相似，依据传入的参数来分隔字符串。这里贴一下 iOS 的代码：

（还是 Xcode 看着悦目啊）咱们将字符串 abcaa 以字符 a 分组，再将分组的后果拼接回原来的字符串。为什么要这么操作？因为从新拼接新字符串的时候，咱们就能够解决富文本字符串了。当初回到 flutter 中来，flutter 中拼接的富文本的形式太不便了，RichText 花色拼接 TextSpan 这个咱们在后面也讲过了。

_searchKey就是咱们输出的文本，在 SearchPage 中申明属性，在 SearchBar 的回调中赋值就好了。

当初测试一下，输出 son，APP 显示如图：

滚动列表叫回键盘

ListView 的滚动，咱们在后面曾经说过一次，须要将 ListView 包在 NotificationListener 外面。而后叫回键盘的代码 FocusScope.of(context).requestFocus(FocusNode()); 这个记住就好了，代码如下：

总结

到这里咱们的 flutter 仿微信 Demo 性能就差不多完了，还剩最初一篇就是介绍 flutter 和原生混合开发的一些货色。这个也是理论我的项目中应该常常会遇到的状况。其实写到这里会发现很多货色和原生都是相通的或者相似的。除了新的语言 Dart 不是很相熟之外，其余很多中央比方很多属性的名字，色彩，闭包，都可能看到原生的影子。flutter 创造者们也不会闭门造车，都会去借鉴原生外面的货色。