美文网首页
flutter 自定义slider和插件syncfusion_f

flutter 自定义slider和插件syncfusion_f

作者: 司徒新新 | 来源:发表于2023-02-02 16:47 被阅读0次

先上效果图:

image.png

因为项目需求,所以自定义一个slider.

使用:

MySliderUtil(
  minValue: (widget.model?.durableNow ?? 0) / 100, //可滑动的最小值
  valueBlock: (value) {
    print(value);
),

具体代码

class MySliderUtil extends StatefulWidget {
  MySliderUtil({
    Key? key,
    required this.valueBlock,
    this.minValue = 0.0,
  }) : super(key: key);

  final ValueBlock valueBlock;
  final double minValue;
  @override
  _MySliderUtilState createState() => _MySliderUtilState();
}

class _MySliderUtilState extends State<MySliderUtil> {
  double _value = 0.0;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _value = widget.minValue;
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: SAdapt.width(28),
      child: Stack(
        children: [
          Positioned(
            top: 8.w,
            child: Container(
              width: 12.w,
              height: 12.w,
              decoration: BoxDecoration(
                color: get826DD4Color(),
                borderRadius: BorderRadius.circular(10),
              ),
            ),
          ),
          Positioned(
            right: 0.w,
            top: 8.w,
            child: Container(
              width: 12.w,
              height: 12.w,
              decoration: BoxDecoration(
                color: getF5F9FCColor(),
                borderRadius: BorderRadius.circular(10),
              ),
            ),
          ),
          Container(
            margin: EdgeInsets.only(left: 11.5.w, right: 11.5.w),
            child: SliderTheme(
              data: SliderThemeData(
                //去掉长按光晕
                overlayColor: Colors.transparent,
                trackHeight: SAdapt.width(2),
                inactiveTrackColor: getF5F9FCColor(),
                activeTrackColor: get826DD4Color(), // Color(0xFF81C359),
                trackShape: const CustomTrackShape(),
                thumbShape: SquareSliderComponentShape(),
              ),
              child: Slider(
                value: _value < 0 ? 0 : _value,
                onChangeStart: (double value) {},
                onChangeEnd: (double value) {
                  if (value < widget.minValue) {
                    widget.valueBlock(widget.minValue);
                    return;
                  }
                  //每次借宿后都会走
                  // 拖拽跳转
                  setState(() {
                    _value = value;
                  });
                  widget.valueBlock(value);
                },
                onChanged: (double value) {
                  if (value < widget.minValue) {
                    _value = widget.minValue;
                  } else {
                    _value = value;
                  }
                  setState(() {});
                },
              ),
            ),
          ),
        ],
      ),
    );
  }
}

上面的其实就可以用了,但是需求的滑块需要我们自定义,又遇到了别的问题,一步一步来~!

使用的时候发现滑块选中的偏移量有一些问题,所以定义了如下的RoundedRectSliderTrackShape:

class CustomTrackShape extends RoundedRectSliderTrackShape {
  const CustomTrackShape();

  @override
  Rect getPreferredRect({
    required RenderBox parentBox,
    Offset offset = Offset.zero,
    required SliderThemeData sliderTheme,
    bool isEnabled = false,
    bool isDiscrete = false,
  }) {
    final double trackHeight = sliderTheme.trackHeight!;
    final double trackWidth = parentBox.size.width;
    final double trackLeft = offset.dx;
    final double trackTop =
        offset.dy + (parentBox.size.height - trackHeight) / 2;
    return Rect.fromLTWH(trackLeft, trackTop, trackWidth, trackHeight);
  }

  @override
  void paint(
    PaintingContext context,
    Offset offset, {
    required RenderBox parentBox,
    required SliderThemeData sliderTheme,
    required Animation<double> enableAnimation,
    required TextDirection textDirection,
    required Offset thumbCenter,
    bool isDiscrete = false,
    bool isEnabled = false,
    double additionalActiveTrackHeight = 0,
  }) {
    super.paint(
      context,
      offset,
      parentBox: parentBox,
      sliderTheme: sliderTheme,
      enableAnimation: enableAnimation,
      textDirection: textDirection,
      thumbCenter: thumbCenter,
      //增加选中滑块的高度,系统默认+2· 给0就不加高了
      additionalActiveTrackHeight: 0,
    );
  }
}

最后我们来封装滑块的样式:

class SquareSliderComponentShape extends SliderComponentShape {
  @override
  Size getPreferredSize(bool isEnabled, bool isDiscrete) {
    return Size(SAdapt.width(28), SAdapt.width(28));
  }

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

    canvas.drawRRect(
      RRect.fromRectAndRadius(
        Rect.fromCenter(
            center: center, width: SAdapt.width(28), height: SAdapt.width(28)),
        const Radius.circular(14),
      ),
      Paint()..color = Colors.white,
    );

    //背景的线  实线
    Paint line = Paint()
      ..color = get826DD4Color()
      ..strokeCap = StrokeCap.round
      ..style = PaintingStyle.stroke
      ..strokeWidth = SAdapt.width(2);
//  画圆方法
    canvas.drawCircle(center, SAdapt.width(14), line);
  }
}

如果对你有帮助的话,希望能给我点个赞,哈哈!

后续
项目里好多样式的滑块,后来引用了一个第三方:syncfusion_flutter_sliders,然后按照你的需求再进行修改就可以了.

进度条 两个拖动
#https://pub.dev/packages/syncfusion_flutter_sliders/versions 
syncfusion_flutter_sliders: ^20.3.52
修改进度条样式
# https://pub.dev/packages/syncfusion_flutter_core 
syncfusion_flutter_core: ^20.3.52

有各式各样的,大致都能满足我们使用的需求.下面是文档:
https://help.syncfusion.com/flutter/slider/thumb-and-overlay

贴两个使用的例子:
这个是双滑块的
先上效果图


image.png

代码:

Container(
  margin: EdgeInsets.only(
    bottom: SAdapt.width(15),
    left: SAdapt.width(15),
    right: SAdapt.width(15),
  ),
  child: Stack(
    children: [
      Positioned(
        // right: 21.w,
        left: 14.w,
        top: 19.w,
        child: Container(
          width: 12.w,
          height: 12.w,
          decoration: BoxDecoration(
            color: getF5F9FCColor(),
            borderRadius: BorderRadius.circular(10),
          ),
        ),
      ),
      Positioned(
        // right: 21.w,
        right: 14.w,
        top: 19.w,
        child: Container(
          width: 12.w,
          height: 12.w,
          decoration: BoxDecoration(
            color: getF5F9FCColor(),
            borderRadius: BorderRadius.circular(10),
          ),
        ),
      ),
      SfRangeSliderTheme(
        data: SfRangeSliderThemeData(
          overlayColor: Colors.transparent,
          thumbColor: Colors.white,
          thumbRadius: 12,
          thumbStrokeWidth: SAdapt.width(2),
          thumbStrokeColor: get826DD4Color(),
          activeTrackHeight: SAdapt.width(2),
          inactiveTrackHeight: SAdapt.width(2),
          activeTrackColor: get826DD4Color(),
        ),
        child: SfRangeSlider(
          min: 0.0,
          max: widget.maxRang,
          values: _values,
          interval: 20,
          showTicks: false,
          showLabels: false,
          enableTooltip: false,
          minorTicksPerInterval: 1,
          // activeColor: get826DD4Color(),
          inactiveColor: getF5F9FCColor(),
          onChanged: (SfRangeValues values) {
            setState(() {
              selectedStart = int.parse(moneyDoubleOrInt(
                  (_values.start).toDouble(),
                  postion: 0));
              selectedEnd = int.parse(moneyDoubleOrInt(
                  (_values.end).toDouble(),
                  postion: 0));

              // if (selectedEnd == selectedStart) {
              //   _values = const SfRangeValues(0, 1);
              // } else {
              _values = values;
              // }
            });
          },
        ),
      ),
    ],
  ),
),

这个是单滑块的效果图跟我们之前使用的 一样,但是他的最小值定义完之后,就不是从0开始了,你给完最小值 就是初始阶段,而不是可使用的最小值.我自定义的起始值就是0,然后在给一个最小值是显示出来的,只可以在我给的最小值之间和最大值之间滑动

Container(
  margin: EdgeInsets.only(
    left: SAdapt.width(10),
    right: SAdapt.width(10),
  ),
  child: Stack(
    children: [
      Positioned(
        // right: 21.w,
        left: 14.w,
        top: 19.w,
        child: Container(
          width: 12.w,
          height: 12.w,
          decoration: BoxDecoration(
            color: get826DD4Color(),
            borderRadius: BorderRadius.circular(10),
          ),
        ),
      ),
      Positioned(
        // right: 21.w,
        right: 14.w,
        top: 19.w,
        child: Container(
          width: 12.w,
          height: 12.w,
          decoration: BoxDecoration(
            color: getF5F9FCColor(),
            borderRadius: BorderRadius.circular(10),
          ),
        ),
      ),
      SfSliderTheme(
        data: SfSliderThemeData(
          //光晕颜色
          overlayColor: Colors.transparent,
          thumbColor: Colors.white,
          thumbRadius: 12,
          thumbStrokeWidth: SAdapt.width(2),
          thumbStrokeColor: get826DD4Color(),
          activeTrackHeight: SAdapt.width(2),
          inactiveTrackHeight: SAdapt.width(2),
          activeTrackColor: get826DD4Color(),
        ),
        child: SfSlider(
          min: 0.0,
          max: 10.0,
          value: sliderNum,
          interval: 20,
          minorTicksPerInterval: 1,
          inactiveColor: getF5F9FCColor(),
          onChanged: (newValue) {
            setState(() {
              sliderNum = newValue;
            });
          },
        ),
      ),
    ],
  ),
),

相关文章

网友评论

      本文标题:flutter 自定义slider和插件syncfusion_f

      本文链接:https://www.haomeiwen.com/subject/umxghdtx.html