上一篇文章咱们曾经实现首页聊天页面的导航条和列表展现，明天的工作是实现搜寻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创造者们也不会闭门造车，都会去借鉴原生外面的货色。