Flutter 里的 Slider 组件类似 Android 里的 SeekBar 组件，中间有一个滑块，可以滑动选择进度。最近在使用 Slider 组件时确碰到一个问题，具体如下图所示：
Slider带有刻度
图中可以看到，组件上面有一个个等分的点，刚开始还以为是什么属性配置错误了，后来通过研究官方文档以及源码发现，这叫tickMark，俗称刻度。但是我只想要一个单纯的滑动条，并不想要在上面显示刻度，找了一圈发现 Slider 并没有属性可以控制这个。
后来经过一番查找，发现可以通过 SliderTheme 来改变 Slider 组件的一些默认属性，里面恰好有 activeTickMarkColor、inactiveTickMarkColor、tickMarkShape是与tickMark相关的。于是想到 将 tickMarkColor 配置成透明色不就不显示刻度了么，试验了一下如下代码：
SliderTheme(
data: SliderTheme.of(context).copyWith(
activeTickMarkColor: Colors.transparent,
inactiveTickMarkColor: Colors.transparent
),
child: Slider(
min: 1, max: 100, value: _value, divisions: 10,
activeColor: Colors.red,
inactiveColor: Colors.grey,
onChanged: (value) {
setState(() {
_value = value;
});
}));
结果很遗憾，一点效果都没有(有知道原因的可以共享下)，无论设置成啥颜色都不起作用。
于是，目光只能投向tickMarkShape，看描述是来绘制tickMark形状的，其类型为SliderTickMarkShape，默认的实现有RoundSliderTickMarkShape，看其源码其核心就有一个paint 方法，里面就是用来绘制tickMark的：
@override
void paint(
PaintingContext context,
Offset center, {
required RenderBox parentBox,
required SliderThemeData sliderTheme,
required Animation<double> enableAnimation,
required TextDirection textDirection,
required Offset thumbCenter,
required bool isEnabled,
}) {
assert(context != null);
assert(center != null);
assert(parentBox != null);
assert(sliderTheme != null);
assert(sliderTheme.disabledActiveTickMarkColor != null);
assert(sliderTheme.disabledInactiveTickMarkColor != null);
assert(sliderTheme.activeTickMarkColor != null);
assert(sliderTheme.inactiveTickMarkColor != null);
assert(enableAnimation != null);
assert(textDirection != null);
assert(thumbCenter != null);
assert(isEnabled != null);
// The paint color of the tick mark depends on its position relative
// to the thumb and the text direction.
Color? begin;
Color? end;
switch (textDirection) {
case TextDirection.ltr:
final bool isTickMarkRightOfThumb = center.dx > thumbCenter.dx;
begin = isTickMarkRightOfThumb ? sliderTheme.disabledInactiveTickMarkColor : sliderTheme.disabledActiveTickMarkColor;
end = isTickMarkRightOfThumb ? sliderTheme.inactiveTickMarkColor : sliderTheme.activeTickMarkColor;
break;
case TextDirection.rtl:
final bool isTickMarkLeftOfThumb = center.dx < thumbCenter.dx;
begin = isTickMarkLeftOfThumb ? sliderTheme.disabledInactiveTickMarkColor : sliderTheme.disabledActiveTickMarkColor;
end = isTickMarkLeftOfThumb ? sliderTheme.inactiveTickMarkColor : sliderTheme.activeTickMarkColor;
break;
}
final Paint paint = Paint()..color = ColorTween(begin: begin, end: end).evaluate(enableAnimation)!;
// The tick marks are tiny circles that are the same height as the track.
final double tickMarkRadius = getPreferredSize(
isEnabled: isEnabled,
sliderTheme: sliderTheme,
).width / 2;
if (tickMarkRadius > 0) {
context.canvas.drawCircle(center, tickMarkRadius, paint);
}
}
上面可以看到只有当 tickMarkRadius > 0 时，才会绘制一个圆圈，为了不让显示tickMark我们只需将tickMarkRadius设置成 <=0 就可以了，最终设置如下：
SliderTheme(
data: SliderTheme.of(context).copyWith(
//这里 tickMarkRadius 设置成 0 即可
tickMarkShape: const RoundSliderTickMarkShape(tickMarkRadius: 0)
),
child: Slider(
min: 1, max: 100, value: _value, divisions: 10,
activeColor: Colors.red,
inactiveColor: Colors.grey,
onChanged: (value) {
setState(() {
_value = value;
});
}));
最终效果如下：
tick2.png
除此外，我们还可以自定义一个类来继承SliderTickMarkShape，在paint方法里什么都不做，同样可以达到一样的效果，代码如下：
class TransparentSliderTickMarkShape extends SliderTickMarkShape {
@override
Size getPreferredSize({required SliderThemeData sliderTheme, required bool isEnabled}) {
return const Size(0, 0);
}
@override
void paint(PaintingContext context, Offset center, {required RenderBox parentBox, required SliderThemeData sliderTheme, required Animation<double> enableAnimation, required Offset thumbCenter, required bool isEnabled, required TextDirection textDirection}) {
}
}
SliderTheme(
data: SliderTheme.of(context).copyWith(
activeTickMarkColor: Colors.transparent,
inactiveTickMarkColor: Colors.transparent,
tickMarkShape: TransparentSliderTickMarkShape()
),
child: Slider(
min: 1, max: 100, value: _value, divisions: 10,
activeColor: Colors.red,
inactiveColor: Colors.grey,
onChanged: (value) {
setState(() {
_value = value;
});
}))
