扑。行中的元素相互重叠[关闭]答案

【问题标题】：Flutter. Elements in the row overlaps each other [closed]扑。行中的元素相互重叠[关闭]
【发布时间】：2021-05-05 10:40:40
【问题描述】：

我需要在 Slider 上设置“非活动”区域。所以我用 Row、Expanded 和 Container 小部件做到了，但仍然存在一个问题......行中的元素相互重叠如何强制我的 Slider 重叠容器？

Code(Slider in the middle section)

Slider

【问题讨论】：

添加你已经尝试过的代码。
@pskink 我只是不明白如何返回包含 3 个部分的 Rectangle
SliderTrackShape 类具有 paint 方法 - 只需创建一个扩展 SliderTrackShape（或 RectangularSliderTrackShape 例如）的类并覆盖其 paint 方法

标签： flutter flutter-layout

【解决方案1】：

所以，我按照@pskink 所说的做了，就是这样 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);
  }
}

【讨论】：