哇,这个名字好绕口
你可以理解为:使用 flutter 实现listview 并且点击跳转
你也可以理解为: Image 组件的 colorBlendMode(颜色混合模式)的示例
我们先看一下示例吧~
![](https://img.haomeiwen.com/i2742735/87f1ea17eb5c6fad.gif)
ok,这下明白了吧。
一、实现ListView效果
首先,定义一个数组
![](https://img.haomeiwen.com/i2742735/7197f5e948d21e98.jpg)
然后定义一个返回ListView的方法
![](https://img.haomeiwen.com/i2742735/5467ba7fcf14a292.jpg)
修改创建flutter项目后的body体
![](https://img.haomeiwen.com/i2742735/07f53fbc23fc0a8b.jpg)
这样,ListView就创建好了
![](https://img.haomeiwen.com/i2742735/4e24c53abf0b3eeb.png)
需要注意的是,ListView 中的 item 采用的是 FlatButton ,这样做的目的是方便编写点击事件
二、编写点击事件方法
![](https://img.haomeiwen.com/i2742735/8884f618d0860c11.jpeg)
这里使用到了router,点击显示新的页面
首先添加图片
在项目跟目录创建images
文件夹,然后贴入先要展示的图片
![](https://img.haomeiwen.com/i2742735/4e961ee2539d32c4.jpg)
然后需要在配置文件
pubspec.yaml
中配置一下
![](https://img.haomeiwen.com/i2742735/8d68298289dd81af.jpg)
将第一步中的ListView的点击事件进行修改即可
![](https://img.haomeiwen.com/i2742735/7d778cda92709d1e.jpg)
哦,对了,还要定义一个colorBlendMode的数组
![](https://img.haomeiwen.com/i2742735/c28933dd96697679.jpg)
网友评论