三、透明度组件
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("标题透明渐变"), ), ), ), ), 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: ), ),