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();
    }
  }
相关推荐
jktantan4 小时前
Vue keep-alive 切标签后滚动位置回顶?因为 onDeactivated 里读到的 scrollTop 是 0
前端·javascript·vue.js
总要学点什么5 小时前
第89篇:三维特效-螺旋圆效果——让螺旋臂卷起一圈圈外扩的涟漪
开发语言·javascript·ecmascript·webgl·cesium·空间分析·1024程序员节
前端精髓6 小时前
调用openrouter的免费API模型
java·前端·javascript
三少爷的鞋9 小时前
Java 线程自上而下,Kotlin 协程自下而上
android
好的佩奇10 小时前
Dart 之增强枚举
android·flutter·dart
梦影_11 小时前
MySQL进阶教程(五)—— SQL调优(下)
android·大数据·数据库·后端·sql·mysql·database
螺丝钉tina12 小时前
[Playwright] [02]常用命令与调试:Debug UI、Mode和 Trace Viewer
开发语言·javascript·测试工具·ui·自动化
好的佩奇13 小时前
蓝牙之无线电与通信距离
android·flutter·蓝牙
开开心心就好13 小时前
竖式除法出题工具,整除余数混合模式
运维·服务器·前端·javascript·ocr·perl·1024程序员节
এ慕ོ冬℘゜13 小时前
JS 事件循环、宏任务微任务:单线程底层原理 + 执行顺序
开发语言·javascript·ecmascript