1. 基本介绍

Slider 是一个常见的进度条控制器。

2. 示例代码

代码下载地址。如果对你有帮助的话记得给个关注，代码会根据我的 Flutter 专题不断更新。

3. Slider 属性介绍

Slider属性	介绍
value	@required 当前 Slider 滑块位置的值，注意不可以超出 min 和 max 的范围，否则会报错
onChanged	@required 正在滑动或者点击，未松手
onChangeStart	刚开始点击
onChangeEnd	滑动或者点击结束，已松手
min	最小值，默认为 0.0
max	最大值，默认为 1.0
label	气泡文本
divisions	刻度数量，没有刻度时，label 不展示
mouseCursor	鼠标光标
activeColor	滑块颜色
inactiveColor	轨道颜色
semanticFormatterCallback	语义标签回调
focusNode	焦点控制，Flutter 组件之 FocusNode 详解
autofocus	自动聚焦，默认为 false

SliderThemeData属性 | 介绍
trackHeight | 轨道高度

activeTrackColor | 滑块左侧轨道颜色，

红色部分轨道.png

inactiveTrackColor | 滑块右侧侧轨道颜色，

灰色部分轨道.png

disabledActiveTrackColor | slider 不可用（onChanged = null）时，滑块左侧轨道颜色，位置与 activeTrackColor 相同
disabledInactiveTrackColor | slider 不可用（onChanged = null）时，滑块右侧轨道颜色，位置与 inactiveTrackColor 相同

activeTickMarkColor | 滑块左侧刻度颜色，

滑块左侧黑点.png

inactiveTickMarkColor | 滑块右侧刻度颜色，

滑块右侧红点.png

disabledActiveTickMarkColor | slider 不可用（onChanged = null）时，滑块左侧刻度颜色，位置与 activeTickMarkColor 相同
disabledInactiveTickMarkColor | slider 不可用（onChanged = null）时，滑块右侧刻度颜色，位置与 inactiveTickMarkColor 相同
thumbColor | 滑块颜色
overlappingShapeStrokeColor | 滑块按下去时周边绘制颜色，很少用

disabledThumbColor | slider 不可用（onChanged = null）时，滑块颜色

overlayColor | 滑块按下去时周边颜色，

黄色部分.png

红色气泡.png

rangeTickMarkShape | RangeSlider 刻度形状
rangeThumbShape | RangeSlider 滑块形状
rangeTrackShape | RangeSlider 轨道形状
rangeValueIndicatorShape | RangeSlider 气泡形状
showValueIndicator | 气泡显示方式，默认为 ShowValueIndicator.onlyForDiscrete
valueIndicatorTextStyle | 气泡文本TextStyle
minThumbSeparation | RangeSlider 的 start 和 end 最小间隔
thumbSelector | RangeSlider 滑块选择器，默认选择最近的，可以通过这个自定义，例如点击轨道中间左侧的点就选择左侧滑块改变 start 值，点击轨道中间点右侧，就选择 end 值。

4. Slider 详解

4.1 容器创建

import 'package:flutter/material.dart';

class FMSliderVC extends StatefulWidget{
  @override
  FMSliderState createState() => FMSliderState();
}

class FMSliderState extends State <FMSliderVC> {
  @override
  double sliderValue = 0;
  String sliderText = "还没操作";

  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(title: Text("Slider"),),
      body: Center(
        child: Column(
          children: [
            Padding(padding: EdgeInsets.all(30)),
            _slider(),
            Text(sliderText),
          ],
        ),
      ),
    );
  }


  Slider _slider(){
    return Slider(
      value: sliderValue,
      max: 100,
      onChanged: (value){
        print("onChanged : $value");
        updateSlider(value, "onChanged : $value");
      },
      onChangeStart: (value){
        print("onChangeStart : $value");
        updateSlider(value, "onChangeStart : $value");
      },
      onChangeEnd: (value){
        print("onChangeEnd : $value");
        updateSlider(value, "onChangeEnd : $value");
      },
    );
  }

  void updateSlider(value, text){
    sliderValue = value;
    sliderText = text;

    setState(() {

    });
  }
}

4.2 事件捕捉

事件	描述
onChanged	正在滑动或者点击，未松手
onChangeStart	刚开始点击
onChangeEnd	滑动或者点击结束，已松手

Slider normal.gif

4.3 颜色

  Slider _slider(){
    return Slider(
      value: sliderValue,
      max: 100,
      activeColor: Colors.red,
      inactiveColor: Colors.yellow,

      onChanged: (value){
        print("onChanged : $value");
        updateSlider(value, "onChanged : $value");
      },
      onChangeStart: (value){
        print("onChangeStart : $value");
        updateSlider(value, "onChangeStart : $value");
      },
      onChangeEnd: (value){
        print("onChangeEnd : $value");
        updateSlider(value, "onChangeEnd : $value");
      },
    );
  }

颜色	介绍
activeColor	滑块颜色，此处设置为红色
inactiveColor	轨道颜色，此处设置为黄色

Slider colors.png

4.4 值区间

slider 使用 min 与 max 来设置最小值与最大值。

值	介绍
min	最小值，默认为 0.0
max	最大值，默认为 1.0

  double sliderValue = 100;

  Slider _slider(){
    return Slider(
      value: sliderValue,
      activeColor: Colors.red,
      inactiveColor: Colors.yellow,

      min: 100,
      max: 500,

      onChanged: (value){
        print("onChanged : $value");
        updateSlider(value, "onChanged : $value");
      },
      onChangeStart: (value){
        print("onChangeStart : $value");
        updateSlider(value, "onChangeStart : $value");
      },
      onChangeEnd: (value){
        print("onChangeEnd : $value");
        updateSlider(value, "onChangeEnd : $value");
      },
    );
  }

Slider min.png

Slider max.png

4.5 气泡与刻度

属性	介绍
label	气泡文本
divisions	刻度数量，没有刻度时，label 不展示

  Slider _slider(){
    return Slider(
      value: sliderValue,
      activeColor: Colors.red,
      inactiveColor: Colors.yellow,

      min: 100,
      max: 500,

      label: "气泡 $sliderValue",
      divisions: 10,

      onChanged: (value){
        print("onChanged : $value");
        updateSlider(value, "onChanged : $value");
      },
      onChangeStart: (value){
        print("onChangeStart : $value");
        updateSlider(value, "onChangeStart : $value");
      },
      onChangeEnd: (value){
        print("onChangeEnd : $value");
        updateSlider(value, "onChangeEnd : $value");
      },
    );
  }

Slider label.gif

5. SliderThemeData 进阶之自定义样式

5.1 Slider 处理

  double sliderValue = 100;
  double sliderEndValue = 300;
  String sliderText = "还没操作";

  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(title: Text("Slider"),),
      body: Center(
        child: Column(
          children: [
            Padding(padding: EdgeInsets.all(30)),
            _slider(),
            Text(sliderText),
            _sliderTheme(context),
          ],
        ),
      ),
    );
  }

  SliderTheme _sliderTheme(context){
    return SliderTheme(
        data: SliderThemeData(
          trackHeight: 20,
          activeTrackColor: Colors.red,
          inactiveTrackColor: Colors.grey,
          disabledActiveTrackColor: Colors.yellow,
          disabledInactiveTrackColor: Colors.cyan,
          activeTickMarkColor: Colors.black,
          inactiveTickMarkColor: Colors.red,
          overlayColor: Colors.yellow,
          overlappingShapeStrokeColor: Colors.black,
          overlayShape: RoundSliderOverlayShape(),
          valueIndicatorColor: Colors.red,
          showValueIndicator: ShowValueIndicator.onlyForDiscrete,
          minThumbSeparation: 100,

          rangeTrackShape: RoundedRectRangeSliderTrackShape(),
        ),
        child: Slider(
          value: sliderValue,
          min: 100,
          max: 500,
          divisions: 10,
          label: "气泡",
          onChanged: (value){
            print("SliderTheme onChanged : $value");
            updateSlider(value, "onChanged : $value");
          },
          onChangeStart: (value){},
        ),
    );
  }

具体属性参考顶部表格。

SliderTheme slider.gif

5.2 RangeSlider 处理

与 Slider 大同小异，不做赘述了。

  double sliderValue = 100;
  double sliderEndValue = 300;
  String sliderText = "还没操作";

  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(title: Text("Slider"),),
      body: Center(
        child: Column(
          children: [
            Padding(padding: EdgeInsets.all(30)),
            _slider(),
            Text(sliderText),
            _sliderTheme(context),
          ],
        ),
      ),
    );
  }


  SliderTheme _sliderTheme(context){
    return SliderTheme(
        data: SliderThemeData(
          trackHeight: 20,
          activeTrackColor: Colors.red,
          inactiveTrackColor: Colors.grey,
          disabledActiveTrackColor: Colors.yellow,
          disabledInactiveTrackColor: Colors.cyan,
          activeTickMarkColor: Colors.black,
          inactiveTickMarkColor: Colors.red,
          overlayColor: Colors.yellow,
          overlappingShapeStrokeColor: Colors.black,
          overlayShape: RoundSliderOverlayShape(),
          valueIndicatorColor: Colors.red,
          // tickMarkShape: RoundSliderTickMarkShape(tickMarkRadius: 10.0),
          showValueIndicator: ShowValueIndicator.onlyForDiscrete,
          minThumbSeparation: 100,

          rangeTrackShape: RoundedRectRangeSliderTrackShape(),
          // rangeThumbShape: RoundRangeSliderThumbShape(enabledThumbRadius: 15, disabledThumbRadius: 15, pressedElevation: 3),
        ),

        child: RangeSlider(
            values: RangeValues(sliderValue, sliderEndValue),
            min: 100,
            max: 500,
            onChanged: (rangeValues){
              sliderValue = rangeValues.start;
              sliderEndValue = rangeValues.end;

              setState(() {

              });
            },
        ),
    );
  }

SliderTheme rangeSlider.gif

6. 技术小结

Slider 其实实际用处并不是特别多，多加练习。
自定义 Slider 其实比较复杂，需要仔细研究各个属性。

Flutter入门（32）：Flutter 组件之 Slider 详解