文章目录

前言
一、移除顶部状态栏空白
二、帧布局组件
三、透明度组件
四、监听滚动事件
五、完整代码示例
六、相关资源

前言

在上一篇博客【Flutter】Banner 轮播组件 ( flutter_swiper 插件 | Swiper 组件 ) 基础上进行开发 ;

一、移除顶部状态栏空白

在 Flutter 界面上方 , 默认有个状态栏 , 显示时间 , 电量 , 网络 , 信号强度等信息 , 这个状态栏是半透明的 ;

可以使用 MediaQuery 组件移除顶部状态栏空白部分 ;

调用 MediaQuery.removePadding 方法 , 第一个参数 context 设置成 BuildContext context , 第二个参数 child 设置成原来的组件 ;

修改前的代码 :

  @overrideWidget build(BuildContext context) {/// 界面框架return Scaffold(/// 居中组件body: Center(),);}

修改后的代码 : 下面代码中的 removeTop: true 很关键 , 代表移除顶部的空白 ;

  @overrideWidget build(BuildContext context) {/// 界面框架return Scaffold(/// 居中组件body: MediaQuery.removePadding(removeTop: true,context: context,child: Center(),),);}

移除后顶部空白后的效果 : 上述只是给出了简要的代码示例 , 完整代码看最后的示例 ;

二、帧布局组件

实现帧布局样式需要使用 Stack 组件 , 前面的组件在下层 , 后面的组件在上层 ;

  @overrideWidget build(BuildContext context) {/// 界面框架return Scaffold(/// 帧布局组件 , 前面的元素在下层 , 后面的元素在上层body: Stack(children: <Widget>[/// 消除顶部空白的组件MediaQuery.removePadding(),/// 透明度可变组件Opacity(),],),);}

上述设置 , 实现了在 Swiper 组件上方显示了 Text 组件 , 并且 Text 组件覆盖了 Swiper 组件 ;

三、透明度组件

Opacity 组件可以控制该组件的透明度改变 , 修改 opacity 属性 , 可以改变组件的透明度效果 , 0 是完全透明 , 1 是完全不透明 ;

          /// 透明度可变组件Opacity(opacity: appBarAlpha,child: Container(height: 80,decoration: BoxDecoration(color: Colors.white),child: Center(child: Padding(padding: EdgeInsets.only(top: 20),child: Text("标题透明渐变"),),),),),

四、监听滚动事件

NotificationListener 组件可以监听滚动事件 ;

在 onNotification 属性中设置监听事件 , 传入一个 NotificationListenerCallback 类型的方法 , 方法参数是 ScrollNotification 类型的 ;

指定监听的组件 : scrollNotification.depth == 0 指的是深度为 0 的元素 , 即 ListView 元素滚动时 , 才触发滚动 ;

调用 scrollNotification.metrics.pixels 获取滚动的距离 ; 滚动距离在 0 ~ 100 之间时 , 透明度组件透明度从 0 ~ 1 变化 , 如果滚动距离 >= 100 , 则透明度组件为 1 , 如果滚动距离小于 0 , 则透明度为 0 ;

注意 : 在最后设置完毕后 , 调用 setState 方法 , 更新 UI ;

代码示例 :

            NotificationListener(// 监听滚动的方法onNotification: (scrollNotification){// scrollNotification.depth == 0 指的是深度为 0 的元素//    即 ListView 元素滚动时 , 才触发滚动if(scrollNotification is ScrollUpdateNotification &&scrollNotification.depth == 0) {// 从 scrollNotification 中获取滚动参数print("滚动距离 ${scrollNotification.metrics.pixels}");// 滚动距离在 0 ~ 100 之间时//    透明度组件透明度从 0 ~ 1 变化//    如果滚动距离 >= 100 , 则透明度组件为 1double alpha = scrollNotification.metrics.pixels / 100.0;// 处理小于 0 和 大于 1 极端情况// 如果只处于 0 ~ 1 之间 , 不做处理if (alpha < 0) {alpha = 0;} else if (alpha > 1) {alpha = 1;}// 更新 UI 数据setState(() {appBarAlpha = alpha;});}},child: ListView(children: ),),

五、完整代码示例

import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';/// 应用主界面
class HomePage extends StatefulWidget {@override_HomePageState createState() => _HomePageState();
}class _HomePageState extends State<HomePage> {List _imageUrls = ["https://img-blog.csdnimg.cn/20210401205234582.png","https://img-blog.csdnimg.cn/20210401205307863.png","https://img-blog.csdnimg.cn/20210401205249606.png"];/// 顶层透明度组件的透明度double appBarAlpha = 0;@overrideWidget build(BuildContext context) {/// 界面框架return Scaffold(/// 帧布局组件 , 前面的元素在下层 , 后面的元素在上层body: Stack(children: <Widget>[/// 消除顶部空白的组件MediaQuery.removePadding(removeTop: true,context: context,// 使用 NotificationListener 组件 , 监听列表的滚动child: NotificationListener(// 监听滚动的方法onNotification: (scrollNotification){// scrollNotification.depth == 0 指的是深度为 0 的元素//    即 ListView 元素滚动时 , 才触发滚动if(scrollNotification is ScrollUpdateNotification &&scrollNotification.depth == 0) {// 从 scrollNotification 中获取滚动参数print("滚动距离 ${scrollNotification.metrics.pixels}");// 滚动距离在 0 ~ 100 之间时//    透明度组件透明度从 0 ~ 1 变化//    如果滚动距离 >= 100 , 则透明度组件为 1double alpha = scrollNotification.metrics.pixels / 100.0;// 处理小于 0 和 大于 1 极端情况// 如果只处于 0 ~ 1 之间 , 不做处理if (alpha < 0) {alpha = 0;} else if (alpha > 1) {alpha = 1;}// 更新 UI 数据setState(() {appBarAlpha = alpha;});}},child: ListView(children: <Widget>[Container(/// 设置 Banner 轮播图 160 像素height: 160,/// 这是 flutter_swiper 插件的轮播图child: Swiper(/// 轮播图数量itemCount: _imageUrls.length,/// 设置轮播图自动播放autoplay: true,/// 轮播条目组件itemBuilder: (BuildContext context, int index) {return Image.network(/// 图片 URL 链接_imageUrls[index],/// 缩放方式fit: BoxFit.fill,);},/// 轮播图指示器pagination: SwiperPagination(),),),Container(height: 800,child: ListTile(title: Text("标题透明渐变"),),),],),),),/// 透明度可变组件Opacity(opacity: appBarAlpha,child: Container(height: 80,decoration: BoxDecoration(color: Colors.white),child: Center(child: Padding(padding: EdgeInsets.only(top: 20),child: Text("标题透明渐变"),),),),),],),);}
}

执行结果 :

六、相关资源

参考资料 :

Flutter 官网 : https://flutter.dev/
Flutter 插件下载地址 : https://pub.dev/packages
Flutter 开发文档 : https://flutter.cn/docs ( 强烈推荐 )
官方 GitHub 地址 : https://github.com/flutter
Flutter 中文社区 : https://flutter.cn/
Flutter 实用教程 : https://flutter.cn/docs/cookbook
Flutter CodeLab : https://codelabs.flutter-io.cn/
Dart 中文文档 : https://dart.cn/
Dart 开发者官网 : https://api.dart.dev/
Flutter 中文网 : https://flutterchina.club/ , http://flutter.axuer.com/docs/
Flutter 相关问题 : https://flutterchina.club/faq/ ( 入门阶段推荐看一遍 )
GitHub 上的 Flutter 开源示例 : https://download.csdn.net/download/han1202012/15989510
Flutter 实战电子书 : https://book.flutterchina.club/chapter1/

重要的专题 :

Flutter 动画参考文档 : https://flutterchina.club/animations/

博客源码下载 :

GitHub 地址 : https://github.com/han1202012/flutter_app ( 随博客进度一直更新 , 有可能没有本博客的源码 )
博客源码快照 : https://download.csdn.net/download/han1202012/21515304 ( 本篇博客的源码快照 , 可以找到本博客的源码 )

【Flutter】监听滚动动作控制组件透明度渐变 ( 移除顶部状态栏空白 | 帧布局组件 | 透明度组件 | 监听滚动组件 )相关推荐

Flutter透明度渐变动画Opacity实现透明度渐变动画效果
题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精,即是折腾每一天. ** 你可能需要 CSDN 网易云课堂教程掘金 EDU学院教程知乎 Flutter系列文章在Flutter 中实 ...
Flutter透明度渐变动画FadeTransition实现透明度渐变动画效果
题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精,即是折腾每一天. ** 你可能需要 CSDN 网易云课堂教程掘金 EDU学院教程知乎 Flutter系列文章在Flutter 中实 ...
flutter FadeTransition实现透明度渐变动画
更多文章请查看 flutter从入门到精通 flutter 动画状态监听器 AnimationController //动画控制器AnimationController controller;//A ...
Flutter AnimatedOpacity 实现透明度渐变动画效果
题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精,即是折腾每一天. 在Flutter 中实现透明度渐变效果的方式可通过以下通过 AnimatedOpacity 实现就是本文了通过 ...
顶部布局随ScrollView滑动透明度渐变（QQ空间效果）
QQ控件顶部的工具条在整体的ScrollView从顶部滑动时会从透明逐渐变为solid纯色:虽然有人实现过 ActionBar随ScorllView上下拖动而透明度渐变效果以及仿QQ空间滚动Act ...
android 缩放透明动画,Android旋转、平移、缩放和透明度渐变的补间动画
android实现旋转.平移.缩放和透明度渐变的补间动画,具体实现如下: 1.在新建项目的res目录中,创建一个名为anim的目录,并在该目录中创建实现旋转.平移.缩放和透明度渐变的动画资源文件. 透 ...
JS实现透明度渐变动画
<!doctype html> <html lang="en"> <head><meta charset="UTF-8" ...
angular 指令渲染_Angular 组件交互 ngOnChanges 监听某一属性值变更
我们在实际项目中会拆分各个功能模块,以便页面复用,避免重复工作.那么,这里就涉及到组件之间的交互问题.例如常使用的,输入型数据绑定.setter截听.ngOnChanges()截听以及通过创建引入服务 ...
Flash实现透明度渐变遮罩的方法
下面介绍两个方法并附上源文件和演示文件. 一.AS法:这个简单,就一个mc.setMask(mask_mc) 就搞定了,但mask_mc必须使用[模糊]滤镜,而mc一定得是位图的元件! 见演示地址:h ...

【Flutter】监听滚动动作控制组件透明度渐变 ( 移除顶部状态栏空白 | 帧布局组件 | 透明度组件 | 监听滚动组件 )

文章目录

前言

一、移除顶部状态栏空白

二、帧布局组件

三、透明度组件

四、监听滚动事件

五、完整代码示例

六、相关资源

【Flutter】监听滚动动作控制组件透明度渐变 ( 移除顶部状态栏空白 | 帧布局组件 | 透明度组件 | 监听滚动组件 )相关推荐

最新文章

热门文章

【Flutter】监听滚动动作 控制组件 透明度渐变 ( 移除顶部状态栏空白 | 帧布局组件 | 透明度组件 | 监听滚动组件 )

文章目录

前言

一、移除顶部状态栏空白

二、帧布局组件

三、透明度组件

四、监听滚动事件

五、完整代码示例

六、相关资源

【Flutter】监听滚动动作 控制组件 透明度渐变 ( 移除顶部状态栏空白 | 帧布局组件 | 透明度组件 | 监听滚动组件 )相关推荐

最新文章

热门文章

【Flutter】监听滚动动作控制组件透明度渐变 ( 移除顶部状态栏空白 | 帧布局组件 | 透明度组件 | 监听滚动组件 )

【Flutter】监听滚动动作控制组件透明度渐变 ( 移除顶部状态栏空白 | 帧布局组件 | 透明度组件 | 监听滚动组件 )相关推荐