扑.该行中的元素相互重叠 [英] Flutter. Elements in the row overlaps each other

问题描述

我需要将无效"设置为滑块上的区域.因此，我使用Row，Expanded和Container窗口小部件完成了此操作，但仍然存在一个问题...行中的元素相互重叠如何强制我的Slider重叠容器?

I need to set "Inactive" zones on Slider. So i did it with Row, Expanded and Container widgets, but there is still one issue... Elements in the row overlaps each other How can i force my Slider to overlap containers?

代码(中间部分的滑块)

滑块

推荐答案

所以，我按照@pskink的话做了，那就是结果

So, i did as @pskink said and that's the result

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

  @override
  void paint(PaintingContext context, Offset offset,
      {RenderBox parentBox,
      SliderThemeData sliderTheme,
      Animation<double> enableAnimation,
      Offset thumbCenter,
      bool isEnabled,
      bool isDiscrete,
      TextDirection textDirection}) {
    final Canvas canvas = context.canvas;
    final Rect mainrect = getPreferredRect(
        parentBox: parentBox,
        sliderTheme: sliderTheme,
        offset: offset,
        isEnabled: isEnabled,
        isDiscrete: isDiscrete);
    final double inactiveDistance = parentBox.size.width * (1 / 6);
    final Rect leftRect = Rect.fromLTRB(mainrect.left - inactiveDistance,
        mainrect.top, mainrect.left, mainrect.bottom);
    final Rect rightRect = Rect.fromLTRB(mainrect.right, mainrect.top,
        mainrect.right + inactiveDistance, mainrect.bottom);
    final Rect activeRect = Rect.fromLTRB(
        mainrect.left, mainrect.top, thumbCenter.dx, mainrect.bottom);
    final Rect inactiveRect = Rect.fromLTRB(
        thumbCenter.dx, mainrect.top, mainrect.right, mainrect.bottom);
    final Paint rightRectPainter = Paint()..color = Color(0xFF9B9B9B);
    final Paint activeRectPainter = Paint()
      ..color = sliderTheme.activeTrackColor;
    final Paint inactiveRectPainter = Paint()
      ..color = sliderTheme.inactiveTrackColor;
    final Paint leftRectPainter = Paint()..color = Color(0xFF5E9B44);
    canvas.drawRect(
      leftRect,
      leftRectPainter,
    );
    canvas.drawRect(
      rightRect,
      rightRectPainter,
    );
    canvas.drawRect(activeRect, activeRectPainter);
    canvas.drawRect(inactiveRect, inactiveRectPainter);
  }
}

这篇关于扑.该行中的元素相互重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！