一、Slider和RangeSlider介绍
Slider：滑动组件，可以从一系列值中选择一个值。
RangeSlider：想要选择一段值，可以使用RangeSlider
CupertinoSlider：IOS风格的Slider。
二、Slider、RangeSlider、CupertinoSlider的源码
2.1、Slider的源码
const Slider({
Key key,
@required this.value,//当前值 默认 0 -- 1 之间
@required this.onChanged,//滑动监听
this.onChangeStart,//滑动前监听
this.onChangeEnd,//滑动后监听
this.min = 0.0,//最小值 默认 0
this.max = 1.0,//最大值 默认 1
this.divisions,//分段个数
this.label,//滑动时 显示的文字 （不设置divisions属性 不显示）
this.activeColor,//滑块轨道活动部分的颜色
this.inactiveColor,//滑块轨道不活动部分的颜色
this.mouseCursor,
this.semanticFormatterCallback,
this.focusNode,
this.autofocus = false,
}) : _sliderType = _SliderType.material,
assert(value != null),
assert(min != null),
assert(max != null),
assert(min <= max),
assert(value >= min && value <= max),
assert(divisions == null || divisions > 0),
super(key: key);
2.2、RangeSlider的源码
RangeSlider({
Key key,
@required this.values,//当前值 默认 0 -- 1 之间
@required this.onChanged,//滑动监听
this.onChangeStart,//滑动前监听
this.onChangeEnd,//滑动后监听
this.min = 0.0,//最小值 默认 0
this.max = 1.0,//最大值 默认 1
this.divisions,//分段个数
this.labels,//滑动时 显示的文字 （不设置divisions属性 不显示）
this.activeColor,//滑块轨道活动部分的颜色
this.inactiveColor,//滑块轨道不活动部分的颜色
this.semanticFormatterCallback,
}) : assert(values != null),
assert(min != null),
assert(max != null),
assert(min <= max),
assert(values.start <= values.end),
assert(values.start >= min && values.start <= max),
assert(values.end >= min && values.end <= max),
assert(divisions == null || divisions > 0),
super(key: key);
2.3、CupertinoSlider的源码
const CupertinoSlider({
Key key,
@required this.value,//当前值 默认 0 -- 1 之间
@required this.onChanged,//滑动监听
this.onChangeStart,//滑动前监听
this.onChangeEnd,//滑动后监听
this.min = 0.0,//最小值 默认 0
this.max = 1.0,//最大值 默认 1
this.divisions,//分段个数
this.activeColor,//滑块轨道活动部分的颜色
this.thumbColor = CupertinoColors.white,//滑块颜色
}) : assert(value != null),
assert(min != null),
assert(max != null),
assert(value >= min && value <= max),
assert(divisions == null || divisions > 0),
assert(thumbColor != null),
super(key: key);
三、Slider、RangeSlider、CupertinoSlider的属性介绍
3.1、Slider的属性介绍
| 属性 | 说明 |
|---|---|
| value | 当前值 默认 0 -- 1 之间 |
| onChanged | 滑动监听 |
| onChangeStart | 滑动前监听 |
| onChangeEnd | 滑动结束监听 |
| min | 最小值 默认 0 |
| max | 最大值 默认 1 |
| divisions | 分段个数 |
| label | 滑动时显示的文字（不设置divisions属性 不显示） |
| activeColor | 滑块轨道活动部分的颜色 |
| inactiveColor | 滑块轨道不活动部分的颜色 |
3.2、RangeSlider的属性介绍
| 属性 | 说明 |
|---|---|
| value | 当前值 ,RangeValues类型，默认 0 -- 1 之间 |
| labels | 滑动时显示的文字，RangeLabels类型 |
| 别的参数 | 见Slider的属性介绍 |
3.3、CupertinoSlider的属性介绍
| 属性 | 说明 |
|---|---|
| thumbColor | 滑块颜色 |
| 别的参数 | 见Slider的属性介绍 |
四、Slider、RangeSlider、CupertinoSlider的demo
4.1、Slider的demo
class _SliderFulState extends State {
double num = 0;
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Slider学习"),
),
body: Container(
child: Slider(
value: num,
divisions: 10,
label: num.toString(),
onChangeStart: (value){
print("滑动前的值$value");
},
onChangeEnd: (value){
print("滑动后的值$value");
},
onChanged: (value){
setState(() {
num = value;
});
},
activeColor: Colors.red,
inactiveColor: Colors.yellow,
),
)),
);
}
}
2021.01.18.14.17.35.gif
4.2、RangeSlider的demo
class _SliderFulState extends State {
double nowNum = 0.0;
var rangeValue = RangeValues(0.1,0.5);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("RangeSlider学习"),
),
body: Container(
child: RangeSlider(
values: rangeValue,
onChanged: (value){
setState(() {
rangeValue = value;
});
},
activeColor: Colors.red,
inactiveColor: Colors.blue,
labels: RangeLabels(rangeValue.start.toString(),rangeValue.end.toString()),
divisions: 10,
),
)),
);
}
}
2021.01.18.14.39.33.gif
4.3、RangeSlider的demo
class _SliderFulState extends State {
double iosNum = 0.0;
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("CupertinoSlider学习"),
),
body: Container(
child: CupertinoSlider(
value: iosNum,
onChanged: (value){
setState(() {
iosNum = value;
});
},
activeColor: Colors.red,
thumbColor: Colors.yellow,
divisions: 10,
),
)),
);
}
}
333.png