点按内容列表项目里的图像可以打开对应的内容页面,我们需要先解决一下如何点按这个内容项目的图像,也就是当点按内容项目图像的时候,要执行对应的方法去做一些事情。可以这样,就是在这个内容图像小部件的上面叠加一个 Flutter 提供的 InkWell 小部件,可以把它们放在一个 Stack 小部件里面。
打开项目里的 post_list_item.dart,先剪切一下在这个小部件里使用的 PostMedia,这里换成一个 postListItemMedia,在 build 方法里面,定义一个 postListItemMedia,它的值先用一个 Stack 小部件,显示一堆小部件,在它的 children 里面先把之前剪切的 PostMedia 放进来,在它的下面再用一个 postListItemMediaMask。
在上面定义一个 postListItemMediaMask,它的值先用一个 Positioned 小部件,一个在 Stack 里定位用的小部件,用一下 fill 这个构造方法来创建这个小部件。它的 child 可以用一个 Material 小部件,把 color 设置成透明,Colors.transparent,这个 Material 小部件的 child,用一个 InkWell 小部件,在这个小部件里用 splashColor 设置一下溅墨效果的颜色,用一下 Colors.deepPurpleAccent.withOpacity(0.3) 。
这个 InkWell 小部件的 onTap ,就是点按的事件处理方法,在这个方法里在控制台上输出一行文字,onTap postListItemMedia。
下面可以测试一下,点按内容列表项目里的内容图像,会有一种溅墨效果,这就是 InkWell 小部件提供的,这个溅墨的颜色是用 InkWell小部件的 splashColor 参数设置的。点按内容列表项目图像,会在控制台上输出一行文字。