带圆角的颤振滑块

时间:2020-10-20 08:48:58

标签: flutter dart flutter-layout

slider image 我该怎么做,像图片上的滑块一样,我尝试使用滑块主题来完成它,但是它并不能完全按照我想要的方式工作,我从此处重写代码:How can I round the corners of a slider in Flutter,但是它可能并不完美你知道如何更好地解决它 我的代码:

return SliderTheme(
      data: SliderTheme.of(context).copyWith(
        activeTrackColor: Colors.white,
        inactiveTrackColor: Colors.grey,
        trackHeight: 40,
        thumbColor: Colors.transparent,
        disabledThumbColor: Colors.transparent,
        overlayColor: Colors.transparent,
        activeTickMarkColor: Colors.transparent,
        showValueIndicator: ShowValueIndicator.never,
        thumbShape: RoundSliderThumbShape(enabledThumbRadius: 0),
        tickMarkShape: RoundSliderTickMarkShape(tickMarkRadius: 10),
        trackShape: RoundSliderTrackShape(
          roundRight,
          roundLeft,
          radius: 10,
        ),
      ),
      child: Slider(
        max: max,
        min: min,
        value: widget.value,
        onChanged: (changedValue) {
          widget.onChange.call(changedValue);
          setState(() {
            widget.value = changedValue;
            if (changedValue == min) {
              roundLeft = true;
            } else {
              roundLeft = false;
            }
            if (changedValue == max) {
              roundRight = true;
            } else {
              roundRight = false;
            }
          });
        },
      ),
    );

`

class RoundSliderTrackShape extends SliderTrackShape {
  const RoundSliderTrackShape(this.roundRight, this.roundLeft, {this.disabledThumbGapWidth = 0, this.radius = 0});

  final bool roundLeft;
  final bool roundRight;
  final double disabledThumbGapWidth;
  final double radius;

  @override
  Rect getPreferredRect({
    RenderBox parentBox,
    Offset offset = Offset.zero,
    SliderThemeData sliderTheme,
    bool isEnabled,
    bool isDiscrete,
  }) {
    final double overlayWidth = sliderTheme.overlayShape.getPreferredSize(isEnabled, isDiscrete).width;
    final double trackHeight = sliderTheme.trackHeight;
    assert(overlayWidth >= 0);
    assert(trackHeight >= 0);
    assert(parentBox.size.width >= overlayWidth);
    assert(parentBox.size.height >= trackHeight);

    final double trackLeft = offset.dx + overlayWidth / 2;
    final double trackTop = offset.dy + (parentBox.size.height - trackHeight) / 2;

    final double trackWidth = parentBox.size.width - overlayWidth;
    return Rect.fromLTWH(trackLeft, trackTop, trackWidth, trackHeight);
  }

  @override
  void paint(
    PaintingContext context,
    Offset offset, {
    RenderBox parentBox,
    SliderThemeData sliderTheme,
    Animation<double> enableAnimation,
    TextDirection textDirection,
    Offset thumbCenter,
    bool isDiscrete,
    bool isEnabled,
  }) {
    if (sliderTheme.trackHeight == 0) {
      return;
    }

    final ColorTween activeTrackColorTween =
        ColorTween(begin: sliderTheme.disabledActiveTrackColor, end: sliderTheme.activeTrackColor);
    final ColorTween inactiveTrackColorTween =
        ColorTween(begin: sliderTheme.disabledInactiveTrackColor, end: sliderTheme.inactiveTrackColor);
    final Paint activePaint = Paint()..color = activeTrackColorTween.evaluate(enableAnimation);
    final Paint inactivePaint = Paint()..color = inactiveTrackColorTween.evaluate(enableAnimation);
    Paint leftTrackPaint;
    Paint rightTrackPaint;
    switch (textDirection) {
      case TextDirection.ltr:
        leftTrackPaint = activePaint;
        rightTrackPaint = inactivePaint;
        break;
      case TextDirection.rtl:
        leftTrackPaint = inactivePaint;
        rightTrackPaint = activePaint;
        break;
    }

    double horizontalAdjustment = 0.0;
    if (!isEnabled) {
      final double disabledThumbRadius = sliderTheme.thumbShape.getPreferredSize(false, isDiscrete).width / 2.0;
      final double gap = disabledThumbGapWidth * (1.0 - enableAnimation.value);
      horizontalAdjustment = disabledThumbRadius + gap;
    }

    final Rect trackRect = getPreferredRect(
      parentBox: parentBox,
      offset: offset,
      sliderTheme: sliderTheme,
      isEnabled: isEnabled,
      isDiscrete: isDiscrete,
    );
    //Modify this side
    // final RRect leftTrackSegment =
    final RRect leftTrackSegment = roundRight
        ? RRect.fromLTRBR(trackRect.left, trackRect.top, thumbCenter.dx - horizontalAdjustment, trackRect.bottom,
            Radius.circular(radius))
        : RRect.fromLTRBAndCorners(
            trackRect.left, trackRect.top, thumbCenter.dx - horizontalAdjustment, trackRect.bottom,
            topLeft: Radius.circular(radius), bottomLeft: Radius.circular(radius));
    context.canvas.drawRRect(leftTrackSegment, leftTrackPaint);
    // final RRect rightTrackSegment = ;
    final RRect rightTrackSegment = roundLeft ? RRect.fromLTRBR(thumbCenter.dx + horizontalAdjustment, trackRect.top,
            trackRect.right, trackRect.bottom, Radius.circular(radius)):  RRect.fromLTRBAndCorners(
        thumbCenter.dx - horizontalAdjustment, trackRect.top, trackRect.right, trackRect.bottom,
        topRight: Radius.circular(radius), bottomRight: Radius.circular(radius));
    context.canvas.drawRRect(rightTrackSegment, rightTrackPaint);
  }
}

0 个答案:

没有答案