Flutter非等分滑块数值位置精准调整技术问询

我有一个带非等分刻度的Flutter滑块，当前滑块显示数值为2.5，但它的位置看起来处于接近9的中间位置（大于4.5），如何调整数值位置使其与刻度范围精准匹配？

现有实现代码 #

Widget buildNutritionalInfoSlider(String category, double value) {
  int max = 0;
  List<int> limits = [0, 9, 18, 31, 45];

  if (category == "calories") {
    limits = [800, 560, 360, 160, 0];
    max = 800;
  } else if (category == "sodium") {
    limits = [900, 630, 360, 180, 0];
    max = 900;
  } else if (category == "fats") {
    limits = [10, 7, 4, 2, 0];
    max = 10;
  } else if (category == "sugars") {
    limits = [45, 31, 18, 9, 0];
    max = 45;
  } else if (category == "protein" || category == "fibers") {
    limits = [18, 9, 0]; // Updated limits for protein and fibers
    max = 18;
  }

  // Implement your slider widget here
  return SliderTheme(
    data: SliderThemeData(
      trackHeight: 0.0,
      thumbShape: TriangleShape(),
      trackShape: GradientRectSliderTrackShape(
        limits: limits,
        isProteinOrFiber: category == "protein" || category == "fibers",
      ),
    ),
    child: Slider(
      value: value,
      max: max.toDouble(),
      onChanged: null,
    ),
  );
}

尝试的自定义计算函数 #

double calculateInitialSliderPosition(double value, List<int> limits, int max) {
  // Find the index of the closest limit to the initial value
  int closestIndex = 0;
  double minDistance = (limits[0] - value).abs();

  for (int i = 1; i < limits.length; i++) {
    double distance = (limits[i] - value).abs();
    if (distance < minDistance) {
      minDistance = distance;
      closestIndex = i;
    }
  }

  // Calculate the position based on the closest limit index
double position = (max - limits[closestIndex]) / max;
return 1.0 - position;
}

滑块轨道实现代码 #

class GradientRectSliderTrackShape extends SliderTrackShape with BaseSliderTrackShape {
  const GradientRectSliderTrackShape({
    required this.limits,
    required this.isProteinOrFiber,
  });

  final List<int> limits;
  final bool isProteinOrFiber;

  @override
  void paint(
    PaintingContext context,
    Offset offset, {
    required RenderBox parentBox,
    required SliderThemeData sliderTheme,
    required Animation<double> enableAnimation,
    required TextDirection textDirection,
    required Offset thumbCenter,
    Offset? secondaryOffset,
    bool isDiscrete = false,
    bool isEnabled = false,
    double additionalActiveTrackHeight = 2,
  }) {
    final canvas = context.canvas;
    final rect = Rect.fromPoints(
      Offset(offset.dx, offset.dy),
      Offset(parentBox.size.width, offset.dy + 15),
    );

    final itemSize = rect.width / (isProteinOrFiber ? 2 : 4);
    final dividerWidth = 1.0; // Adjust as needed
    final cornerRadius = 8.0; // Adjust as needed

    for (var i = 0; i < (isProteinOrFiber ? 2 : 4); i++) {
      final paint = Paint()
        ..color = getColorForIndex(i, isProteinOrFiber);

      final left = rect.left + (itemSize * i);
      final right = rect.left + (itemSize * (i + 1));

      RRect rRect;

      if (i == 0 && (isProteinOrFiber || !isProteinOrFiber)) {
        // First color (red for non-protein/fiber, or green for protein/fiber) with rounded left corners
        rRect = RRect.fromRectAndCorners(
          Rect.fromPoints(Offset(left, rect.top + 20), Offset(right, rect.bottom + 15)),
          topLeft: Radius.circular(cornerRadius),
          bottomLeft: Radius.circular(cornerRadius),
        );
      } else if (i == (isProteinOrFiber ? 1 : 3)) {
        // Last color (green for non-protein/fiber) with rounded right corners
        rRect = RRect.fromRectAndCorners(
          Rect.fromPoints(Offset(left, rect.top + 20), Offset(right, rect.bottom + 15)),
          topRight: Radius.circular(cornerRadius),
          bottomRight: Radius.circular(cornerRadius),
        );
      } else {
        // Colors in between with straight corners
        rRect = RRect.fromRectAndRadius(
          Rect.fromPoints(Offset(left, rect.top + 20), Offset(right, rect.bottom + 15)),
          Radius.zero,
        );
      }

      canvas.drawRRect(rRect, paint);

      // Draw dividers
      if (i < (isProteinOrFiber ? 1 : 3)) {
        final dividerPaint = Paint()
          ..color = Colors.grey; // Divider color

        final dividerRect = Rect.fromPoints(
          Offset(right, rect.top + 20),
          Offset(right + dividerWidth, rect.bottom + 15),
        );

        canvas.drawRect(dividerRect, dividerPaint);
      }
    }

    List<int> division = limits;

    for (var i = 0; i < division.length; i++) {
      final textPainter = TextPainter(
        text: TextSpan(
          text: division[i].toString(),
          style: const TextStyle(color: Colors.black, fontSize: 12),
        ),
        textDirection: TextDirection.ltr,
      );

      textPainter.layout();
      double extraGap = i > 3 ? 10 : 5;
      textPainter.paint(
        canvas,
        Offset(
          rect.left + (itemSize * i) - extraGap,
          rect.top + 35,
        ),
      );
    }
  }

  Color getColorForIndex(int index, bool isProteinOrFiber) {
    if (isProteinOrFiber) {
      return index % 2 == 0 ? Colors.green : Colors.lightGreen;
    } else {
      switch (index) {
        case 0:
          return Colors.red;
        case 1:
          return Colors.orange;
        case 2:
          return Colors.lightGreen;
        case 3:
          return Colors.green;
        default:
          return Colors.green; // Default color
      }
    }
  }
}

解决方案 #

问题核心在于：当前滑块的value是基于数值范围的线性映射，但自定义轨道的刻度是等宽分段的（每个颜色块宽度相同），两者的映射逻辑不匹配。

调整逻辑步骤 #

1. 数值到滑块位置的映射：根据limits的分段，计算数值对应的滑块相对位置（0-1之间），而非直接用数值除以max。
2. 反向映射（若需交互）：如果后续支持滑块拖动，需实现位置到数值的转换，逻辑与正向映射相反。

修正后的位置计算函数 #

替换原calculateInitialSliderPosition，该函数先定位数值所在区间，再计算区间内的相对位置：

double calculateSliderPosition(double value, List<int> limits) {
  // 遍历找到数值所在的区间（limits为降序排列）
  for (int i = 0; i < limits.length - 1; i++) {
    if (value <= limits[i] && value >= limits[i + 1]) {
      // 每个区间占总宽度的比例
      double segmentRatio = 1.0 / (limits.length - 1);
      // 数值在当前区间内的相对占比
      double innerRatio = (limits[i] - value) / (limits[i] - limits[i + 1]);
      // 总位置 = 区间起始位置 + 区间内相对位置 * 区间宽度比例
      return i * segmentRatio + innerRatio * segmentRatio;
    }
  }
  // 处理超出范围的情况，返回对应端点
  if (value >= limits.first) return 0.0;
  if (value <= limits.last) return 1.0;
  return 0.0;
}

应用到滑块 #

在buildNutritionalInfoSlider中，使用该函数计算滑块的相对位置，并将滑块max设为1.0：

Widget buildNutritionalInfoSlider(String category, double value) {
  List<int> limits = [0, 9, 18, 31, 45];

  if (category == "calories") {
    limits = [800, 560, 360, 160, 0];
  } else if (category == "sodium") {
    limits = [900, 630, 360, 180, 0];
  } else if (category == "fats") {
    limits = [10, 7, 4, 2, 0];
  } else if (category == "sugars") {
    limits = [45, 31, 18, 9, 0];
  } else if (category == "protein" || category == "fibers") {
    limits = [18, 9, 0]; // Updated limits for protein and fibers
  }

  // 计算滑块的相对位置（0-1）
  double sliderPosition = calculateSliderPosition(value, limits);

  return SliderTheme(
    data: SliderThemeData(
      trackHeight: 0.0,
      thumbShape: TriangleShape(),
      trackShape: GradientRectSliderTrackShape(
        limits: limits,
        isProteinOrFiber: category == "protein" || category == "fibers",
      ),
    ),
    child: Slider(
      value: sliderPosition,
      max: 1.0, // 滑块范围改为0-1，对应轨道的相对位置
      onChanged: null,
    ),
  );
}

关键说明 #

• 自定义轨道是等宽分段的，每个颜色块占总宽度的1/(limits.length-1)，因此滑块位置必须基于该分段逻辑计算，而非数值的线性比例。
• 若需支持滑块拖动，需实现反向转换函数：根据滑块相对位置（0-1）计算对应数值，逻辑与calculateSliderPosition相反。

内容的提问来源于stack exchange，提问作者Tevel