Flutter 项目滑动轨道的高阶用法

[》跳过拾光记忆]

拾光记忆

1. Flutter 项目资产管理，看这一篇就够了！

简介: 针对 Flutter 项目资产管理的脚本服务。Fam 具有以下特点: 支持多种平台以及各平台无差异化、界面美观、功能齐全、快捷方便。 推荐: ⭐️⭐️⭐️⭐️⭐️

2. Flutter 手势在多指触摸时一些方法会多次触发

简介: 针对 Flutter 多手指检测以及手势触发其他手势也触发的问题。 推荐: ⭐️⭐️⭐️⭐️⭐️

3. Dart 的枚举类型的高阶用法

简介: 这是让开发者更深入的了解 Dart 的枚举以及相关使用和方法。 推荐: ⭐️⭐️⭐️

4. Flutter 可以快速实现单项或者多项选择，你知道吗？

简介: 这是让开发者更加便捷的实现单选、多选功能，无需你对数据处理。 推荐: ⭐️⭐️⭐️⭐️⭐️

5. Flutter 的吸收指针和忽略指针的作用以及区别

简介: 这是让开发者更深入的了解 Flutter 的两种指针的介绍以及相关使用和方法。 推荐: ⭐️⭐️⭐️

[返回拾光记忆《]

一、简述

Flutter 系统提供的滑动轨道小部件Slider可定制化非常的麻烦，必须需要配合SliderTheme进行一个样式的调整，有时还需要重写一些SliderTheme中的小部件来达到自己想要的样式。由于Flutter开发项目的多种多样，官方提供的滑动轨道小件就有些不足了。比如：要实现滑动轨道的活跃轨道渐变色就不能实现。所以为了满足更多的需求，再次推荐一个可高度自定义的滑动轨道小部件 IDKitSlider 。

二、IDKitSlider 介绍

IDKitSlider 是 IDKit 库的一个小部件。IDKitSlider 是一个可高度自定义的滑动轨道小部件，它可设置轨道的初始值、轨道缩进、轨道颜色、轨道高度；滑块的大小、滑块的颜色；轨道的最大值、最小值；悬浮标的宽度、颜色、缩进以及活跃轨道的颜色的渐变和多种渐变模式设置；可以支持单向、双向、范围模式的滑动轨道。IDKitSlider 是有 CustomSingleSlider、bilateeralSlider、CustomRangeSlider 三个小部件组成，你可根据需求选择使用。

三、IDKitSlider 方法和参数介绍

1. 方法介绍

• IDKitSlider.slider(xx) 该方法是实现和官方提供的滑动轨道组件基本相似的小部件，但是它参数多，可定制化高。

• IDKitSlider.bilateralSlider(xx) 该方法是实现可双向滑动的轨道小部件，它参数多，可定制化高。（双向: 是从中间可向左或者向右滑动）

• IDKitSlider.rangeSlider(xx) 该方法是实现范围滑动的轨道小部件，它参数多，可定制化高。（范围: 是从两边向中间滑动）

2. 参数介绍

• initValue 轨道的初始值，

• maxValue 轨道的最大可滑动值。

• minValue 轨道的最小可滑动值。

• thumbSize 拇指块的大小。

• thumbColor 拇指块的颜色。

• thumbAnimationDuration 拇指块的动画时间。

• trackIndent 轨道的缩进。

• trackHeight 轨道的高度。

• trackColor 轨道的颜色。

• trackActiveColor 活跃轨道的颜色。

• trackActiveGradientColors 活跃轨道的渐变色集合。

• trackActiveGradientStops 活跃轨道的渐变色集合所占比集合。

• trackActiveGradientBegin 活跃轨道的渐变色开始位置。

• trackActiveGradientEnd 活跃轨道的渐变色结束位置。

• trackActiveGradientTileMode 活跃轨道的渐变色模式。

• floatingMark 是否开启画笔操作时的悬浮标功能。

• floatingMarkWidth 悬浮标的宽度。

• floatingMarkIndent 悬浮标的缩进。

• floatingMarkColor 悬浮标的颜色。

• sliderValueMethod 滑动轨道的滑动值的回调函数。

• initLeftValue 范围滑动轨道的左边初始值。

• initRightValue 范围滑动轨道的右边初始值。

四、IDKitSlider 的使用

• 基础使用 IDKitSlider.slider

  IDKitSlider.slider()
  

  显示效果如下:

• 我们修改轨道的高度、缩进、以及颜色，如下代码:

  IDKitSlider.slider(
    trackColor: Colors.red,
    trackActiveColor: Colors.purple,,
    trackHeight: 6,
    trackIndent: 6,
  ),
  

  显示效果如下:

• 我们修改轨道的拇指块的颜色和大小，如下代码:

  IDKitSlider.slider(
    trackIndent: 5,
    thumbColor: Colors.red,
    thumbSize: 10,
  ),
  

  显示效果如下:

• 我们实现活跃轨道渐变色，代码如下:

  IDKitSlider.slider(
    trackHeight: 6,
    thumbSize: 10,
    trackIndent: 5,
    trackActiveGradientColors: [Colors.red, Colors.purple, Colors.black],
  )
  

  显示效果如下:

• 我们修改活动轨道的渐变起始和结束位置以及渐变的模式和渐变颜色占比，代码如下:

  IDKitSlider.slider(
    trackHeight: 6,
    thumbSize: 10,
    trackIndent: 5,
    trackActiveGradientBegin: Alignment.topCenter,
    trackActiveGradientEnd: Alignment.bottomCenter,
    trackActiveGradientColors: [Colors.red, Colors.green, Colors.black],
    trackActiveGradientStops: [0.1, 0.5, 0.8],
    trackActiveGradientTileMode: TileMode.mirror,
  ),
  

  显示效果如下:

• 我们修改悬浮标的颜色、宽度、缩进，代码如下:

  IDKitSlider.slider(
    floatingMark: true,
    floatingMarkColor: Colors.red,
    floatingMarkIndent: 3,
    floatingMarkWidth: 5,
  )
  

  显示效果如下:

• 我们修改滑动轨道的最小值和最大值，代码如下:

  IDKitSlider.slider(
    minValue: 0.2,
    maxValue: 0.8,
    initValue: 0.5,
    sliderValueMethod: (double value) {
      debugPrint('当前滑动值:$value');
    },
  ),
  

  显示效果如下:

• 我们使用双向滑动轨道，代码如下:

  IDKitSlider.bilateralSlider()
  

  显示效果如下:

  

  注意： IDKitSlider.bilateralSlider 也可以高度自定义化，颜色，大小，高度、渐变等。

• 我们使用范围滑动轨道，如下:

  IDKitSlider.rangeSlider(
    initLeftValue: 0.2,
    initRightValue: 0.8,
  ),
  

  显示效果如下:

  注意： IDKitSlider.rangeSlider 也可以高度自定义化，颜色，大小，高度、渐变等。

五、 综述

经过我们对 IDKitSlider 的了解，我们就能够轻松解决项目中一些滑动轨道各式各样的视图问题，让我们开发更加简单，这也是 IDKit 库的服务宗旨。如果您感觉可以，请留下你的爱心(❤️)。