欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

《Flutter 控件大全》第八十五:Slider 和CupertinoSlider

程序员文章站 2022-05-30 17:37:23
...
  • 如果你对Flutter还有疑问或者技术方面的疑惑,欢迎加入Flutter交流群(微信:laomengit)。
  • 同时也欢迎关注我的Flutter公众号【老孟程序员】,公众号首发Flutter的相关内容。
  • Flutter地址:http://laomengit.com 里面包含160多个组件的详细用法。

Slider

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

double _sliderValue = 0;
Slider(
  value: _sliderValue,
  onChanged: (v){
    setState(() {
      _sliderValue = v;
    });
  },
)

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

《Flutter 控件大全》第八十五:Slider 和CupertinoSlider

更改Slider值的范围:

Slider(
  min: 0,
  max: 100,
  ...
  )

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

《Flutter 控件大全》第八十五:Slider 和CupertinoSlider

注意看Slider上分了3个点。

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

Slider(
  label: '$_sliderValue',
  divisions: 5,
  ...
  )

效果如下:

《Flutter 控件大全》第八十五:Slider 和CupertinoSlider

通过activeColorinactiveColor参数设置其颜色:

Slider(
  activeColor: Colors.red,
  inactiveColor: Colors.blue,
  ...
  )

效果如下:

《Flutter 控件大全》第八十五:Slider 和CupertinoSlider

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

RangeValues _rangeValues = RangeValues(0, 1);
RangeSlider(
  values: _rangeValues,
  onChanged: (v) {
    setState(() {
      _rangeValues = v;
    });
  },
)

效果:

《Flutter 控件大全》第八十五:Slider 和CupertinoSlider

CupertinoSlider

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

double _sliderValue = 0;
CupertinoSlider(
  value: _sliderValue,
  onChanged: (v) {
    setState(() {
      _sliderValue = v;
    });
  },
)

效果如下:

《Flutter 控件大全》第八十五:Slider 和CupertinoSlider

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

Slider.adaptive(
  value: _sliderValue,
  onChanged: (v) {
    setState(() {
      _sliderValue = v;
    });
  },
)