八天让iOS开发者上手Flutter!(七)

上一篇文章我们已经完成首页聊天页面的导航条和列表展示,今天的任务是完成搜索cell的展示和点击之后的搜索页面的功能。
八天让iOS开发者上手Flutter!(七)_第1张图片

自定义SearchCell

新建search_cell.dart文件

八天让iOS开发者上手Flutter!(七)_第2张图片

实现SearchCell代码

SearchCell的话,因为仅仅只是展示,点击之后就进入搜索页了,应该来说是不需要状态的,所以用一个StatelessWidget就够了。然后布局的方式使用一个Container包含一个Row,Row里面包一个图片和文本就可以了。布局的方式其实多种多样,能实现就好了。完整代码如下:
八天让iOS开发者上手Flutter!(七)_第3张图片

一个有意思的地方是,flutter里面的Image居然可以设置颜色,而且颜色是设置给图片的。比如我的放大镜图片原本是黑色的,设置红色之后,居然真的变红色了!!!

八天让iOS开发者上手Flutter!(七)_第4张图片

使用SearchCell

SearchCell的展示就算写完了,然后在ChatPage.dart中使用,我们把ListView的itemBuilder方法抽取出来,然后因为我们多加了一个SearchCell,所以itemCount需要加1,然后取_chatList数据的时候也要处理一下下标。

自定义SearchPage

新建search_page.dart文件

八天让iOS开发者上手Flutter!(七)_第5张图片

简单实现SearchPage

SearchPage作为一个页面,使用StatelessWidget肯定是无法胜任的,所以使用一个StatefulWidget。而由于AppBar的样式和我们需要显示的效果图还是有差别的,所以这里我们不使用Scaffold提供的AppBar了。我们自定义一个SearchBar

你可能感兴趣的:(flutter,iOS开发,swift,ios,xcode,flutter,objective-c,swift)