如何在颤动幻灯片中制作立方体形状

问题描述

我想在颤动的立方体滑块形状中制作自定义形状。 对于旋转，我使用 Rotated Box Widget 来更改旋转。然后四分之一到 7。 我试图制作小部件，但用户界面并不符合我的愿望。我想制作这样的自定义形状。

我是这样获得的

这是我做的代码

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）