《Flutter 控件大全》第八十五:Slider 和CupertinoSlider
程序员文章站
2022-05-30 17:37:23
...
- 如果你对Flutter还有疑问或者技术方面的疑惑,欢迎加入Flutter交流群(微信:laomengit)。
- 同时也欢迎关注我的Flutter公众号【老孟程序员】,公众号首发Flutter的相关内容。
- Flutter地址:http://laomengit.com 里面包含160多个组件的详细用法。
Slider
Slider可以快速的从一系列值中做出选择,Slider需要设置value
和onChanged
属性,用法如下:
double _sliderValue = 0;
Slider(
value: _sliderValue,
onChanged: (v){
setState(() {
_sliderValue = v;
});
},
)
如果不设置onChanged
属性,Slider控件处于禁用状态,不可滑动,另外Slider控件本身没有滑动效果,需要通过onChanged
回调动态改变value的值,效果如下:
更改Slider值的范围:
Slider(
min: 0,
max: 100,
...
)
通过设置divisions
属性使Slider停留在某些点上,Slider只能滑动到这些点,效果如下:
注意看Slider上分了3个点。
设置label
参数则可以在拖动Slider时在其上方显示一个标签,显示标签需要设置divisions
参数:
Slider(
label: '$_sliderValue',
divisions: 5,
...
)
效果如下:
通过activeColor
和inactiveColor
参数设置其颜色:
Slider(
activeColor: Colors.red,
inactiveColor: Colors.blue,
...
)
效果如下:
如果想要选择一段值,可以使用RangeSlider,用法和Slider一样,如下:
RangeValues _rangeValues = RangeValues(0, 1);
RangeSlider(
values: _rangeValues,
onChanged: (v) {
setState(() {
_rangeValues = v;
});
},
)
效果:
CupertinoSlider
如果想用ios风格的Slider,可以使用CupertinoSlider:
double _sliderValue = 0;
CupertinoSlider(
value: _sliderValue,
onChanged: (v) {
setState(() {
_sliderValue = v;
});
},
)
效果如下:
当然我们也可以根据平台显示不同风格的Slider,ios平台显示CupertinoSlider效果,其他平台显示Material风格,用法如下:
Slider.adaptive(
value: _sliderValue,
onChanged: (v) {
setState(() {
_sliderValue = v;
});
},
)