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

dart 复制代码
ScrollController _scrollController = ScrollController();

  double _scrollIndicatorWidth = 60.w;//指示器的长度
  double _maxScrollPaddingValue = 30.w;//指示器中蓝条可移动的最大距离
  double _scrollPaddingValue = 0.0;//指示器中蓝条左边距(蓝条移动距离)

@override
  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;
        }
      });
    });
  }
@override
  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();
    }
  }
相关推荐
爱笑鱼3 小时前
Binder(二):AIDL 生成的 Proxy、Stub 和 Parcel 到底在做什么?
android
爱笑鱼4 小时前
Binder(一):一次方法调用,究竟怎样跨进程执行?
android
gis开发之家4 小时前
《Vue3 从入门到大神35篇》Vue3 源码详解(五):effect 依赖收集原理——track 与 trigger 是如何工作的?
javascript·typescript·前端框架·vue3·vue3源码
zhazhazsy4 小时前
Flutter 多 Isolate 实战:搭建主 Isolate 数据与能力桥
flutter
壮哥_icon5 小时前
【Android 系统开发】使用 BAT 脚本高效自动化管理 /system/priv-app/ 系统应用(安装与卸载)
android·运维·自动化
橘子星5 小时前
我一个前端切图仔,凭什么能在浏览器里跑大模型?
前端·javascript·前端框架
半个落月5 小时前
用 LangChain JS 做可控写作实验:理解温度参数、提示词与异步调用
javascript·人工智能·后端
观远数据5 小时前
Excel到数据资产池:文件数据入湖的治理规范怎么建
前端·javascript·excel
CoderWeen5 小时前
我写了个能一步步点着看的 Dijkstra 可视化项目(Vue3 + Leaflet + Generator)
前端·javascript·vue.js
用户69371750013846 小时前
Claude Code终端日志Token占用实测:一个过滤器砍掉60%-90%
android·前端·后端