如何编辑Custom TrackShape？

Question

我正在为一个看起来像这样的项目设计一个自定义轨道形状：

我已经完成了大部分代码，最终得到了此结果：

除了圆形的侧面（我要修复的那些），我需要实现：

1. 下移动标签，
2. 如果可能的话，将标签在更改标签尺寸
3. 以自定义TrackHeight，以使其在一端较小，而另一端则较小。

Answer 1

简而言之：
将您的 slider （）包裹在a slidertheme （）中，并为其提供包含A 自定义轨道形状的适当 sliderThemedata （） >和自定义的拇指形状。

customTrackShape（）

class CustomTrackShape extends SliderTrackShape {

  const CustomTrackShape({
  });

  @override
  Rect getPreferredRect({
    required final RenderBox parentBox,
    required final SliderThemeData sliderTheme,
    final bool isDiscrete = true,
    final bool isEnabled = true,
    final Offset offset = Offset.zero,
  }) {
    final double overlayWidth =
        sliderTheme.overlayShape!.getPreferredSize(isEnabled, isDiscrete).width;
    final double trackHeight = sliderTheme.trackHeight ?? 20;
    final double trackLeft = offset.dx + overlayWidth / 2;
    final double trackTop =
        offset.dy + (parentBox.size.height - trackHeight) / 2;
    // Although this works for a material, perhaps the default
    // rectangular track should be padded not just by the overlay, but by the
    // max of the thumb and the overlay, in case there is no overlay.
    final double trackWidth = parentBox.size.width - overlayWidth;
    return Rect.fromLTWH(trackLeft, trackTop, trackWidth, trackHeight);
  }

  @override
  void paint(
    final PaintingContext context,
    final Offset offset, {
    required final RenderBox parentBox,
    required final SliderThemeData sliderTheme,
    required final Animation<double> enableAnimation,
    required final Offset thumbCenter,
    required final TextDirection textDirection,
    final Offset? secondaryOffset,
    final bool isEnabled = true,
    final bool isDiscrete = true,
  }) {
    final Rect trackRectangle = getPreferredRect(
      parentBox: parentBox,
      offset: offset,
      sliderTheme: sliderTheme,
      isEnabled: isEnabled,
      isDiscrete: isDiscrete,
    
    const verticalOffset = const Offset(0, 20);

    context.canvas.drawPath(
        Path()
          ..addPolygon(
            [
              trackRectangle.bottomLeft - verticalOffset,
              trackRectangle.bottomRight,
              trackRectangle.topRight,
              trackRectangle.topLeft + verticalOffset,
              trackRectangle.bottomLeft - verticalOffset,
            ],
            true,
          ),
        Paint()..color = sliderTheme.activeTrackColor);
  }
}

customThumbShape（）

class CustomThumbShape extends SliderComponentShape {
  CustomThumbShape({
    this.thumbRadius = 15,
  });
  final double thumbRadius;
  @override
  Size getPreferredSize(final bool isEnabled, final bool isDiscrete) =>
      Size.fromRadius(thumbWidth);

  @override
  void paint(
    final PaintingContext context,
    final Offset center, {
    required final Animation<double> activationAnimation,
    required final Animation<double> enableAnimation,
    required final RenderBox parentBox,
    required final Size sizeWithOverflow,
    required final SliderThemeData sliderTheme,
    required final TextDirection textDirection,
    required final TextPainter labelPainter,
    required final bool isDiscrete,
    required final double textScaleFactor,
    required final double value,
  }) {
    final Canvas canvas = context.canvas;
    final paint = Paint()
      ..color = sliderTheme.thumbColor;

    final TextSpan textSpan = TextSpan(
      text: value,
    );

    labelPainter
      ..text = textSpan
      ..textAlign = TextAlign.center
      ..textDirection = textDirection
      ..layout();

    final Offset textOffset = Offset(
      center.dx - (labelPainter.width / 2),
      center.dy + (sliderTheme.trackHeight! * 0.8),
    );

    final Offset p1 = Offset(
      center.dx,
      center.dy + sliderTheme.trackHeight! / 2,
    );
    final Offset p2 = Offset(
      center.dx,
      center.dy - sliderTheme.trackHeight! / 2,
    );

    canvas.drawCircle(center, thumbWidth, paint);
    if (isTouched) {
      labelPainter.paint(
        canvas,
        textOffset,
      );
    }
  }
}

您还应考虑在 slideThemedata （）中设置滑块颜色和其他主题属性。