【Flutter】自定义分段选择器Slider
【Flutter】ZFJ自定义分段选择器Slider
前言
在开发一个APP的时候，需要用到一个分段选择器，系统的不满足就自己自定义了一个；
可以自定义节点的数量、自定义节点的大小、自定义滑竿的粗细，自定义气泡的有无等等…
基本上满足你的常用需求。
效果
参数
/// 滑杆的宽度final double width;/// 滑杆的高度final double height;/// 最大值final int? maxValue;/// 最小值final int? minValue;/// 段数final int divisions;/// 滑块的宽度final double sliderWidth;/// 节点的宽度final double nodeWidth;/// 滑动跳到节点final bool toNodeBool;/// 滑竿回调final Function(int) valueChanged;/// 指定初始化的值 0-1final double value;/// 是否可以滑动，默认可以滑动final bool isEnabled;/// 是否显示气泡final bool isShowBubble;/// 气泡和节点单位final String unitText;/// 是否显示节点文字final bool isShowNodeText;/// 选中颜色final Color? activeTrackColor;/// 未选中颜色final Color? unActiveTrackColor;/// 节点背景颜色final Color? nodeBgColor;/// 气泡字体样式final TextStyle? bubbleValueStyle;/// 节点字体样式final TextStyle? nodeValueStyle;
事例
1、使用
// 1、段数：4，有气泡，有单位，有节点文字ZFJNodeSlisder(key: _slisderStateKey_0,width: kZFJScreenUtil.screenWidth - 32,maxValue: 100,value: 0.4,unitText: "%",divisions: 4,isEnabled: true,isShowBubble: true,valueChanged: (value) {print("----------> value = $value");},),// 2、段数：1，有气泡，有单位，有节点文字ZFJNodeSlisder(key: _slisderStateKey_1,width: kZFJScreenUtil.screenWidth - 32,maxValue: 100,value: 0.4,unitText: "%",divisions: 1,activeTrackColor: Colors.red,isEnabled: true,isShowBubble: true,valueChanged: (value) {print("----------> value = $value");},),// 3、段数：3，有气泡，没单位，有节点文字ZFJNodeSlisder(key: _slisderStateKey_2,width: kZFJScreenUtil.screenWidth - 32,maxValue: 100,value: 0.2,unitText: "%",divisions: 3,activeTrackColor: Colors.green,isEnabled: true,isShowBubble: true,valueChanged: (value) {print("----------> value = $value");},),// 4、段数：4，有气泡，没单位，没节点文字ZFJNodeSlisder(key: _slisderStateKey_3,width: kZFJScreenUtil.screenWidth - 32,maxValue: 100,value: 0.1,unitText: "%",divisions: 4,activeTrackColor: Colors.yellow,isShowNodeText: false,isEnabled: true,isShowBubble: true,valueChanged: (value) {print("----------> value = $value");},),2、获取进度条的值
获取当前进度条的值参与计算等业务；
_slisderStateKey.currentState?.value;
3、更新进度条的值
其他的事件更新进度条的值；
_slisderStateKey.currentState?.updateValue(progress);
进度条全选
_slisderStateKey.currentState?.selectedAll();
源码
喜欢的点个小心心吧⭐️
ZFJFlutterUntils/zfj_node_slisder.dart