SliverList 是一个列表视图 .. 把这个 SliverGridDemo 换成 SliverListDemo .. 下面再去创建这个 SliverListDemo .. 直接复制一份 SliverGridDemo ... 再修改一下 ..

名字是 SliverListDemo ... 里面要用的小部件是 SliverList ... 这样就不再需要这个 gridDelegate 了 .. 保存一下 ..

现在界面上显示的就是一个简单的列表视图 .. 每个视图项目里面有一张来自网络的图像 .. 下面可以再改造一下这个列表的样式 ..

先在列表项目的下面添加点边距 .. 我们可以把这个 Container 放在一个 Padding 小部件里面 .. 里面添加一个 padding 属性设置一下需要的边距 .. EdgetInsets.only .. 因为我们只需要在底部的这个边儿添加边距 .. 大小是 32.0 ..

在这个项目上可以再添加点效果 .. 先把这个 Container 放在一个 Material 里面 .. 在 Material 小部件里面添加一个 child 属性 .. 它的值就是刚才剪切的 Container ..

然后在 Material 小部件里，再用一个 borderRadius .. 设置一下圆角的效果 .. BorderRadius.circular .. 大小设置成 12.0 ..

再用一个 elevation .. 设置一下阴影 .. 大小可以是 14.0 ..

接着再用一个 shadowColor .. 设置一下阴影的颜色 .. 颜色是灰色 .. withOpacity 设置一下不透明度 .. 值是 0.5 ..

如果想让这个项目的尺寸用一个特定的比例 .. 我们可以把 Container 换成一个 AspectRatio .. 里面再添加一个 aspectRatio .. 比例设置成 16/9 ...

在这个图片上我还想叠加点文字 .. 所以可以用一个 Stack 小部件 .. 用一个 Stack ... 里面添加一个 children 属性 .. 然后先把图片放进来 ..

下面再用一个 Positioned 小部件 .. 设置一下 top 的位置 .. 32.0 ... 再设置一下 left 位置 .. 大小也是 32.0 .. child 是它的子部件 .. 里面有两行文字 .. 把它们放在一个 Column 里面 ..

它的 children 属性是 Column 里的子部件 .. 用一个 Text .. 文字是 posts[index].title .. 再用一个 style 设置一下样式 .. TextStyle .. fontSize ，字号设置成 20.0 .. color ，文字的颜色 .. 设置成 Colors.white ..

复制一份这个 Text ... 这个 Text 要显示的文字是 posts[index].author .. 文字大小是 13.0 .. 它的 color 也是白色 ...

最后我们在 Column 里面，再添加一个 crossAxisAlignment .. 把交叉轴的对齐设置成 CrossAxisAlignment.start ..

再到模拟器上预览一下现在的这个 SliverList ，列表视图 ...