【Flutter】九、Flutter之滑动条——Slider
一、Slider
Slider是Flutter中的滑动条组件。
1.1 Slider构造器
const Slider({
Key key,
@required this.value,
@required this.onChanged,
this.onChangeStart,
this.onChangeEnd,
this.min = 0.0,
this.max = 1.0,
this.divisions,
this.label,
this.activeColor,
this.inactiveColor,
this.semanticFormatterCallback,
}) : _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);
1.2 Slider属性说明
属性 | 说明 |
---|---|
double value | 当前滑动条的值 |
ValueChanged onChanged | 滑动条值改变事件,滑动中一直触发 |
ValueChanged onChangeStart | 滑动条开始滑动回调 |
ValueChanged onChangeEnd | 滑动条结束滑动回调 |
double min | 最小值,默认0.0 |
double max | 最大值,默认1.0 |
int divisions | 将滑动条几等分 |
String label | 拖动滑块时可在滑块上方显示的labeli |
Color activeColor | 滑动条已划过部分及滑块颜色 |
Color inactiveColor | 滑动条未划过部分的颜色 |
SemanticFormatterCallback semanticFormatterCallback | 用于根据滑块值创建语义值的回调。 例: semanticFormatterCallback: (double newValue) {return '${newValue.round()} dollars}';}, |
1.3 Slider示例
Row(
children: <Widget>[
Text('Slider'),
Slider(
value: _sliderValue,
onChanged: (data){
print('change:$data');
setState(() {
this._sliderValue = data;
});
},
onChangeStart: (data){
print('start:$data');
},
onChangeEnd: (data){
print('end:$data');
},
min: 0.0,
max: 10.0,
divisions: 10,
label: '$_sliderValue',
activeColor: Colors.green,
inactiveColor: Colors.grey,
semanticFormatterCallback: (double newValue) {
return '${newValue.round()} dollars}';
},
)
],
)
二、SliderTheme
自定义滑动条样式
2.1 SliderTheme构造器
const SliderTheme({
Key key,
@required this.data,
@required Widget child,
}) : assert(child != null),
assert(data != null),
super(key: key, child: child);
属性 | 说明 |
---|---|
SliderThemeData data | 定义滑动条的相关数据,具体看下面介绍 |
Widget child | Slider控件 |
三、SliderThemeData
用于自定义滑动条的数据
3.1 SliderThemeData构造器
const SliderThemeData({
this.trackHeight,
this.activeTrackColor,
this.inactiveTrackColor,
this.disabledActiveTrackColor,
this.disabledInactiveTrackColor,
this.activeTickMarkColor,
this.inactiveTickMarkColor,
this.disabledActiveTickMarkColor,
this.disabledInactiveTickMarkColor,
this.thumbColor,
this.overlappingShapeStrokeColor,
this.disabledThumbColor,
this.overlayColor,
this.valueIndicatorColor,
this.overlayShape,
this.tickMarkShape,
this.thumbShape,
this.trackShape,
this.valueIndicatorShape,
this.rangeTickMarkShape,
this.rangeThumbShape,
this.rangeTrackShape,
this.rangeValueIndicatorShape,
this.showValueIndicator,
this.valueIndicatorTextStyle,
this.minThumbSeparation,
this.thumbSelector,
});
3.2 SliderThemeData属性说明
属性 | 说明 |
---|---|
double trackHeight | 轨道高度 |
Color activeTrackColor | 激活部分轨道颜色 |
Color inactiveTrackColor | 未激活部分轨道颜色 |
Color disabledActiveTrackColor | 滑动条无法使用时被激活轨道的颜色 |
Color disabledInactiveTrackColor | 滑动条无法使用时未激活轨道的颜色 |
Color activeTickMarkColor | 已激活轨道刻度线的颜色 |
Color inactiveTickMarkColor | 未激活轨道刻度线的颜色 |
Color disabledActiveTickMarkColor | 滑动条无法使用时已激活轨道刻度线的颜色 |
Color disabledInactiveTickMarkColor | 滑动条无法使用时未激活轨道刻度线的颜色 |
Color thumbColor | 滑块颜色 |
Color overlappingShapeStrokeColor | |
Color disabledThumbColor | 滑动条不可用时滑块的颜色 |
Color overlayColor | 拖动过程中滑块周围绘制的覆盖层的颜色 |
Color valueIndicatorColor | label背景色 |
SliderComponentShape overlayShape | 拖动过程中滑块周围绘制的覆盖层的大小 RoundSliderOverlayShape(overlayRadius: 20.0) |
SliderTickMarkShape tickMarkShape | 刻度形状 RoundSliderTickMarkShape(tickMarkRadius:2.0)//大于3会消失 |
SliderComponentShape thumbShape | 滑块形状 RoundSliderThumbShape(enabledThumbRadius: 12.0,disabledThumbRadius: 3.0) |
SliderTrackShape trackShape | 轨道形状 |
SliderComponentShape valueIndicatorShape | |
RangeSliderTickMarkShape rangeTickMarkShape | |
RangeSliderThumbShape rangeThumbShape | |
RangeSliderTrackShape rangeTrackShape | |
RangeSliderValueIndicatorShape rangeValueIndicatorShape | |
ShowValueIndicator showValueIndicator | 控制label显示 ShowValueIndicator.onlyForDiscrete:当divisions |
TextStyle valueIndicatorTextStyle | label文本样式 |
double minThumbSeparation | |
RangeThumbSelector thumbSelector |