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

/// 透明度可变组件
          Opacity(
            opacity: appBarAlpha,
            child: Container(
              height: 80,
              decoration: BoxDecoration(color: Colors.white),
              child: Center(
                child: Padding(
                  padding: EdgeInsets.only(top: 20),
                  child: Text("标题透明渐变"),
                ),
              ),
            ),
          ),
1
2
3
4
5
6
7
8
9
10
11
12
13
14
四、监听滚动事件
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 , 则透明度组件为 1
                  double 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: 
              ),
            ),