简述
首先说下非常抱歉，因为个人问题，已有一个多月没有更新了，上周五有个小姐姐问我一个分段滑块的效果，这里就简单写下一个小样作为一个记录。
效果图
分析
其实自带的Slider基本能满足我们的需求，但是这个小姐姐的需要是后台会返回一个数组段比如说[0,10,30,60,100,150],这个滑块只能滑动到数组段中的值，其实这个简单的方式就是直接在slider滑动的时候，判断当前value距离数组段中那个值最接近，然后直接设置slider的值为这个值就可以了。
代码实现
///在数组段中找到当前与value最接近的值 void updateValue(double value) { var minValue = double.infinity; var result = 0.0; for (var element in widget.divisions) { double m = value - element; if (m.abs() < minValue) { result = element; minValue = m.abs(); } } if (_value == result) { return; } setState(() { _value = result; if (widget.onChanged != null) { widget.onChanged?.call(_value); } }); }
完整代码
import 'package:flutter/material.dart'; ///分段滑块 class DivisionsSlider extends StatefulWidget { const DivisionsSlider({ Key? key, required this.value, required this.onChanged, required this.divisions, this.onChangeStart, this.onChangeEnd, this.min = 0.0, this.max = 1.0, this.label, this.activeColor, this.inactiveColor, this.thumbColor, this.mouseCursor, this.semanticFormatterCallback, this.focusNode, this.autofocus = false, }) : super(key: key); final double value; final ValueChanged<double>? onChanged; final ValueChanged<double>? onChangeStart; final ValueChanged<double>? onChangeEnd; final double min; final double max; final String? label; final Color? activeColor; final Color? inactiveColor; final Color? thumbColor; final MouseCursor? mouseCursor; final SemanticFormatterCallback? semanticFormatterCallback; final FocusNode? focusNode; final bool autofocus; final List<double> divisions; @override State<DivisionsSlider> createState() => _DivisionsSliderState(); } class _DivisionsSliderState extends State<DivisionsSlider> { late double _value; @override void initState() { super.initState(); _value = widget.value; } @override Widget build(BuildContext context) { return Slider( value: _value, onChanged: (value) { updateValue(value); }, onChangeStart: widget.onChangeStart, onChangeEnd: widget.onChangeEnd, min: widget.min, max: widget.max, label: widget.label, activeColor: widget.activeColor, inactiveColor: widget.inactiveColor, thumbColor: widget.thumbColor, mouseCursor: widget.mouseCursor, semanticFormatterCallback: widget.semanticFormatterCallback, focusNode: widget.focusNode, autofocus: widget.autofocus, ); } void updateValue(double value) { var minValue = double.infinity; var result = 0.0; for (var element in widget.divisions) { double min = (value - element).abs(); if (min < minValue) { result = element; minValue = min; } } if (_value == result) { return; } setState(() { _value = result; if (widget.onChanged != null) { widget.onChanged?.call(_value); } }); } }
使用控件
DivisionsSlider( value: defaultValue, onChanged: (value) { defaultValue = value; setState(() {}); }, divisions: const [0, 10, 30, 60, 100, 150], max: 150, ),
