微信交流群

# Slider

Slider可以快速的从一系列值中做出选择,Slider需要设置valueonChanged属性,用法如下:

double _sliderValue = 0;
Slider(
  value: _sliderValue,
  onChanged: (v){
    setState(() {
      _sliderValue = v;
    });
  },
)
1
2
3
4
5
6
7
8
9

如果不设置onChanged属性,Slider控件处于禁用状态,不可滑动,另外Slider控件本身没有滑动效果,需要通过onChanged回调动态改变value的值,效果如下:

更改Slider值的范围:

Slider(
  min: 0,
  max: 100,
  ...
1
2
3
4
5

通过设置divisions属性使Slider停留在某些点上,Slider只能滑动到这些点,效果如下:

注意看Slider上分了3个点。

设置label参数则可以在拖动Slider时在其上方显示一个标签,显示标签需要设置divisions参数:

Slider(
  label: '$_sliderValue',
  divisions: 5,
  ...
  )
1
2
3
4
5

效果如下:

通过activeColorinactiveColor参数设置其颜色:

Slider(
  activeColor: Colors.red,
  inactiveColor: Colors.blue,
  ...
  )
1
2
3
4
5

效果如下:

# RangeSlider

如果想要选择一段值,可以使用RangeSlider,用法和Slider一样,如下:

RangeValues _rangeValues = RangeValues(0, 1);
RangeSlider(
  values: _rangeValues,
  onChanged: (v) {
    setState(() {
      _rangeValues = v;
    });
  },
)
1
2
3
4
5
6
7
8
9

效果:

# CupertinoSlider

如果想用ios风格的Slider,可以使用CupertinoSlider:

double _sliderValue = 0;
CupertinoSlider(
  value: _sliderValue,
  onChanged: (v) {
    setState(() {
      _sliderValue = v;
    });
  },
)
1
2
3
4
5
6
7
8
9

效果如下:

当然我们也可以根据平台显示不同风格的Slider,ios平台显示CupertinoSlider效果,其他平台显示Material风格,用法如下:

Slider.adaptive(
  value: _sliderValue,
  onChanged: (v) {
    setState(() {
      _sliderValue = v;
    });
  },
)
1
2
3
4
5
6
7
8