在 Flutter 中扩展和舍入活动和非活动滑块轨道

Question

如何扩展 Slider 类的 Inactive 和 Active 轨迹，使其始终“拥抱”拇指？

这些图片说明了我的意图： 拇指周围的活动轨迹 非活动轨道延长

我的方法是创建一个

CustomTrackShape

并将其放入

trackShape:

的

sliderTheme

属性中。 我尝试过 chatGPT 提供的无数示例，但都失败了。像这样：

class CustomTrackShape extends SliderTrackShape {
  @override
  Rect getPreferredRect({
    required RenderBox parentBox,
    Offset offset = Offset.zero,
    required SliderThemeData sliderTheme,
    bool isEnabled = false,
    bool isDiscrete = false,
  }) {
    final double? trackHeight = sliderTheme.trackHeight;
    final double trackLeft = offset.dx;
    final double trackTop = offset.dy + (parentBox.size.height - trackHeight!) / 2;
    final double trackWidth = parentBox.size.width;
    return Rect.fromLTWH(trackLeft, trackTop, trackWidth, trackHeight);
  }

  @override
  void paint(
      PaintingContext context,
      Offset offset, {
        required RenderBox parentBox,
        required SliderThemeData sliderTheme,
        Animation<double>? enableAnimation = const AlwaysStoppedAnimation(1.0),
        required TextDirection textDirection,
        bool isDiscrete = false,
        bool isEnabled = false,
      }) {
    final Rect trackRect = getPreferredRect(parentBox: parentBox, offset: offset, sliderTheme: sliderTheme);

    final ColorTween activeTrackColorTween = ColorTween(begin: sliderTheme.disabledActiveTrackColor, end: sliderTheme.activeTrackColor);
    final ColorTween inactiveTrackColorTween = ColorTween(begin: sliderTheme.disabledInactiveTrackColor, end: sliderTheme.inactiveTrackColor);

    final Paint activePaint = Paint()..color = activeTrackColorTween.evaluate(enableAnimation!)!;
    final Paint inactivePaint = Paint()..color = inactiveTrackColorTween.evaluate(enableAnimation)!;

    // Calculate the corner radius as half of the track height
    final double radius = trackRect.height / 2;

    // Draw the active track
    context.canvas.drawRRect(
      RRect.fromRectAndRadius(
        Rect.fromPoints(
          Offset(trackRect.left, trackRect.center.dy - trackRect.height / 4),
          Offset(trackRect.right, trackRect.center.dy + trackRect.height / 4),
        ),
        Radius.circular(radius),
      ),
      activePaint,
    );

    // Draw the inactive track
    context.canvas.drawRRect(
      RRect.fromRectAndRadius(
        Rect.fromPoints(
          Offset(trackRect.left, trackRect.center.dy - trackRect.height / 4),
          Offset(trackRect.right, trackRect.center.dy + trackRect.height / 4),
        ),
        Radius.circular(radius),
      ),
      inactivePaint,
    );
  }
}

错误信息是这样的：

lib/main.dart:75:8: Error: The method 'CustomTrackShape.paint' has fewer named arguments than those of overridden method 'SliderTrackShape.paint'.
  void paint(
       ^
../../flutter/packages/flutter/lib/src/material/slider_theme.dart:1090:8: Context: This is the overridden method ('paint').
  void paint(
       ^
lib/main.dart:75:8: Error: The method 'CustomTrackShape.paint' doesn't have the named parameter 'secondaryOffset' of overridden method 'SliderTrackShape.paint'.
  void paint(
       ^
../../flutter/packages/flutter/lib/src/material/slider_theme.dart:1090:8: Context: This is the overridden method ('paint').
  void paint(
       ^

我希望它首先能够编译，然后自定义实际的形状。

Answer 1

就像错误消息所示，您错过了命名参数“secondaryOffset”。

paint

中的代码应如下所示：

  @override
  void paint(
      PaintingContext context,
      Offset offset, {
        required RenderBox parentBox,
        required SliderThemeData sliderTheme,
        required Animation<double> enableAnimation,
        required Offset thumbCenter,
        Offset? secondaryOffset,
        bool isEnabled = false,
        bool isDiscrete = false,
        required TextDirection textDirection,
        double additionalActiveTrackHeight = 2,
      }) {

    final Rect trackRect = getPreferredRect(parentBox: parentBox, offset: offset, sliderTheme: sliderTheme);

    final ColorTween activeTrackColorTween = ColorTween(begin: sliderTheme.disabledActiveTrackColor, end: sliderTheme.activeTrackColor);
    final ColorTween inactiveTrackColorTween = ColorTween(begin: sliderTheme.disabledInactiveTrackColor, end: sliderTheme.inactiveTrackColor);

    final Paint activePaint = Paint()..color = activeTrackColorTween.evaluate(enableAnimation!)!;
    final Paint inactivePaint = Paint()..color = inactiveTrackColorTween.evaluate(enableAnimation)!;

    // Calculate the corner radius as half of the track height
    final double radius = trackRect.height / 2;

    // Draw the active track
    context.canvas.drawRRect(
      RRect.fromRectAndRadius(
        Rect.fromPoints(
          Offset(trackRect.left, trackRect.center.dy - trackRect.height / 4),
          Offset(trackRect.right, trackRect.center.dy + trackRect.height / 4),
        ),
        Radius.circular(radius),
      ),
      activePaint,
    );

    // Draw the inactive track
    context.canvas.drawRRect(
      RRect.fromRectAndRadius(
        Rect.fromPoints(
          Offset(trackRect.left, trackRect.center.dy - trackRect.height / 4),
          Offset(trackRect.right, trackRect.center.dy + trackRect.height / 4),
        ),
        Radius.circular(radius),
      ),
      inactivePaint,
    );
  }