一、Slider和RangeSlider介绍

Slider：滑动组件，可以从一系列值中选择一个值。
RangeSlider：想要选择一段值，可以使用RangeSlider
CupertinoSlider：IOS风格的Slider。

二、Slider、RangeSlider、CupertinoSlider的源码

2.1、Slider的源码

const Slider({
    Key key,
    @required this.value,//当前值  默认 0 -- 1 之间
    @required this.onChanged,//滑动监听
    this.onChangeStart,//滑动前监听
    this.onChangeEnd,//滑动后监听
    this.min = 0.0,//最小值  默认 0
    this.max = 1.0,//最大值  默认 1
    this.divisions,//分段个数
    this.label,//滑动时 显示的文字  （不设置divisions属性 不显示）
    this.activeColor,//滑块轨道活动部分的颜色
    this.inactiveColor,//滑块轨道不活动部分的颜色
    this.mouseCursor,
    this.semanticFormatterCallback,
    this.focusNode,
    this.autofocus = false,
  }) : _sliderType = _SliderType.material,
       assert(value != null),
       assert(min != null),
       assert(max != null),
       assert(min <= max),
       assert(value >= min && value <= max),
       assert(divisions == null || divisions > 0),
       super(key: key);

2.2、RangeSlider的源码

RangeSlider({
    Key key,
    @required this.values,//当前值  默认 0 -- 1 之间
    @required this.onChanged,//滑动监听
    this.onChangeStart,//滑动前监听
    this.onChangeEnd,//滑动后监听
    this.min = 0.0,//最小值  默认 0
    this.max = 1.0,//最大值  默认 1
    this.divisions,//分段个数
    this.labels,//滑动时 显示的文字  （不设置divisions属性 不显示）
    this.activeColor,//滑块轨道活动部分的颜色
    this.inactiveColor,//滑块轨道不活动部分的颜色
    this.semanticFormatterCallback,
  }) : assert(values != null),
       assert(min != null),
       assert(max != null),
       assert(min <= max),
       assert(values.start <= values.end),
       assert(values.start >= min && values.start <= max),
       assert(values.end >= min && values.end <= max),
       assert(divisions == null || divisions > 0),
       super(key: key);

2.3、CupertinoSlider的源码

const CupertinoSlider({
    Key key,
    @required this.value,//当前值  默认 0 -- 1 之间
    @required this.onChanged,//滑动监听
    this.onChangeStart,//滑动前监听
    this.onChangeEnd,//滑动后监听
    this.min = 0.0,//最小值  默认 0
    this.max = 1.0,//最大值  默认 1
    this.divisions,//分段个数
    this.activeColor,//滑块轨道活动部分的颜色
    this.thumbColor = CupertinoColors.white,//滑块颜色
  }) : assert(value != null),
       assert(min != null),
       assert(max != null),
       assert(value >= min && value <= max),
       assert(divisions == null || divisions > 0),
       assert(thumbColor != null),
       super(key: key);

三、Slider、RangeSlider、CupertinoSlider的属性介绍

3.1、Slider的属性介绍

3.2、RangeSlider的属性介绍

3.3、CupertinoSlider的属性介绍

四、Slider、RangeSlider、CupertinoSlider的demo

4.1、Slider的demo

class _SliderFulState extends State<SliderFul> {
  double num = 0;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text("Slider学习"),
          ),
          body: Container(
            child: Slider(
              value: num,
              divisions: 10,
              label: num.toString(),
              onChangeStart: (value){
                print("滑动前的值$value");
              },
              onChangeEnd: (value){
                print("滑动后的值$value");
              },
              onChanged: (value){
                  setState(() {
                    num = value;
                  });
              },
              activeColor: Colors.red,
              inactiveColor: Colors.yellow,

            ),
          )),
    );
  }
}

2021.01.18.14.17.35.gif

4.2、RangeSlider的demo

class _SliderFulState extends State<SliderFul> {
  double nowNum = 0.0;
  var rangeValue = RangeValues(0.1,0.5);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text("RangeSlider学习"),
          ),
          body: Container(
            child: RangeSlider(
              values: rangeValue,
              onChanged: (value){
                setState(() {
                  rangeValue = value;
                });
              },
              activeColor: Colors.red,
              inactiveColor: Colors.blue,
              labels: RangeLabels(rangeValue.start.toString(),rangeValue.end.toString()),
              divisions: 10,
            ),
          )),
    );
  }
}

2021.01.18.14.39.33.gif

4.3、RangeSlider的demo

class _SliderFulState extends State<SliderFul> {
  double iosNum = 0.0;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text("CupertinoSlider学习"),
          ),
          body: Container(
            child: CupertinoSlider(
              value: iosNum,
              onChanged: (value){
                setState(() {
                  iosNum = value;
                });
              },
              activeColor: Colors.red,
              thumbColor: Colors.yellow,
              divisions: 10,

            ),
          )),
    );
  }
}

333.png