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蜂7 分钟前
Flutter Hello World!实践
flutter
数据知道9 分钟前
网站到底是如何通过JS读取你的浏览器指纹的?
开发语言·javascript·ecmascript·指纹浏览器
用户9385156350712 分钟前
从JS的“坑”到TS的“墙”,再到Bun与AI:打造健壮的全栈应用
前端·javascript
橘子星15 分钟前
浅谈 TypeScript 与 Bun:现代 JavaScript 开发的利器
前端·javascript
铁皮饭盒19 分钟前
Bun 的三种并发"暗器":reusePort、Worker、spawn,能硬刚 Java 吗?
前端·javascript·后端
像风一样自由202032 分钟前
量化压缩实战:INT8 / INT4 / AWQ / GPTQ 全面对比
android·人工智能·语言模型·大模型
ldmd28437 分钟前
Typescript 入门篇-3
javascript·typescript·notepad++
Cobyte39 分钟前
18.【SolidJS】 采用 template 内容模板元素创建 DOM 元素
前端·javascript·vue.js
brycegao3211 小时前
Android MVI进阶:纯原生实现Slot化可插拔架构
android·kotlin·架构设计·mvi·viewmodel
怕浪猫1 小时前
Electron 开发实战(十二):安全性最佳实践|彻底杜绝漏洞、代码执行与数据泄露
前端·javascript·electron