1. 基本介绍
Slider 是一个常见的进度条控制器。
2. 示例代码
代码下载地址。如果对你有帮助的话记得给个关注，代码会根据我的 Flutter 专题不断更新。
3. Slider 属性介绍
| Slider属性 | 介绍 |
|---|---|
| value | @required 当前 Slider 滑块位置的值，注意不可以超出 min 和 max 的范围，否则会报错 |
| onChanged | @required 正在滑动或者点击，未松手 |
| onChangeStart | 刚开始点击 |
| onChangeEnd | 滑动或者点击结束，已松手 |
| min | 最小值，默认为 0.0 |
| max | 最大值，默认为 1.0 |
| label | 气泡文本 |
| divisions | 刻度数量，没有刻度时，label 不展示 |
| mouseCursor | 鼠标光标 |
| activeColor | 滑块颜色 |
| inactiveColor | 轨道颜色 |
| semanticFormatterCallback | 语义标签回调 |
| focusNode | 焦点控制，Flutter 组件之 FocusNode 详解 |
| autofocus | 自动聚焦，默认为 false |
SliderThemeData属性 | 介绍
trackHeight | 轨道高度
红色部分轨道.png
inactiveTrackColor | 滑块右侧侧轨道颜色，
灰色部分轨道.png
disabledActiveTrackColor | slider 不可用（onChanged = null）时，滑块左侧轨道颜色，位置与 activeTrackColor 相同
disabledInactiveTrackColor | slider 不可用（onChanged = null）时，滑块右侧轨道颜色，位置与 inactiveTrackColor 相同
滑块左侧黑点.png
inactiveTickMarkColor | 滑块右侧刻度颜色，
滑块右侧红点.png
disabledActiveTickMarkColor | slider 不可用（onChanged = null）时，滑块左侧刻度颜色，位置与 activeTickMarkColor 相同
disabledInactiveTickMarkColor | slider 不可用（onChanged = null）时，滑块右侧刻度颜色，位置与 inactiveTickMarkColor 相同
thumbColor | 滑块颜色
overlappingShapeStrokeColor | 滑块按下去时周边绘制颜色，很少用
disabledThumbColor | slider 不可用（onChanged = null）时，滑块颜色
黄色部分.png
valueIndicatorColor | 刻度气泡颜色，
overlayShape | 滑块按下形状，很少用
tickMarkShape | 刻度形状
thumbShape | 滑块形状
trackShape | 轨道形状
valueIndicatorShape | 气泡颜色，
红色气泡.png
rangeTickMarkShape | RangeSlider 刻度形状
rangeThumbShape | RangeSlider 滑块形状
rangeTrackShape | RangeSlider 轨道形状
rangeValueIndicatorShape | RangeSlider 气泡形状
showValueIndicator | 气泡显示方式，默认为 ShowValueIndicator.onlyForDiscrete
valueIndicatorTextStyle | 气泡文本TextStyle
minThumbSeparation | RangeSlider 的 start 和 end 最小间隔
thumbSelector | RangeSlider 滑块选择器，默认选择最近的，可以通过这个自定义，例如点击轨道中间左侧的点就选择左侧滑块改变 start 值，点击轨道中间点右侧，就选择 end 值。
4. Slider 详解
4.1 容器创建
import 'package:flutter/material.dart';
class FMSliderVC extends StatefulWidget{
@override
FMSliderState createState() => FMSliderState();
}
class FMSliderState extends State {
@override
double sliderValue = 0;
String sliderText = "还没操作";
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(title: Text("Slider"),),
body: Center(
child: Column(
children: [
Padding(padding: EdgeInsets.all(30)),
_slider(),
Text(sliderText),
],
),
),
);
}
Slider _slider(){
return Slider(
value: sliderValue,
max: 100,
onChanged: (value){
print("onChanged : $value");
updateSlider(value, "onChanged : $value");
},
onChangeStart: (value){
print("onChangeStart : $value");
updateSlider(value, "onChangeStart : $value");
},
onChangeEnd: (value){
print("onChangeEnd : $value");
updateSlider(value, "onChangeEnd : $value");
},
);
}
void updateSlider(value, text){
sliderValue = value;
sliderText = text;
setState(() {
});
}
}
4.2 事件捕捉
| 事件 | 描述 |
|---|---|
| onChanged | 正在滑动或者点击，未松手 |
| onChangeStart | 刚开始点击 |
| onChangeEnd | 滑动或者点击结束，已松手 |
Slider normal.gif
4.3 颜色
Slider _slider(){
return Slider(
value: sliderValue,
max: 100,
activeColor: Colors.red,
inactiveColor: Colors.yellow,
onChanged: (value){
print("onChanged : $value");
updateSlider(value, "onChanged : $value");
},
onChangeStart: (value){
print("onChangeStart : $value");
updateSlider(value, "onChangeStart : $value");
},
onChangeEnd: (value){
print("onChangeEnd : $value");
updateSlider(value, "onChangeEnd : $value");
},
);
}
| 颜色 | 介绍 |
|---|---|
| activeColor | 滑块颜色，此处设置为红色 |
| inactiveColor | 轨道颜色，此处设置为黄色 |
Slider colors.png
4.4 值区间
slider 使用 min 与 max 来设置最小值与最大值。
| 值 | 介绍 |
|---|---|
| min | 最小值，默认为 0.0 |
| max | 最大值，默认为 1.0 |
double sliderValue = 100;
Slider _slider(){
return Slider(
value: sliderValue,
activeColor: Colors.red,
inactiveColor: Colors.yellow,
min: 100,
max: 500,
onChanged: (value){
print("onChanged : $value");
updateSlider(value, "onChanged : $value");
},
onChangeStart: (value){
print("onChangeStart : $value");
updateSlider(value, "onChangeStart : $value");
},
onChangeEnd: (value){
print("onChangeEnd : $value");
updateSlider(value, "onChangeEnd : $value");
},
);
}
Slider min.png
Slider max.png
4.5 气泡与刻度
| 属性 | 介绍 |
|---|---|
| label | 气泡文本 |
| divisions | 刻度数量，没有刻度时，label 不展示 |
Slider _slider(){
return Slider(
value: sliderValue,
activeColor: Colors.red,
inactiveColor: Colors.yellow,
min: 100,
max: 500,
label: "气泡 $sliderValue",
divisions: 10,
onChanged: (value){
print("onChanged : $value");
updateSlider(value, "onChanged : $value");
},
onChangeStart: (value){
print("onChangeStart : $value");
updateSlider(value, "onChangeStart : $value");
},
onChangeEnd: (value){
print("onChangeEnd : $value");
updateSlider(value, "onChangeEnd : $value");
},
);
}
Slider label.gif
5. SliderThemeData 进阶之自定义样式
5.1 Slider 处理
double sliderValue = 100;
double sliderEndValue = 300;
String sliderText = "还没操作";
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(title: Text("Slider"),),
body: Center(
child: Column(
children: [
Padding(padding: EdgeInsets.all(30)),
_slider(),
Text(sliderText),
_sliderTheme(context),
],
),
),
);
}
SliderTheme _sliderTheme(context){
return SliderTheme(
data: SliderThemeData(
trackHeight: 20,
activeTrackColor: Colors.red,
inactiveTrackColor: Colors.grey,
disabledActiveTrackColor: Colors.yellow,
disabledInactiveTrackColor: Colors.cyan,
activeTickMarkColor: Colors.black,
inactiveTickMarkColor: Colors.red,
overlayColor: Colors.yellow,
overlappingShapeStrokeColor: Colors.black,
overlayShape: RoundSliderOverlayShape(),
valueIndicatorColor: Colors.red,
showValueIndicator: ShowValueIndicator.onlyForDiscrete,
minThumbSeparation: 100,
rangeTrackShape: RoundedRectRangeSliderTrackShape(),
),
child: Slider(
value: sliderValue,
min: 100,
max: 500,
divisions: 10,
label: "气泡",
onChanged: (value){
print("SliderTheme onChanged : $value");
updateSlider(value, "onChanged : $value");
},
onChangeStart: (value){},
),
);
}
具体属性参考顶部表格。
SliderTheme slider.gif
5.2 RangeSlider 处理
与 Slider 大同小异，不做赘述了。
double sliderValue = 100;
double sliderEndValue = 300;
String sliderText = "还没操作";
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(title: Text("Slider"),),
body: Center(
child: Column(
children: [
Padding(padding: EdgeInsets.all(30)),
_slider(),
Text(sliderText),
_sliderTheme(context),
],
),
),
);
}
SliderTheme _sliderTheme(context){
return SliderTheme(
data: SliderThemeData(
trackHeight: 20,
activeTrackColor: Colors.red,
inactiveTrackColor: Colors.grey,
disabledActiveTrackColor: Colors.yellow,
disabledInactiveTrackColor: Colors.cyan,
activeTickMarkColor: Colors.black,
inactiveTickMarkColor: Colors.red,
overlayColor: Colors.yellow,
overlappingShapeStrokeColor: Colors.black,
overlayShape: RoundSliderOverlayShape(),
valueIndicatorColor: Colors.red,
// tickMarkShape: RoundSliderTickMarkShape(tickMarkRadius: 10.0),
showValueIndicator: ShowValueIndicator.onlyForDiscrete,
minThumbSeparation: 100,
rangeTrackShape: RoundedRectRangeSliderTrackShape(),
// rangeThumbShape: RoundRangeSliderThumbShape(enabledThumbRadius: 15, disabledThumbRadius: 15, pressedElevation: 3),
),
child: RangeSlider(
values: RangeValues(sliderValue, sliderEndValue),
min: 100,
max: 500,
onChanged: (rangeValues){
sliderValue = rangeValues.start;
sliderEndValue = rangeValues.end;
setState(() {
});
},
),
);
}
SliderTheme rangeSlider.gif
6. 技术小结
- Slider 其实实际用处并不是特别多，多加练习。
- 自定义 Slider 其实比较复杂，需要仔细研究各个属性。