用户登录

在全屏模式下,如果有可用的列表数据,可以用一个页面视图展示这个内容图像视图。这样我们可以用左右扫动手势控制显示不同的内容。

post_show

打开 post_show,在这里定义一个 usePageImageView,值可以判断 hasPosts 并且 isFullScreen ,如果有内容列表数据,并且是全屏模式,这个 usePageImageView 就会是 true。

下面判断一下,如果 usePageImageView,设置一下 body 的值,这里可以用一下 photo_view 提供的 PhotoViewGallery.builder 构造这个页面视图。

设置一下 pageController,值是 pageController,再设置一下 itemCount ,值是 posts!.length。然后是一个 builder ,用这个构建器返回一个 PhotoViewGalleryPageOptions。

这个构建器有个 context 参数,还有个 index 参数,然后声明一个 currentPost,值是 posts 方括号 index ,return 的东西可以用一下 PhotoViewGalleryPageOptions.customChild 生成,设置一下 child 参数,值用一下 PostImageView,提供一个 currentPost 参数。

上面这个 useImageView 需要再修改一下,在这个判断的条件的前面,再加上一个 !hasPosts 。

测试

在模拟器测试一下,现在,在全屏幕模式下,可以左右浏览内容图像视图。不过这里遇到了一个问题,显示下一个内容的时候,会退回到普通模式的内容视图。

这是因为,现在每次扔掉 PostImageView 小部件的时候,都会恢复媒体显示比例。我们可以把这个恢复媒体显示比例,还有设置系统界面模式的代码放在一个其它的地方。剪切一下。

app_router_delegate

打开 app_router_delegate,在这里可以先找到 PostShow 这个页面,给它添加一个 name,设置一下页面的名字,比如 PostShow。

再找到 onPopPage,pop 页面的时候会执行这个回调,这里我们判断一下,如果 route.settings.name 等于 PostShow,也就是如果 pop 的页面是 PostShow 这个页面。并且 postShowStore 的 mediaAspectRatio 等于 0 ,这种情况下,可以设置系统界面模式,还有恢复媒体的显示比例。

把复制的代码粘贴到这里,再选择导入需要用的这个 SystemChrome,它来自 flutter 的 services。

重新启动一下应用,打开一个内容页面,双击内容图像,使用全屏幕模式,然后试一下使用左右扫动手势,切换显示不同的内容。

使用 PhotoViewGallery 构建可左右导航的内容图像视图《 Flutter 移动端实例:图像视图 》

统计

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

社会化网络

关于

微信订阅号

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