Flutter. Elements in the row overlaps each other [closed]

别等时光非礼了梦想. 提交于 2021-02-11 12:40:22

问题


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?

Code(Slider in the middle section)

Slider


回答1:


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


来源:https://stackoverflow.com/questions/65989575/flutter-elements-in-the-row-overlaps-each-other

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!