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();
    }
  }
相关推荐
FungLeo7 小时前
Flutter fl_chart 0.70 破坏性 API 迁移实录:duration/getTooltipColor/withValues 全解
flutter·fl_chart
一笑的小酒馆7 小时前
Android中WebRTC通信
android
avi91118 小时前
[AI教做人]AI平台做2项目;一个3D模型展示,另一个框架多人
javascript·人工智能·ai·3d模型·3d引擎·顶点和法线
kyriewen8 小时前
我用Claude Code两天干完了团队两周的排期——周报发出去那一刻我就后悔了
前端·javascript·ai编程
用户938515635079 小时前
手写一个 LLM Harness 框架:用工程化手段把大模型幻觉踩在脚下
javascript·人工智能·后端
油丶酸萝卜别吃9 小时前
jquery-ajax.js 说明文档
前端·javascript·jquery
windliang10 小时前
Claude Code 源码分析(九):子 Agent 如何分叉、继续与回到父会话
前端·javascript·面试
KevinWang_10 小时前
Android Hilt 依赖注入
android
柒和远方10 小时前
V063: TS 面试必考:interface 与 type 的四大差异,与 LLM Harness 的自动化择优
前端·javascript
古法安卓10 小时前
Android-深入理解 Android 回调(Callback)机制
android·性能优化·android studio