Flutter - 自定义滑块值指示器。如何获取滑块的中心位置答案

【问题标题】：Flutter - Custom slider value indicator. How to get the slider's center positionFlutter - 自定义滑块值指示器。如何获取滑块的中心位置
【发布时间】：2020-08-26 07:46:02
【问题描述】：

我正在尝试为颤振滑块实现自定义进度指示器。至于现在，我有绘制指标的给定代码。

class InsideSliderValueIndicator extends SliderComponentShape {
  @override
  Size getPreferredSize(bool isEnabled, bool isDiscrete) {
    return Size.zero;
  }

  @override
  void paint(
    PaintingContext context,
    Offset center, {
    Animation<double> activationAnimation,
    Animation<double> enableAnimation,
    bool isDiscrete,
    TextPainter labelPainter,
    RenderBox parentBox,
    SliderThemeData sliderTheme,
    TextDirection textDirection,
    double value,
  }) {
    final sliderWidth = parentBox.size.width;
    final sliderBoxOffset = parentBox.localToGlobal(Offset.zero);
    labelPainter.paint(
        context.canvas,
        Offset(sliderBoxOffset.dx  + sliderWidth / 2 - labelPainter.width / 2,
            center.dy - labelPainter.height / 2));
  }
}

我还自定义了滑块以移除拇指。这是它的样子：

如您所见，文本不在滑块中居中。

这段代码的问题在于sliderBoxOffset 没有返回“滑块”的框，而是返回父卡的框，而center 实际上是您的拇指在滑块上相对于父卡的位置。

所以我的问题是：如何从给定的参数中获取滑块的中心？

感谢您的帮助

【问题讨论】：

标签： flutter slider flutter-layout flutter-slider

【解决方案1】：

我找到了一个适用于我的用例的奇怪解决方案

    final sliderWidth = parentBox.size.width;
    final halfSliderWidth = sliderWidth / 2;
    final translateX = value < 0.5 ? halfSliderWidth - (value * sliderWidth) : halfSliderWidth - (value * sliderWidth);
    labelPainter.paint(context.canvas, center.translate(translateX - labelPainter.width / 2, -labelPainter.height / 2));

但是我很确定如果滑块不在其父级居中，这将不起作用。我仍然想知道是否有一种不那么脏的方法来做到这一点。

【讨论】：