我想在滑块的三次方形状中创建“自定义”形状。 对于旋转,我使用了旋转框小部件来更改旋转。 然后四分之一到7。我试图制作该小部件,但UI并不符合我的期望。 我想制作一个这样的自定义形状。 在此处输入图片说明

我这样获得的在此处输入图片说明

这是我做过的代码

class CustomSliderThumbRect extends SliderComponentShape {
  final double thumbRadius;
  final thumbHeight;
  final int min;
  final int max;

  const CustomSliderThumbRect({
    this.thumbRadius,
    this.thumbHeight,
    this.min,
    this.max,
  });

  @override
  Size getPreferredSize(bool isEnabled, bool isDiscrete) {
    return Size.fromRadius(thumbRadius);
  }

  @override
  void paint(
    PaintingContext context,
    Offset center, {
    Animation<double> activationAnimation,
    Animation<double> enableAnimation,
    bool isDiscrete,
    TextPainter labelPainter,
    RenderBox parentBox,
    SliderThemeData sliderTheme,
    TextDirection textDirection,
    double value,
    double textScaleFactor,
    Size sizeWithOverflow,
  }) {
    //Get the context of canvas
    final Canvas canvas = context.canvas;
//

    final rRect = RRect.fromRectAndRadius(
      Rect.fromCenter(
          center: center, width: thumbHeight * 1.2, height: thumbHeight * .6),
      Radius.circular(thumbRadius * .4),
    );

    final paint = Paint()
      ..color = sliderTheme.activeTrackColor //Thumb Background Color
      ..style = PaintingStyle.fill;

    TextSpan span = new TextSpan(
        style: new TextStyle(
            fontSize: thumbHeight * .3,
            fontWeight: FontWeight.w700,
            color: sliderTheme.thumbColor,
            height: 1),
        text: '${getValue(value)}');
    TextPainter tp = new TextPainter(
        text: span,
        textAlign: TextAlign.left,
        textDirection: TextDirection.ltr);
    tp.layout();
    Offset textCenter =
        Offset(center.dx - (tp.width / 2), center.dy - (tp.height / 2));

    canvas.drawRRect(rRect, paint);
    tp.paint(canvas, textCenter);
  }

  String getValue(double value) {
    return (min + (max - min) * value).round().toString();
  }
}

像这样使用

SliderTheme(
                data: SliderTheme.of(context).copyWith(
                  activeTrackColor: Colors.red[700],
                  inactiveTrackColor: Colors.red[100],
                  trackShape: RoundedRectSliderTrackShape(),
                  trackHeight: 4.0,
                  thumbColor: Colors.redAccent,
                  thumbShape: CustomSliderThumbRect(
                      thumbHeight: 40, thumbRadius: 10, min: 0, max: 100),
                  overlayColor: Colors.red.withAlpha(32),
                  overlayShape: RoundSliderOverlayShape(overlayRadius: 28.0),
                  tickMarkShape: RoundSliderTickMarkShape(),
                  // activeTickMarkColor: Colors.red[700],
                  // inactiveTickMarkColor: Colors.red[100],
                  valueIndicatorShape: PaddleSliderValueIndicatorShape(),
                  valueIndicatorColor: Colors.redAccent,
                  valueIndicatorTextStyle: TextStyle(
                    color: Colors.white,
                  ),
                ),
                child: Slider(
                  value: _currentSliderValue,
                  min: 0,
                  max: 100,
                  divisions: 4,
                  label: _currentSliderLabel.toString(),
                  onChanged: (double value) {
                    print(
                        'This is the Current Slider Label ${_currentSliderLabel.toString()}');
                    setState(() {
                      _currentSliderValue = value;
                      if (value == 25) {
                        _currentSliderLabel = 'Year';
                      } else if (value == 50) {
                        _currentSliderLabel = 'Month';
                      } else if (value == 75) {
                        _currentSliderLabel = 'Week';
                      } else if (value == 100) {
                        _currentSliderLabel = 'Today';
                      } else if (value == 0) {
                        _currentSliderLabel = 'OverAll';
                      }
                    });
                  },
                ),
              ),

  ask by Shahryar Rafique translate from so

本文未有回复,本站智能推荐:

2回复

Flutter:如何在画布上绘制图标?

我正在使用CustomPainter绘制Flutter,如下所示: 如何在canvas上绘制Icon ?
1回复

颤动 - 使幻灯片看起来像抽屉

我想从右侧onPress滑动一个小面板来显示一些信息。 我的Scaffold已经有一个Drawer显示菜单。 我正在寻找这样的东西: 除Drawer外,我还没有找到任何东西
1回复

颤动 - 如何在Slider交互结束后运行方法?

我正在学习Flutter,在与滑块的交互结束后,我在显示Snackbar时遇到了一些麻烦(换句话说,当用户将手指从滑块上抬起时,设置了最终值)。 我无法在onChange调用我的_showSnackBar()方法,因为快餐栏已经多次创建和显示,一个接着一个。 只有在交互完成后才能调用方法
1回复

屏幕外flutter_swiper幻灯片布局,堆栈/定位小部件

我正在尝试使用Flutter实现此布局和内容: https://i.imgur.com/oqiZqHb.png 如果我尝试使用Positioned小部件将-20偏移以使flutter_swiper程序包的粘性滚动器功能隐藏在屏幕的一部分上,并在其顶部放置侧边标题,则可以看到:
2回复

左右取消或确认滑块颤动

我需要使用向左滑动以取消和向右滑动以确认的滑块 这是所需的滑块 我找不到办法,有办法吗?
1回复

如何强制滑块在颤动中的最小值差为零

我试图创建一个最小值为10的滑块; 最大100; 如果最小值不同于零,我会遇到问题:值> = min &&值<= max是不正确的。 我已经在初始状态下添加了我的lider_value = 10.0。 但是我总是有这个错误。
1回复

如何在Flutter中的AlertDialog中实现Slider?

我在Flutter上学习应用程序开发,无法在AlertDialog中使用Slider。 它不会改变它的价值。 我确实搜索了问题,并在StackOverFlow上遇到了这篇文章: Flutter-为什么滑块在AlertDialog中不更新? 我读了一下,对它有点理解。 公认的答案是
1回复

如何在扑扑中构建这种类型的搜索栏?

我想构建滑动步骤的滑块。 提前致谢。
1回复

如何在Flutter中自定义Slider小部件?

是否可以在Flutter中自定义Slider Widget? 像这样: http : //prntscr.com/ofrtxv
1回复

如何在幻灯片中添加点

我正在为滑块使用tihs如何为滑块添加单选按钮 我试图添加点:true,但无法正常工作。是否可以添加其他方法来显示按钮?