滑块组件,可以在指定的最大值和最小值之间拖动选择。可指定颜色、分段数及显示的标签,接收进度变化回调。
相关组件
Slider基本使用
<br />【value】 : 数值 【double】<br />【min】 : 最小值 【double】<br />【max】 : 最大值 【double】<br />【activeColor】 : 激活颜色 【Color】<br />【inactiveColor】 : 非激活颜色 【Color】<br />【onChanged】 : 改变时回调 【Function(double)】<br />![89.gif](https://cdn.nlark.com/yuque/0/2020/gif/326147/1589445861662-ac1245f1-5a42-4418-b3cf-8cf6c5ccc360.gif#align=left&display=inline&height=79&margin=%5Bobject%20Object%5D&name=89.gif&originHeight=79&originWidth=404&size=138058&status=done&style=none&width=404)
import 'package:flutter/material.dart';
class CustomSlider extends StatefulWidget {
@override
_CustomSliderState createState() => _CustomSliderState();
}
class _CustomSliderState extends State<CustomSlider> {
double _value = 0.0;
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Text('当前值:${_value.toStringAsFixed(1)}'),
Slider(
value: _value,
min: 0.0,
max: 360.0,
activeColor: Colors.orangeAccent,
inactiveColor: Colors.green.withAlpha(99),
onChanged: (value) {
setState(() {
_value = value;
});
}),
],
);
}
}
Slider的分段与标签
<br />【divisions】 : 分段数 【int】<br />【label】 : 提示气泡文字 【String】<br />【onChangeStart】 : 开始滑动时监听 【Function(double)】<br />【onChangeEnd】 : 滑动结束时监听 【Function(double)】<br />![90.gif](https://cdn.nlark.com/yuque/0/2020/gif/326147/1589445966681-7b82f12e-281b-4a68-960f-7ceb4c77a34b.gif#align=left&display=inline&height=146&margin=%5Bobject%20Object%5D&name=90.gif&originHeight=146&originWidth=404&size=156643&status=done&style=none&width=404)
import 'package:flutter/material.dart';
class DivisionsSlider extends StatefulWidget {
@override
_DivisionsSliderState createState() => _DivisionsSliderState();
}
class _DivisionsSliderState extends State<DivisionsSlider> {
double _value = 0.0;
@override
Widget build(BuildContext context) {
return Slider(
value: _value,
min: 0.0,
max: 360.0,
divisions: 10,
label: '${_value.toStringAsFixed(1)}',
activeColor: Colors.orangeAccent,
inactiveColor: Colors.green.withAlpha(99),
onChangeStart: (value) {
print('开始滑动:$value');
},
onChangeEnd: (value) {
print('滑动结束:$value');
},
onChanged: (value) {
setState(() {
_value = value;
});
});
}
}