列表项目

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

列表里的每个项目上面都有一个标题 .. 一个内容作者 ... 还有一张图片 ... 列表项目需要设置一下它的间距还有背景颜色这些东西 ..

列表项目可以放在一个 Container 里面 ... 用一个 Container 小部件 .. 里面先添加一个 color 设置一下它的颜色 .. 可以设置成白色 ... Colors.white ...

再添加一个 margin,添加一点外边距 ... EdgeInsets.all ... 在 Container 的四周添加 8.0 的间距 ... Container 里的内容交给它的 child 属性 ..

内容需要图像,标题,还有作者 ... 这些东西都是竖着排列,所以可以使用一个 Column 小部件包装一下这些内容 ... 它有个 children 属性 ... 里面是一组 Widget ...

显示图像,用一下 Image ,图像来源是网络,所以用一下它的 network 方法 .. 图像的地址是 posts[index].imaegUrl ...

现在会显示一组图像列表 ... 它的下面留点空间 ... 添加一个 SizedBox ... 用 height 设置一下它的高度 ... 16.0 ...

下面可以再改一下页面整体的背景 ... 让页面跟列表项目的背景对比更大一些 .. 找到 scaffold ... 在它里面用一下 backgroundColor ... 设置一下背景颜色 ... 值设置成一个浅灰色 ...

图像的下面是标题 ... 文字内容可以使用 Text 小部件 ... 标题文字是 posts[index].ttile ..

再添加一个 style 设置一下文字的样式 ... 这个样式可以使用 ... Theme.of ... context ... 主题是 textTheme,表示文字主题 ... 样式设置成 title ...

复制一份 ... 再添加一个 author .... 它的样式用一下 subhead ...

在它的下面,再用一个 sizedBox ... 高度设置成 16.0 ...

现在我们就得到了一组内容列表 .. 每个列表项目用了一个 Container ... 里面包装了一个 Column ... 在 Column 里面分别是图像,内容标题,还有内容作者 ..

列表项目《 Flutter 移动应用:快速起步 》

统计

15260
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点