flutter 通过 ListView 展示列表点击跳转查看 Image 组件的颜色混合模式

哇，这个名字好绕口

你可以理解为:使用 flutter 实现listview 并且点击跳转

你也可以理解为: Image 组件的 colorBlendMode(颜色混合模式)的示例

我们先看一下示例吧~

ok，这下明白了吧。

一、实现ListView效果

首先，定义一个数组

flutter 通过 ListView 展示列表点击跳转查看 Image 组件的颜色混合模式

然后定义一个返回ListView的方法

flutter 通过 ListView 展示列表点击跳转查看 Image 组件的颜色混合模式

修改创建flutter项目后的body体

flutter 通过 ListView 展示列表点击跳转查看 Image 组件的颜色混合模式

这样，ListView就创建好了

flutter 通过 ListView 展示列表点击跳转查看 Image 组件的颜色混合模式

需要注意的是，ListView 中的 item 采用的是 FlatButton ,这样做的目的是方便编写点击事件

二、编写点击事件方法

flutter 通过 ListView 展示列表点击跳转查看 Image 组件的颜色混合模式

这里使用到了router，点击显示新的页面

首先添加图片

在项目跟目录创建images文件夹，然后贴入先要展示的图片

flutter 通过 ListView 展示列表点击跳转查看 Image 组件的颜色混合模式

然后需要在配置文件pubspec.yaml中配置一下

flutter 通过 ListView 展示列表点击跳转查看 Image 组件的颜色混合模式

将第一步中的ListView的点击事件进行修改即可

flutter 通过 ListView 展示列表点击跳转查看 Image 组件的颜色混合模式

哦，对了，还要定义一个colorBlendMode的数组

flutter 通过 ListView 展示列表点击跳转查看 Image 组件的颜色混合模式

bingo