![Flutter实战入门](https://wfqqreader-1252317822.image.myqcloud.com/cover/55/32436055/b_32436055.jpg)
上QQ阅读APP看书,第一时间看更新
3.3.4 CupertinoSlider
CupertinoSlider是滑动按钮,效果如图3-24所示。
![](https://epubservercos.yuewen.com/E5359F/17517093106688906/epubprivate/OEBPS/Images/t3-24-i.jpg?sign=1739305076-IcatZDFDL6PnWhhqoDjJh3Po9C6g8gjZ-0-ba61c1b400ae9771873144ed52e5de22)
图3-24 CupertinoSlider效果
CupertinoSlider主要属性参见表3-18。
表3-18 CupertinoSlider属性
![](https://epubservercos.yuewen.com/E5359F/17517093106688906/epubprivate/OEBPS/Images/b3-18-i.jpg?sign=1739305076-6NJ9EmDl9K3h3CEqtFzBQtlwzvmeeLQB-0-ac9f709a25c65306a1fbe64098f67578)
设置CupertinoSlider的最小值1,最大值10,分割5份,划过区域颜色为红色,代码如下:
class CupertinoSliderDemo extends StatefulWidget { @override State<StatefulWidget> createState() => _CupertinoSliderDemo(); } class _CupertinoSliderDemo extends State<CupertinoSliderDemo> { double _value = 1.0; @override Widget build(BuildContext context) { return Center( child: CupertinoSlider( value: _value, onChanged: (double v) { setState(() { print('$v'); _value = v; }); }, min: 1.0, max: 10.0, divisions: 5, activeColor: Colors.red, ), ); } }
CupertinoSlider本身不支持滑动,必须在onChange回调中改变value的值才可以,setState方法会立刻刷新屏幕,改变其状态。