PageView 小部件可以用左右扫动手势浏览页面,下面我们可以在内容页面用一下这个小部件,用它浏览内容列表里的内容项目。
先打开 post_index_store,在这里定义一个计算属性,类型是 bool 名字,get 名字是 hasPosts ,它返回的值表示的就是当前是否有内容列表数据。判断一下 posts是不是不等于 null ,并且 posts!.length 要大于 0 。满足条件这个 hasPosts 就会返回 true,不然它提供的值就是 false。
post_show.dart
回到 post_show.dart,改造一下,先在这里声明一个新的属性,用 late 标记一下,类型是 PostIndexStore,名字是 postIndexStore。在 initState 里面,设置一下 postIndexStore ,它的值用 context.read ,类型是 PostIndexStore。
然后在这个 builder 里面,声明一个 posts ,值是 postIndexStore 里的 posts,再声明一个 hasPosts,值是 postIndexStore 里的 hasPosts。
在下面再声明一个 Widget ,名字是 body,下面设置一下 body 的值,把这个 Scaffold 现在的 body 参数的值剪切一下,换成 body 。然后把这个剪切的东西交给上面这个 body 。
下面可以判断 hasPosts,如果有可用的内容列表数据,可以重新设置一下 body 的值,它的值可以用一个 PageView,这里我们用 builder 来构建每个要显示的页面。
设置一下它的 itemCount ,值是 posts!.length,也就是内容列表里的项目的数量。 再添加一个 itemBuilder,它返回的东西就是每个页面上要显示的内容,一个 context 参数,一个 index 参数,这个 index 的值就是当前页面在这组要显示的页面中的索引号,我们需要根据这个索引号得到内容列表里的对应的内容项目。
这里可以声明一个 currentPost,值是 posts 方括号 index。如果直接使用默认的这个 index 的值,得到的内容项目数据会有问题,后面我们会使用 PageController 解决这个问题,暂时先这样。
再声明一个 Widget ,名字是 page,下面声明一个 contentView,值是一个 PostContentView,把 currentPost 交给这个小部件。
设置一下 page,让它等于 contentView。 最后让这个 itemBuilder 返回这个 page 表示的小部件。
测试
再去测试一下,打开一个内容项目,因为现在应用里有内容列表数据,所以这个内容页面会使用一个 PageView,这样我们就可以使用左右扫动手势浏览列表里的内容项目。