首页 > 其他 > 详细

10-5基于listview

时间:2020-02-11 22:13:59      阅读:135      评论:0      收藏:0      [点我收藏+]

在dao的基础上实现实时搜索的功能。
首先在搜索页面,把接口的地址定义一个常量放在页面的最上面

技术分享图片

技术分享图片
首先把Scaffold的appBar删除掉。

技术分享图片

自定义来实现我们的AppBar

我们来提供一个方法来实现appBar

技术分享图片
把这段代码提取到_appBar的方法去。

技术分享图片
提取过来,先注释,我们对代码做一些处理
技术分享图片

技术分享图片
首先是个上下布局的 所以返回一个Column
上面放一个AppBar的阴影遮罩。外层一个Container然后里面用Box装饰器。设置渐变。gradient

技术分享图片
设置child。里面也包一个Container。

技术分享图片

Container的child就是刚才迁移过来的代码,又注释掉的SearchBar

技术分享图片

技术分享图片
我们在左边,默认有一个返回按钮

技术分享图片
在首页是隐藏的,在搜索页面是显示的。

技术分享图片

在最上面定义这个几个变量,然后实现构造方法

技术分享图片
这样我们可以可以通过widget.hideLeft来获取上面定义的变量。

技术分享图片
这几个全部换成变量

技术分享图片
当我们的输入框发生变化的时候,动态的发起请求

技术分享图片

技术分享图片
在上面定义SearchModel,和keyword

技术分享图片
当查询的内容是空的时候,SearchModel也就是显示的结果也是空

技术分享图片

技术分享图片

ListView展示结果

这里我们使用ListVIew的Builder方法.这样创建的方式,效率更高一点。

技术分享图片
如果searchModel为空,或者searchModel.data为空或者searchModel.data.length为空,那么就返回0

技术分享图片

实现item

这里进行简单的实现。

技术分享图片

测试

打开搜索页面

技术分享图片
报异常

技术分享图片
垂直的视图,没有给高度

技术分享图片
这里Column布局,里面用了一个ListView,ListView必须要有一个明确的高度。所以说我们希望ListView能够占据上线的_appBar之外的所有空间。

技术分享图片

彩蛋

如果让ListVIew占据我们的垂直布局。我们可以用Expanded

技术分享图片
然后flex设置为1。这样它就会自适应高度和宽度。

技术分享图片
然后设置child就是我们刚才的ListView

技术分享图片

再次运行测试

有效果。但是现在输入文字没有任何的内容。

技术分享图片

进行调试

在这里加断点

技术分享图片
在页面上随便输入一个字符,通过这个按钮,一步步的往下执行。

技术分享图片

技术分享图片
我们给它构造函数,设置默认值

技术分享图片

去掉断点,再次测试。重新运行项目,有可能热加载会有问题。

技术分享图片

技术分享图片

搜索的内容上方空白-彩蛋

技术分享图片
如果去除空白,这是另外一个彩蛋
通过flutter为我们提供的一个widget。MediaQuery.removePadding

技术分享图片
设置移除顶部的

技术分享图片

技术分享图片

技术分享图片

输入搜索内容太快引起的问题

这里多传一个text的值

技术分享图片

技术分享图片
技术分享图片

技术分享图片
这样才去渲染结果

技术分享图片

最终测试结果

技术分享图片

优化

搜索页,左侧的返回是不需要的。

技术分享图片
初始化的时候,把左侧的返回按钮隐藏。在tab_navigator页面初始化搜索页的时候,传递一个hideLeft设置为true就会隐藏返回按钮了。

技术分享图片

这样左侧的返回按钮就没了。

技术分享图片

技术分享图片

作业

把之类的BoottomNavigationBarItem封装成一个方法。

技术分享图片

结束

 

10-5基于listview

原文:https://www.cnblogs.com/wangjunwei/p/12297026.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!