「这是我参与11月更文应战的第28天，活动详情检查：2021最终一次更文应战」

咱们现已完成了微信的谈天列表界面，在微信中谈天界面上方还有一个查找功用，能够查找微信的谈天信息，今天咱们来模仿完成此功用；

增加查找进口

在微信的主页，咱们滑动页面能够发现，查找框是随着列表一同滑动的，那么阐明查找部件和ListView很有可能是一体的，咱们现在来完成此部件；

class ChatSearchCell extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(color: Colors.red, height: 40,);
  }
}

咱们先给此部件一个简单的赤色布景及高度；

接下来，咱们要对谈天界面的代码进行修正，由于查找框也是ListView的一部分了，咱们将其作为是第一个Cell，那么ListView的itemCount个数应该+1:

return ListView.builder(
  itemCount: _list.length + 1,
  itemBuilder: _itemBuilderForRow);

之后，在_itemBuilderForRow办法中做判别，当是第一个cell的时分，显现查找框，之后的cell进行index--操作，显现谈天列表的数据，代码及作用如下：

布局查找进口UI

为了更好的对照微信进行布局，咱们将导航栏色彩设置为灰色布景，由于此处的查找进口是需求进行点击事件呼应的，因而运用手势包含起来：

躲藏导航栏下方暗影

咱们看到导航栏下方，有一条暗影线，咱们将其躲藏，需求设置对应页面AppBar的elevation特点，将其设置为0:

增加白色布景

很明显，咱们此处应该显现一个Stack，在一个圆角白色布景上边显现查找文字和图标：

运用Stack进行布局，先增加一个圆角的白色布景；

增加查找图标及文字

经过在Stack上先增加了一个圆角白色布景的Container，由于查找图标和文字是横向的，因而咱们需求再增加一个Row来布局，作用如下：

• Stack的alignment特点能够设置白底Container和Row都居中对齐；
• Row的mainAxisAlignment特点能够设置Row中的Icon和Text在主轴方向上居中对齐；

查找页面

头部查找框

从查找页面布局来看，页面大致分为两部分，上部为查找输入框，下部为显现成果的ListView，那么在查找页面咱们就能够运用Column来进行布局：

上半部分显现查找的SearchBar，下半部分显现ListView，可是咱们发现此刻运转代码是会报错的，报错信息如下：

这是由于咱们在增加一个ListView的时分，需求给ListView指定高度，此刻有两种解决方案，为了便于剖析，咱们将ListView放进Container里面：

• 第一种，运用Expended把ListView包起来，代码及作用如下：

• 第二种，运用ListView的shrinkWrap特点，将其设置为true，代码及作用如下：

两者成果：运用Expanded的办法，ListView会依据布局自适应剩下的区域；而shrinkWrap该特点将决定列表的长度是否仅包裹其内容的长度。当ListView嵌在一个无限长的容器组件中时，shrinkWrap必须为true，否则Flutter会给出警告

咱们此处选用Expanded的办法，需求留意的是Expanded需求设置flex，由于咱们此处直接运用了flex默许为1；

ListView偏移问题

咱们虽然成功增加了ListView，可是ListView的内容是向下偏移了的，这个时分咱们需求将这部分偏移移除；需求运用MediaQuery.removePadding办法移除头部偏移，代码如下：

查找框布局

咱们来看一下现在头部赤色区域的代码：

statusBarHeight获取状态栏高度；

由于咱们的查找框是显现鄙人半部，也就是状态栏下方的，因而咱们选用Column进行布局，代码如下：

接下来，赤色区域运用Row进行左右布局，左面是白色布景的Container，右边是撤销按钮，：

将此区域分为两部分，上半部分选用SizeBox填充状态栏(安全区)，下半部分显现查找区域和撤销；

输入框布局

输入框分为三部分，左面放大镜，中心输入框，右边是铲除按钮，这样咱们来运用Row进行布局，代码及作用如下：

• 放大镜的Icon运用SizeBox包一下，能够设置宽度，调整巨细；
• 中心的输入框TextField运用Expanded包起来，能够让输入框自适应巨细，将铲除按钮自动布局到右侧；

输入框光标色彩

TextField的CursorColor特点能够修正输入框的光标的色彩

cursorColor: Colors.green, // 输入框光标色彩

代码及作用如下：

文字的巨细色彩和宽度

TextField的文本信息依然是style特点，并且style是TextStyle类型的：

style: TextStyle(fontSize: 18, color: Colors.black, fontWeight: FontWeight.w300),

作用如下：

输入框的边框

当咱们在输入框内输入过多文字的时分，会出现如下情况：

此刻需求设置TextField的装饰器decoration：

输入框下方黑线

咱们仔细看此刻的输入框，在输入框的下边是有一条黑线的，那么如何躲藏呢？需求设置装饰器InputDecoration的border特点：

占位符

设置TextField占位文本，运用特点hintText：

第一呼应

假如咱们需求输入框自动聚焦获得第一呼应，调起键盘，能够运用TextField的autofocus特点：

：

铲除按钮

铲除按钮款式：

铲除按钮功用

咱们点击铲除按钮的时分，是需求清空输入框中的内容的，要想完成此功用，需求运用到TextEditingController，咱们来定义一个：

final TextEditingController _textEditingController = TextEditingController();

然后将_textEditingController赋值给TextField的controller特点：

这样，咱们就能经过_textEditingController来操控输入框的相关功用；

当在输入框中输入文本信息时，TextField的onChange办法将会发生回调，返回当前输入框中的内容：

咱们将此办法抽出为：

  void _textFieldOnChange(text) {
  }

咱们是需求操控铲除按钮的显现与躲藏的，默许情况下躲藏，当输入框中有内容是，铲除按钮显现，那么咱们就需求一个bool值来标识显现与躲藏：

bool _showClear = false; // 是否躲藏恳求按钮

再增加铲除按钮式需求依据此特点值来增加，假如为true，则增加铲除按钮：

然后在_textFieldOnChange办法中，判别是否显现躲藏，作用如下：

铲除按钮也是能够点击铲除输入框内容的，咱们需求给Icon增加手势：

咱们运用_textEditingController.clear()办法来铲除输入框文本内容，可是需求留意的是，此办法并不会触发TextField的onChange办法，那么点击铲除之后，铲除按钮本身并不会被躲藏，因而咱们需求手动调用onChange办法：

现在，查找框相关功用现已完全完成；