时间戳

首页 > 解决方案 > 扑。行中的元素相互重叠

flutter - 扑。行中的元素相互重叠

问题描述

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

代码（中间部分的滑块）

滑块

标签： flutterflutter-layout

解决方案

所以，我按照@pskink 说的做了， 结果就是这样

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

推荐阅读