按一下这个列表视图上的项目，可以打开一个内容的详情页 .. 先去创建一个内容的详情页 .. 在 lib .. demo 的下面，新建一个文件 .. 名字是 post_show.dart ..

文件里面，先导入 flutter 这个包里的 material ... 然后再导入 model 目录里面的 post.dart .. 因为在这个详情页上我需要这个文件里面提供的数据 .. 以后我们会介绍到怎么请求来自后端服务的数据 ..

添加一个 StatelessWidget .. 名字可以叫 PostShow ..

类里面先添加一个 post 属性 .. 类型是 Post .. 一个构造函数 .. @required 需要一个 this.post ..

先让它的 build 方法返回一个 Scaffold .. 里面添加一个 appBar .. 对应值是 AppBar .. 工具栏的 title 是个 Text .. 要显示的文字是 ${post.title} .. 这个 post 应该是在使用这个 PostShow 的时候传递过来的数据 .. 它里面的 title 属性的值就是内容的标题 .. 再把工具栏上的 elevation 设置成 0.0 ..

再回到 listview_demo.dart ..

设置一下这个 InkWell 的 onTap .. 里面用一下 Navigator.of .. 给它 context .. 再用 push 方法，push 一个新的路由到路由堆里 .. 它是一个 MaterialPageRoute 实例 .. 里面需要使用 builder 方法构建要显示的东西 .. 方法有个 context 参数 .. 用一下 PostShow .. 再提供一个 post 数据 .. 对应的值是 posts[index] ..

在文字的顶部 ... 再去导入这个 post_show.dart ...

现在可以到模拟上去试一下 .. 按一下列表项目 .. 会打开一个新的页面 .. 页面的工具栏上的标题，就是我们打开的这个内容的标题 ..

详情

回到 post_show.dart ... 继续再编辑一下详情页上要显示的内容 ..

在 Scaffold 里面，再给它添加一个 body .. 设置一下页面的主体 .. 主体内容可以使用一个 Column 小部件 .. 添加一个 children 属性 .. 里面是一组小部件 ..

先添加一个 Image.network .. 图像的地址是 post.imageUrl ..

下面添加一个 Container .. 里面先用 padding 添加点内边距 .. 大小是 32.0 .. 然后用 widh 设置一下宽度 .. 可以是 double.infinity .. 让这个容器占满所有可用的宽度..

然后是它的 child .. 这个 child 是一个 Column ... 里面先用 crossAxisAlignment 设置一下交叉轴的对齐，设置成 CrossAxisAlignment.start ..

再添加一个 children 属性 .. 一组 Widget .. 里面用一个 Text .. 要显示的文字是 post.title .. 再用 style 设置一下文字样式 ... Theme.of(context).textTheme.title ..

复制一份 .. 要显示的文字是 post.author .. 文字的样式用一下 textTheme.subhead ..

复制一份这个 Text .. 我们可以再添加一个内容的描述，post.description ... 样式可以使用 textTheme.body1 .. .. 在它上面再用一个 SizedBox .. height 设置成 32.0 ..

现在 Post 里面还没有这个 description 属性 .. 打开资源管理器 .. 找到 model 下面的 post.dart ... 先在构造函数里面添加一个 this.description ..

下面再添加一个属性 ... description ..

然后先找一个 Post 列表项目 .. 里面添加一个 description .. 里面随便插入一段内容 .. 下面你可以在所有的 Post 里面，添加一个 description 属性 ...

打开命令面板 .. 执行一下 hot restart .. 重启以后 ... 再到模拟器上试一下 ..

按一下列表视图里的列表项目，会打开内容的详情页面 .. 上面会显示内容的图像，标题，作者，还有一段描述 ..