用户登录

在内容全屏模式下,如果没有使用沉浸式的话可以在页面顶部显示一个返回还有一个关闭按钮,点按返回可以返回到上一个路由,点按关闭可以回到正常模式的内容页面。

新建一个文件,放在 lib/post/show/components 里面,名字是 post_show_fullscreen_top.dart,在这个文件里定义一个小部件,名字是 PostShowFullscreenTop。

给这个小部件添加一个属性,类型是 void Function()? 名字是 onTapClose ,它是点按关闭按钮的时候要做的事情。再准备一个构造方法,里面添加一个带名字的参数,this.onTapClose。

然后打开 post_image_view,在这个 Observer 的 builder 里面,声明一个 restoreMediaAspectRatio,它的值是 postShowStore 里的 restoreMediaAspectRatio。

在这个 Stack 小部件的 children 里面,判断一下 !immersiveMode ,如果没有使用沉浸式模式可以再添加一个 PostShowFullscreenTop 小部件,提供一个 onTapClose,它是一个方法,在里面执行一下 restoreMediaAspectRatio。

回到 post_show_fullscreen_top。在小部件的 build 方法里面,声明一个 iconColor,值是 Colors.white38,用它作为小图标的颜色。

下面可以定义两个动作按钮,声明一个 goBackAction ,值是一个 GestureDetector,设置一下 onTap,点按的时候可以执行 Navigator.maybePop,提供一个 context 。它的 child 是一个 Icon 小部件的,图标是 Icons.arrow_back_outlined ,color 是 iconColor。

再声明一个 closeAction ,关闭动作,值是一个 GestureDetector,onTap 的值设置成 onTapClose,它的 child 是一个 Icon ,小图标是 Icons.close_outlined,color 设置成 iconColor。

小部件里用一个 Container,先用 decoration 设置一下它的装饰,新建一个 BoxDecoration,添加一个渐变,设置一下 gradient,用一个 LinearGradient 线性渐变,设置一下开始还有结束的位置,begin 是 Alignment.topCenter,end 是 Alignment.bottomCenter 。然后用 colors 设置一下渐变颜色,第一个颜色是 Colors.black87,第二个颜色是 transparent 。

容器的 child 可以先用一个 SafeArea 小部件,它的 child 是一个 Container,里面用 padding 设置一下边距,EdgeInsets.only,left 是 24,right 也是 24。

容器的 child 是一个 Row 小部件,用 mainAxisAlignment 设置一下主轴对齐,MainAxisAlignment.spaceBetween 。再设置一下它的 children ,一个列表,里面添加一个 goBackAction,再添加一个 closeAction 。

测试

现在全屏模式下的内容页面的顶部会显示两个按钮,点按内容页面,可以切换使用沉浸式模式。按一下这个返回按钮可以返回到这个内容列表页面。再打开一个内容,打开全屏模式,这次可以按一下这个关闭小图标,这样会执行 restoreAspectRatio,显示正常模式的内容页面。

内容全屏顶部小部件(PostShowFullscreenTop)《 Flutter 移动端实例:沉浸模式 》

统计

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

社会化网络

关于

微信订阅号

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