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

flutter简单自定义跟随手指滑动的横向指示器

在这里插入图片描述

ScrollController _scrollController = ScrollController();double _scrollIndicatorWidth = 60.w;//指示器的长度double _maxScrollPaddingValue = 30.w;//指示器中蓝条可移动的最大距离double _scrollPaddingValue = 0.0;//指示器中蓝条左边距(蓝条移动距离)void initState() {super.initState();_scrollController.addListener(() {setState(() {final double scrollOffset = _scrollController.offset;final double? scrollableExtent = _scrollController.position.maxScrollExtent;//  final double viewportExtent = _scrollController?.position?.viewportDimension;if(scrollableExtent != null){_scrollPaddingValue = (scrollOffset / scrollableExtent) * _maxScrollPaddingValue;}if(_scrollPaddingValue > _maxScrollPaddingValue){_scrollPaddingValue = _maxScrollPaddingValue;}});});}
void dispose() {_scrollController.dispose();super.dispose();}//横向tab布局
_goodsTabBar() {if(_goodsCategoryList.isNotEmpty){return Column(children: [SingleChildScrollView(controller: _scrollController,scrollDirection: Axis.horizontal,child:TabBar(controller: _tabController,// tabs的长度超出屏幕宽度后,TabBar,是否可滚动isScrollable: true,// 设置tab文字的类型labelStyle: TextStyle(fontSize: 24.sp, letterSpacing: 1),// 设置tab选中得颜色labelColor: JadeColors.green_7,labelPadding: EdgeInsets.symmetric(horizontal: 10.w),// 设置tab未选中的颜色unselectedLabelColor: JadeColors.grey,// 设置tab未选中时文字的类型unselectedLabelStyle: TextStyle(fontSize: 24.sp, letterSpacing: 1),indicatorWeight: 0.01,indicatorColor: JadeColors.grey_2,tabs: _goodsCategoryList.asMap().entries.map((entry){int index = entry.key;GoodsCategoryBean value = entry.value;bool isSelect = _tabController!.index == index;return Column(children: [Container(margin: EdgeInsets.only(top: 40.w,bottom: 10.w),width: 90.w,height: 90.w,decoration: BoxDecoration(border: isSelect? Border.all(color: JadeColors.green_7, width: 0.8): null,borderRadius: BorderRadius.circular(5),),child: Image.asset(value.iconPath ?? PathConfig.aTuiLogo),),Text(value.name!)],);}).toList(),)),_scrollIndicator()],);}else{return SizedBox.shrink();}}
http://www.lryc.cn/news/2394050.html

相关文章:

  • 项目日记 -Qt音乐播放器 -搜索模块
  • JavaScript 性能优化实战研讨
  • 有机黑鸡蛋与普通鸡蛋:差异剖析与选购指南
  • CTFHub-RCE 命令注入-无过滤
  • spring IOC控制反转
  • hot100 -- 1.哈希系列
  • leetcode hot100刷题日记——31.二叉树的直径
  • 行为型:解释器模式
  • 逻辑回归详解:从原理到实践
  • FastAPI集成APsecheduler的BackgroundScheduler+mongodb(精简)
  • 本地部署FreeGPT+内网穿透公网远程访问,搞定ChatGPT外网访问难题
  • linux 1.0.3
  • 基于RK3588的智慧农场系统开发|RS485总线|华为云IOT|node-red|MQTT
  • 解锁程序人生学习成长密码,从目标设定开始
  • 简单cnn
  • C#集合循环删除某些行
  • 相机定屏问题分析四:【cameraserver 最大request buffer超标】后置视频模式预览定屏闪退至桌面
  • 【Linux 学习计划】-- 进程地址空间
  • 告别重复 - Ansible 配置管理入门与核心价值
  • 3D Gaussian splatting 04: 代码阅读-提取相机位姿和稀疏点云
  • CTFHub-RCE 命令注入-过滤空格
  • 卫生间改造翻新怎么选产品?我在瑞尔特找到了解决方案
  • C++ list数据删除、list数据访问、list反转链表、list数据排序
  • Express教程【002】:Express监听GET和POST请求
  • mysql安装教程--笔记
  • C++ 观察者模式:设计与实现详解
  • 【PostgreSQL 03】PostGIS空间数据深度实战:从地图服务到智慧城市
  • HIT-csapp大作业:程序人生-HELLO‘s P2P
  • 深入探讨redis:主从复制
  • 帕金森常见情况解读