如何在flutter滑块小部件中设置自定义tickMarkShape

Question

我正在尝试在我的 flutter 项目中制作自定义的 tickMarkShape。从文档中，我了解到可以使用 SliderTickMarkShape 控制刻度线形状。但它只给了我一个选项SliderTickMarkShape.noTickMark，可以删除刻度线形状，但我想把它做成一根棍子。那么如何在 flutter 中设置自定义刻度线形状呢？提前致谢。

Answer 1

为了自定义勾号如下图：

你需要延长SliderTickMarkShape. 在本例中，我调用了 LineSliderTickMarkShape。下面是源代码，但它基本上是RoundSliderTickMarkShape的副本，它只是更改context.canvas.drawLine线条来自定义标记的形状。RoundSliderTickMarkShape 是默认形状。

class LineSliderTickMarkShape extends SliderTickMarkShape {
  const LineSliderTickMarkShape({
    this.tickMarkRadius,
  });

  final double? tickMarkRadius;

  @override
  Size getPreferredSize({
    required SliderThemeData sliderTheme,
    required bool isEnabled,
  }) {
    assert(sliderTheme != null);
    assert(sliderTheme.trackHeight != null);
    assert(isEnabled != null);
    return Size.fromRadius(tickMarkRadius ?? sliderTheme.trackHeight! / 4);
  }

  @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,
      }) {
    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)!;

    final double tickMarkRadius = getPreferredSize(
      isEnabled: isEnabled,
      sliderTheme: sliderTheme,
    ).width / 2;
    if (tickMarkRadius > 0) {
      context.canvas.drawLine(Offset(center.dx - 5, center.dy - 5), Offset(center.dx + 5, center.dy + 5), paint);
    }
  }
}

定义后LineSliderTickMarkShape，您可以使用它来自定义滑块，如下所示：

  @override
  Widget build(BuildContext context) {
    return SliderTheme(
      data: SliderTheme.of(context).copyWith(
        trackHeight: 20,
          tickMarkShape: const LineSliderTickMarkShape()
      ),
      child: Slider(
      ...