当前位置: 首页 > news >正文

flutter在列表页面中通过监听列表滑动偏移量控制页面中某个控件的透明度

问题:使用scrollController.addListener直接在列表页面中改变透明度;会因为setState((){})刷新的是整个页面导致滑动时页面卡顿。
解决:将透明度控件放入StatelessWidget中通过StatefulBuilder实现滚动刷新透明值时,UI只刷新该控件。

1.被控制透明度的控件

import 'package:flutter/material.dart';
/*
* 体验购appbar(带需要展位格口数量显示的单元 停在appbar底部,视觉欺骗实现悬停)
* */
class ConfigOpacityWidget extends StatelessWidget{final Widget childOne;final Widget? childTwo;ConfigOpacityWidget({required this.childOne,this.childTwo});late Function updateOpacity;double _opacity = 0.0;bool _sliverOutOfView = false;Widget build(BuildContext context) {// TODO: implement buildreturn StatefulBuilder(builder: (context, setStateBuilder) {updateOpacity = (double opacity,bool sliverOutOfView) {setStateBuilder((){_opacity = opacity;_sliverOutOfView = sliverOutOfView;});};return Column(children: [AnimatedOpacity(opacity: _opacity,duration: Duration(milliseconds: 100),child: childOne,),if(childTwo != null)AnimatedOpacity(opacity: _sliverOutOfView ? 1.0 : 0.0,duration: Duration(milliseconds: 100),child: childTwo,),],);});}
}

2.在有ScrollController控制的页面中引用

late ScrollController _scrollController;
double _opacity = 0.0;
late ConfigOpacityWidget _appbarWidget;void initState() {// TODO: implement initStatesuper.initState();_scrollController = ScrollController();_scrollController.addListener(_scrollListener);_httpData();}_scrollListener(){double _offset = _scrollController.offset;_opacity = (0 + _offset / Constant.APPBAR_SCROLL_OFFSET).clamp(0.0, 1.0); // 0.0 到 1.0 之间bool _isSliverOutOfView = false;if(_offset > _sliverWidgetHeight * 0.8){_isSliverOutOfView = true;if(_currentTabIndex == 2){if(_videoController.value.isPlaying == true){_videoController.pause();}}} else {_isSliverOutOfView = false;if(_currentTabIndex == 2){_videoController.play();}}_appbarWidget.updateOpacity(_opacity,_isSliverOutOfView);}
void dispose() {// TODO: implement dispose_scrollController.dispose();super.dispose();}_setAppbarView(){_appbarWidget = ConfigOpacityWidget(childOne: _appbarView(),childTwo: _cellTitleWidget(),);}_httpData(){
//网络请求成功后
if(mounted){
_setAppbarView();
}
}
http://www.dtcms.com/a/390064.html

相关文章:

  • linux上升级nginx版本
  • WINCC结构变量/公共弹窗
  • 信息化项目验收计划方案书
  • 1.数据库概述和三种主要控制语言
  • 找到nohup启动的程序并杀死
  • 电磁干扰EMI (Electromagnetic Interference)是什么?
  • python提取域名
  • PR工具timing report中setup time的计算过程
  • 低延迟垃圾收集器:挑战“不可能三角”
  • 【测试】发版测试准入准出标准
  • 第一部分:HTML
  • 贪心算法应用:带权任务间隔调度问题详解
  • 视频监控大数据建模分析
  • IP的重要性
  • 远程访问管理爱快路由器
  • 算法 --- 优先级队列(堆)
  • Kindle出现电池感叹号图标和黄灯闪烁怎么办?
  • 摄像头模块在无人机上的应用
  • 深度学习篇GRU---LSTM和RNN的折中方案
  • Doris聚合表和物化视图选型对比
  • 互补色颜色对应的RGB
  • Python定义UDS诊断服务(8):SecurityAccess(0x27)
  • 第1节 工具(剪映剪映小助手)准备及安装(Coze扣子空间剪映小助手教程)
  • 大模型提示词Prompt工程:1-万能公式-完整指南
  • 8.30美团技术岗算法第三题
  • CentOS 7 一键安装 vsftpd 并创建可登录 FTP 用户 test
  • k8s自定义调度器实现路径
  • 服务器数据恢复—RAIDZ硬盘“惹祸”导致服务器崩溃的数据恢复过程
  • 20250917_车辆定位系统aidata-01Apache Doris数据库备份+恢复+清理 流程操作文档
  • Redis 7.0 ACL实战:RBAC模型实现精细化权限控制