添加表示使用沉浸式模式的数据(immersiveMode)

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

在全屏幕模式下除了内容图像以外,还可以显示一些其它的东西,我们可以用一个数据来决定是否要在全屏幕模式下显示这些东西。

post_show_store

打开 post_show_store,在数据这里添加一个 bool 类型的数据,名字是 immersiveMode,默认值是 false,用它表示是否要使用沉浸式的模式,如果是就只显示内容图像,不显示其它的东西。

下面再添加一个对应的动作,修改这个数据的值,名字是 setImmersiveMode 一个 bool 类型的 data 参数,设置 immersiveMode ,让它等于 data 。

post_image_view

打开 post_image_view,先剪切一下这个 Stack 小部件,这里先用一个 Observer 小部件,设置一下它的 builder,有个 context 参数,构建器返回的东西就是这个 Stack 小部件。

在上面再添加一个 immersiveMode ,值是 postShowStore 里的 immersiveMode ,再声明一个 setImmersiveMode,值是 postShowStore 里的 setImmersiveMode。

然后选中这个 Container 小部件,给它添加一个包装,用一个 GestureDetector ,设置一下 onTap ,点按的时候会执行这个方法,里面可以执行 setImmersiveMode 提供的值是 !immersiveMode ,

在这个 stack 小部件里可以判断一下 !immersiveMode,如果没在使用沉浸式模式的话,可以在这里先随便添加一个小部件,一个 Center ,它的 chlid 是个 Text,文字是 PostImageView,用 style 设置一下文字样式,fontSize 是 28 ,color 是 Colors.white70 。

测试

点按内容图像视图,现在会检查 immersiveMode 这个数据的值,如果它是 ture 就只会显示内容图像,如果是 false,除了图像以外,还会显示一行文字 PostImageView 。

添加表示使用沉浸式模式的数据(immersiveMode)《 Flutter 移动端实例:沉浸模式 》

统计

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

社会化网络

关于

微信订阅号

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