这个标签视图上显示的东西是一个 ListViewDemo .. 这是小部件是我们之前创建的 .. 它在一个单独的文件里 .. lib .. demo .. 找到 listview_demo.dart ..

小部件用了 ListView的 builder 创建了一个列表视图 .. 列表项目是用 _listItemBuilder 构建出来的 .. 现在它是一个 Container .. 里面包装了一个 Column .. 下面我们再改造一下它 .. 先用一个 Stack 小部件 .. 这种小部件里面可以放一摞小部件 .. 添加一个 children 属性 ..

里面先是 Column ... 下面再添加一个东西 .. 用一下 Positioned.fill .. 用这个 fill 方法创建的 Positioned .. 上下左右位置如果不单独设置的话都会是 0.0 ..

它的 child ，我们用一个 Material .. 里面先用 color 设置一下它的背景 .. 设置成 Colors.transparent .. 表示透明 ..

这个 Material 的 child 用一个 InkWell .. 它会给我们一块带溅墨效果的区域 .. 先设置一下它的 splashColor .. 溅墨的颜色 .. 可以使用白色 .. 再用 withOpacity 设置一下不透明度 ... 可以是 0.3 ..

下面再用一个 highlightColor 设置一下高亮颜色 .. 颜色也可以是白色 .. 不透明度设置成 0.1 .. 在这个 InkWell 里面可以再添加一个点按的回调 .. 用户按了它以后会执行这个回调 .. 先用一个 debugPrint ... 在调试控制台上输出一个 Tap ...

打开编辑器的调试控制台 .. shfit + command + Y ..

按一下模拟器上的这个列表视图里的某个项目 .. 现在会出现一种溅墨效果 .. 最开始显示的是高亮颜色 .. 慢慢展开的是 SplashColor .. 控制台上会输出一个 Tap ..

这个图片的显示可以再修改一下 .. 我想让它有个固定的比例 ..

先剪切一下这个图像 .. 用一下 AspectRatio ... 里面添加一个 aspectRatio 属性设置一下想要的比例 ... 比如 16/9 ... 然后是它的 child .. 把剪切图像再粘贴过来 ..

然后在图像里面再添加一个 fit 属性 .. 把它的值设置成 BoxFit.cover ...

现在列表项目上的图像的显示比例会变成固定的 16/9 ...