文章目录
前言
一、移除顶部状态栏空白
二、帧布局组件
三、透明度组件
四、监听滚动事件
五、完整代码示例
六、相关资源
前言
在上一篇博客 【Flutter】Banner 轮播组件 ( flutter_swiper 插件 | Swiper 组件 ) 基础上进行开发 ;
一、移除顶部状态栏空白
在 Flutter 界面上方 , 默认有个状态栏 , 显示时间 , 电量 , 网络 , 信号强度等信息 , 这个状态栏是半透明的 ;
可以使用 MediaQuery 组件移除顶部状态栏空白部分 ;
调用 MediaQuery.removePadding 方法 , 第一个参数 context 设置成 BuildContext context , 第二个参数 child 设置成原来的组件 ;
修改前的代码 :
@override Widget build(BuildContext context) { /// 界面框架 return Scaffold( /// 居中组件 body: Center(), ); }
修改后的代码 : 下面代码中的 removeTop: true 很关键 , 代表移除顶部的空白 ;
@override Widget build(BuildContext context) { /// 界面框架 return Scaffold( /// 居中组件 body: MediaQuery.removePadding( removeTop: true, context: context, child: Center(),), ); }
移除后顶部空白后的效果 : 上述只是给出了简要的代码示例 , 完整代码看最后的示例 ;
二、帧布局组件
实现帧布局样式需要使用 Stack 组件 , 前面的组件在下层 , 后面的组件在上层 ;
@override Widget build(BuildContext context) { /// 界面框架 return Scaffold( /// 帧布局组件 , 前面的元素在下层 , 后面的元素在上层 body: Stack( children: <Widget>[ /// 消除顶部空白的组件 MediaQuery.removePadding(), /// 透明度可变组件 Opacity(), ], ), ); }
上述设置 , 实现了在 Swiper 组件上方显示了 Text 组件 , 并且 Text 组件覆盖了 Swiper 组件 ;
