用户登录

点按内容页面右上角的这个媒体比例小图标,在弹出的底板上面可以再添加一种全屏幕显示比例。

打开 post_media_aspect_ratio_bottom_sheet,可以复制一份这里用的这个 AppTextMenuItem,修改一下,label 是全屏,活动状态判断的依据是检查 mediaAspectRatio 是不是等于 0,如果是我们就认为要全屏显示内容媒体。点按回调里执行 setMediaAspectRatio,提供的参数值是 0 。

post_show_store

再打开 post_show_store,修改一下在这个 store 里定义的 storeMediaAspectRatio 方法,store 里的 mediaAspectRatio 有变化的时候会执行这个方法存储用户选择的媒体比例。

存储之前判断的条件可以改一下,加上一个 && mediaAspectRatio != 0 ,也就是我们不打算存储用户选择的全屏幕显示比例。

去掉这个 else,换成一个 if ,判断的是 mediaAspectRatio 等于 null,这种情况下可以删除掉在本地设备上存储的 mediaAspectRatio 这个数据。

post_show_media

打开 post_show_media ,每次创建这个小部件的时候,都会执行这个 restoreMediaAspectRatio ,恢复用户之前选择的存储在本地设备上的媒体显示比例。这里我们可以把这个动作放在 post_show 小部件里去执行。先把这行代码删除掉。

再打开 post_show,在 initState 里面,执行一下 postShowStore.restoreMediaAspectRatio() 。

测试

重新启动一下应用。然后在模拟器测试一下,打开一个内容。按一下内容页面上这个显示比例小图标,现在这里会多出一个选项,就是全屏,点按这个项目的时候,会把 mediaAspectRatio 的值修改成 0 ,表示要用全屏模式显示内容媒体。

关掉这个内容页面,重新再打开它。你会发现,打开了内容页面以后,会恢复这个内容媒体的显示比例。

改进:添加媒体全屏幕显示比例《 Flutter 移动端实例:图像视图 》

统计

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

社会化网络

关于

微信订阅号

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