小菜在业务开发过程中会自定义 Slider 滑动条，而在自定义之前，小菜先简单了解一下 Flutter 自带的 Slider；
Slider
源码分析
const Slider({ Key key, @required this.value, // 滑动过程中对应值 @required this.onChanged, // 滑动过程回调 this.onChangeStart, // 滑动起始时位置回调 this.onChangeEnd, // 滑动结束时位置回调 this.min = 0.0, // 滑动条最小范围 this.max = 1.0, // 滑动条最大范围 this.divisions, // 滑动条均分比例份数 this.label, // 滑动条标签 this.activeColor, // 滑动条选中颜色 this.inactiveColor, // 滑动条未选中颜色 this.semanticFormatterCallback,})
复制代码
简单分析源码可得，Slider 是一个有状态的 StatefulWidget 组件，属性也很清晰易懂，其中滑动过程中对应的 value 值和 onChanged 回调是必须参数；
案例尝试
1. value & onChanged
value 未滑动过程中对应的值，在 min 和 max 之间；onChanged 是在滑动过程中回调，当 onChanged 为 null 或 value 所在的 min 和 max 集合范围为空时，Slider 禁止滑动；
var _value01 = 0.0;
return Slider(value: _value01, onChanged: (val) => setState(() => _value01 = val));
复制代码
2. min & max
min 和 max 为滑动条范围，而 value 的取值范围是在 min 和 max 之间，无论 value 为正还是负，均需要在 min 和 max 之间；
var _value02 = 0.0;
return Slider(value: _value02, min: 0.0, max: 100.0, onChanged: (val) => setState(() => _value02 = val));
复制代码
3. activeColor & inactiveColor
activeColor 为滑动条已滑动过的颜色；inactiveColor 为滑动条中未滑动的颜色；两者均可以在 SliderTheme 中设置；
return Slider( value: _value02, min: 0.0, max: 100.0, activeColor: Colors.deepOrange, inactiveColor: Colors.grey, onChanged: (val) => setState(() => _value02 = val));
复制代码
4. label & divisions;
label 为滑动条滑动到某一节点的标签文案；divisions 是把 min 和 max 等分为 divisions 份数；只有在 divisions 生效时，label 才会展示；
return Slider(value: _value02, min: 0.0, max: 100.0, activeColor: Colors.deepPurple, nactiveColor: Colors.grey, divisions: 5, label: 'Current Label = $_value02', onChanged: (val) => setState(() => _value02 = val));
复制代码
5. onChangeStart & onChangeEnd
onChangeStart 和 onChangeEnd 分别对应滑动过程中 value 值何时开始更改或何时完成更改时对应的回调；
return Slider(value: _value02, min: 0.0, max: 100.0, activeColor: Colors.green, inactiveColor: Colors.grey, onChangeStart: (val) => print('onChangeStart -> $val'), onChangeEnd: (val) => print('onChangeEnd -> $val'), onChanged: (val) => setState(() => _value02 = val));
复制代码
SliderTheme
Slider 的主题效果可以通过 SliderTheme 或 ThemeData.sliderTheme 中获取更新，相较于 Slider 只提供已滑动和未滑动颜色效果，属性粒度更细；
SliderThemeData
1. activeTrackColor & inactiveTrackColor
activeTrackColor 和 inactiveTrackColor 分别对应 Slider 已滑动过和未滑动过的轨道颜色；
return SliderTheme( data: SliderThemeData(activeTrackColor: Colors.pink, inactiveTrackColor: Colors.grey), child: _itemSlide06());
复制代码
2. thumbColor & overlayColor & overlayShape
thumbColor 对应滑动按钮颜色，而 overlayColor 对应滑动按钮映射的叠层颜色，通常设置为半透明状态；overlayShape 对应叠层样式；
return SliderTheme( data: SliderThemeData(activeTrackColor: Colors.pink.withOpacity(0.8), inactiveTrackColor: Colors.grey, thumbColor: Colors.deepPurple, overlayColor: Colors.deepPurple.withOpacity(0.3), overlayShape: RoundSliderOverlayShape(overlayRadius: 30.0))), child: _itemSlide06());
复制代码
3. valueIndicatorColor & valueIndicatorShape & valueIndicatorShape
valueIndicatorColor 对应 label 气泡颜色；valueIndicatorShape 对应气泡内文字属性；valueIndicatorShape 对应气泡样式，可以再此进行自定义气泡；
return SliderTheme( data: SliderThemeData( activeTrackColor: Colors.pink.withOpacity(0.8), inactiveTrackColor: Colors.grey, thumbColor: Colors.deepPurple, overlayColor: Colors.deepPurple.withOpacity(0.3), valueIndicatorColor: Colors.deepPurple.withOpacity(0.6), valueIndicatorShape: PaddleSliderValueIndicatorShape(), valueIndicatorTextStyle: TextStyle(fontSize: 14.0)), child: _itemSlide06());
复制代码
4. activeTickMarkColor & inactiveTickMarkColor & tickMarkShape
activeTickMarkColor 对应已选中刻度颜色；inactiveTickMarkColor 对应未选中刻度颜色；tickMarkShape 对应刻度样式；
return SliderTheme( data: SliderThemeData( activeTrackColor: Colors.pink.withOpacity(0.8), inactiveTrackColor: Colors.grey, thumbColor: Colors.deepPurple, overlayColor: Colors.deepPurple.withOpacity(0.3), valueIndicatorColor: Colors.deepPurple.withOpacity(0.6), valueIndicatorShape: PaddleSliderValueIndicatorShape(), valueIndicatorTextStyle: TextStyle(fontSize: 14.0), activeTickMarkColor: Colors.deepPurple.withOpacity(0.8), inactiveTickMarkColor: Colors.pink.withOpacity(0.4), tickMarkShape: RoundSliderTickMarkShape(tickMarkRadius: 4.0)), child: _itemSlide06());
复制代码
5. trackHeight & trackShape
trackHeight 为 Slider 轨道高度；trackShape 对应轨道样式，主要再此处进行自定义样式；
6. 不可滑动状态
对于不可滑动状态，SliderThemeData 提供了对应属性；
disabledActiveTrackColor 对应已滑动轨道颜色；
disabledInactiveTrackColor 对应未滑动轨道颜色；
disabledThumbColor 对应滑动按钮颜色；
disabledActiveTickMarkColor 对应已滑动刻度颜色；
disabledInactiveTickMarkColor 对应未滑动刻度颜色；
return SliderTheme( data: SliderThemeData( disabledActiveTrackColor: Colors.deepOrange.withOpacity(0.8), disabledInactiveTrackColor: Colors.grey, disabledThumbColor: Colors.grey, disabledActiveTickMarkColor: Colors.deepOrange.withOpacity(0.8), disabledInactiveTickMarkColor: Colors.yellow.withOpacity(0.8), tickMarkShape: RoundSliderTickMarkShape(tickMarkRadius: 4.0), trackHeight: 4.0), child: Slider(value: 0.6, divisions: 5, onChanged: null));
复制代码
Slider 案例源码
小菜本节暂未涉及自定义滑动条样式，对于底层的 Slider 了解还不够深入；如有错误，请多多指导！
来源： 阿策小和尚
评论