Flutter Slider 进度条

参数详解

属性	说明
value	当前值  默认 0 -- 1 之间
onChanged	滑动监听
onChangeStart	滑动前监听
onChangeEnd	滑动后监听
min	最小值  默认 0
max	最大值  默认 1
divisions	分段个数
label	滑动时 显示的文字  （不设置divisions属性 不显示）
activeColor	滑块轨道活动部分的颜色
inactiveColor	滑块轨道不活动部分的颜色
semanticFormatterCallback

 Flutter 还提供了仿苹果的Switch组件CupertinoSlider 。下面来介绍一下：

属性	说明
value	当前值  默认 0 -- 1 之间
onChanged	滑动监听
onChangeStart	滑动前监听(经过demo测试，一直都是0)
onChangeEnd	滑动后监听
min	最小值  默认 0
max	最大值  默认 1
divisions	分段个数
activeColor	滑块轨道活动部分的颜色

代码示例

Slider 代码示例

Slider(
  label:'Slider ${valuec.round()}',
  max: 100,
  min: 0,
  divisions: 5,
  activeColor:Colors.blue,
  inactiveColor: Colors.yellow,

  value:this.valuec,
  onChanged: (double v) {
    setState(() {
      this.valuec = v; 
    });
  },
  onChangeStart: (double startValue) {
    print('Started change at $startValue');
  },
  onChangeEnd: (double newValue) {
    print('Ended change on $newValue');
  },
  semanticFormatterCallback: (double newValue) {
    return '${newValue.round()} dollars';
  }
),

 CupertinoSlider 代码示例

CupertinoSlider(
  value:this.valued,
  onChanged: (double v) {
    setState(() {
      this.valued = v; 
    });
  },
),

效果图

完整代码

查看完整代码