一掌动、Slider和RangeSlider介紹

Slider：滑動(dòng)組件，可以從一系列值中選擇一個(gè)值宁玫。
RangeSlider：想要選擇一段值粗恢，可以使用RangeSlider
CupertinoSlider：IOS風(fēng)格的Slider。

二欧瘪、Slider眷射、RangeSlider、CupertinoSlider的源碼

2.1佛掖、Slider的源碼

const Slider({
    Key key,
    @required this.value,//當(dāng)前值  默認(rèn) 0 -- 1 之間
    @required this.onChanged,//滑動(dòng)監(jiān)聽
    this.onChangeStart,//滑動(dòng)前監(jiān)聽
    this.onChangeEnd,//滑動(dòng)后監(jiān)聽
    this.min = 0.0,//最小值  默認(rèn) 0
    this.max = 1.0,//最大值  默認(rèn) 1
    this.divisions,//分段個(gè)數(shù)
    this.label,//滑動(dòng)時(shí) 顯示的文字  （不設(shè)置divisions屬性 不顯示）
    this.activeColor,//滑塊軌道活動(dòng)部分的顏色
    this.inactiveColor,//滑塊軌道不活動(dòng)部分的顏色
    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,//當(dāng)前值  默認(rèn) 0 -- 1 之間
    @required this.onChanged,//滑動(dòng)監(jiān)聽
    this.onChangeStart,//滑動(dòng)前監(jiān)聽
    this.onChangeEnd,//滑動(dòng)后監(jiān)聽
    this.min = 0.0,//最小值  默認(rèn) 0
    this.max = 1.0,//最大值  默認(rèn) 1
    this.divisions,//分段個(gè)數(shù)
    this.labels,//滑動(dòng)時(shí) 顯示的文字  （不設(shè)置divisions屬性 不顯示）
    this.activeColor,//滑塊軌道活動(dòng)部分的顏色
    this.inactiveColor,//滑塊軌道不活動(dòng)部分的顏色
    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,//當(dāng)前值  默認(rèn) 0 -- 1 之間
    @required this.onChanged,//滑動(dòng)監(jiān)聽
    this.onChangeStart,//滑動(dòng)前監(jiān)聽
    this.onChangeEnd,//滑動(dòng)后監(jiān)聽
    this.min = 0.0,//最小值  默認(rèn) 0
    this.max = 1.0,//最大值  默認(rèn) 1
    this.divisions,//分段個(gè)數(shù)
    this.activeColor,//滑塊軌道活動(dòng)部分的顏色
    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學(xué)習(xí)"),
          ),
          body: Container(
            child: Slider(
              value: num,
              divisions: 10,
              label: num.toString(),
              onChangeStart: (value){
                print("滑動(dòng)前的值$value");
              },
              onChangeEnd: (value){
                print("滑動(dòng)后的值$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學(xué)習(xí)"),
          ),
          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學(xué)習(xí)"),
          ),
          body: Container(
            child: CupertinoSlider(
              value: iosNum,
              onChanged: (value){
                setState(() {
                  iosNum = value;
                });
              },
              activeColor: Colors.red,
              thumbColor: Colors.yellow,
              divisions: 10,

            ),
          )),
    );
  }
}

333.png