先把这里用的这个 PageView 单独放在一个小部件里面 .. 先剪切一下这块代码 ... 换成一个 PageViewDemo ..

在下面新建一个 class .. 名字可以叫 PageViewDemo .. 让它继承一下 StatelessWidget ...

类里面添加一个 build 方法 .. 把剪切的代码粘贴到这里 .. 再保存一下 ..

下面我们可以再试一下用 PageView.builder 的方法创建页面视图 .. 用一下 PageView.builder .. 页面相关的数据我之前已经准备好了 .. 在 lib .. model 的下面，有个 post.dart ... 这里面有一组 Post 内容 .. 每个内容项目都有一个标题 .. 作者 ... 还有一个图像地址 ..

回到 view_demo.dart .. 先在文件顶部导入上一级目录下面的 model 里面的 post.dart ..

再继续编辑一下这个 PageView.builder ... 我们先得告诉它页面项目的数量 .. 添加一个 itemCount .. 数量是 posts.length .. 这个 posts 就是上面导入进来的 post.dart 里面的东西 .. 它是一个列表类型的数据 .. 所以 length 属性的值就是列表项目的数量 ..

下面再添加一个 itemBuilder ... 它的值是个方法，这个方法返回的东西就是页面项目小部件 .. 用一下 _pageItemBuilder ..

在这个类里面，再去定义一下这个方法 .. 方向 return 的值的类型是 Widget .. 方法的名字叫 _pageItemBuilder ..

这个方法接收一个 context 参数 .. 类型是 BuildContext .. 另外还有一个整数类型的参数 .. 名字可以是 index .. 表示的就是页面项目的索引值 ..

方法 return 的是个 Widget .. 这个 Widget 可以用一个 Stack 包装一下 .. 这个小部件里面可以添加一些叠加到一块儿显示的小部件 .. 里面添加一个 children 属性 .. 它的值是一组 Widget ..

里面先用一个 SizedBox.expand .. 这样这个 Box 的尺寸会占满所有可用的空间 .. 添加一个 child 属性 .. 它的值可以用一个 Image.network .. 显示一个来自网络的图像 .. 图像的地址是 posts[index].imageUrl .. 再添加一个 fit 设置一下填充效果 .. 可以设置成 BoxFit.cover ..

再预览一下现在的这个页面视图 .. 每个页面项目上面会显示一张图像 ..

这个图像上面可以再叠加显示点文字内容 ..

添加一个 Positioned 小部件 .. 先用 bottom 设置一下底部的位置 .. 比如 8.0 ... 再用 left 设置一下左边的位置 .. 也可以设置成 8.0 ... child 里面是它的子部件 .. 这个子部件用一个 Column .. 添加一栏内容 .. 先添加一个 crossAxisAlignment 设置一下交叉轴的对齐 .. 设置成 CrossAxisAlignment.start ..

再添加一个 children .. 它的值是一组 Widget ..

里面先添加一个 Text .. 要显示的文字是 posts[index]。title .. 再用 style 设置一下文字的样式 .. TextStyle .. fontWeight 设置成粗体字 ..

下面再添加一个 Text ... 显示的文字是 posts[index].author ... 内容的作者 ..

最后再预览一下做好的这个页面视图 .. 每个页面项目上面会有一张图像 .. 一个标题，还有一个作者 ...