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

哇,这个名字好绕口

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

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

我们先看一下示例吧~


ok,这下明白了吧。

一、实现ListView效果

首先,定义一个数组

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

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

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

修改创建flutter项目后的body体

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

这样,ListView就创建好了


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

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

二、编写点击事件方法

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

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

首先添加图片

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

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

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

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

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

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

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


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

bingo

项目源码地址

你可能感兴趣的:(flutter 通过 ListView 展示列表点击跳转查看 Image 组件的颜色混合模式)