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();
    }
  }
相关推荐
三少爷的鞋2 小时前
别再靠 Code Review 守底线:我做了一个静态分析项目 RedLine
android
染指11103 小时前
103.RAG-LLamaIndex后端rag问答-聊天接口
前端·javascript·vue.js·人工智能
y = xⁿ10 小时前
DeepSeek Harness 学习日记:关于Agent接口,工具调用的底层实现
android·java·学习
单线程_0111 小时前
从案例分析 Vue3 Tokenizer+Parser 源码三
前端·javascript·vue.js
2601_9620664912 小时前
【Sql Server】Update中的From语句,以及常见更新操作方式
android·java·数据库
小磊哥er13 小时前
深入解构Claude Code - 第 8 篇 · 数据放哪、钱怎么算
javascript·ai编程
kyriewen14 小时前
我装了30多个Skill,给AI安排了8个岗位
前端·javascript·ai编程
默_笙16 小时前
🔥 让 AI 帮我写完整个 Next.js 博客:框架就是 AI 的"上下文 buff"
前端·javascript
用户693717500138418 小时前
曾经安卓开发人手一个的 EventBus,为什么现在没人爱用了?
android·android studio
喵本喵叁肆19 小时前
06-M6-部门过滤与综合研判-从问答机到研判助手
前端·javascript·jquery