时间戳

首页 > 解决方案 > Flutter - 自定义滑块值指示器。如何获取滑块的中心位置

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

问题描述

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

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实际上是滑块上拇指相对于父卡的位置。

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

谢谢您的帮助

标签： fluttersliderflutter-layoutflutter-slider

解决方案

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

    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));

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

推荐阅读