Slider 用在哪里？
当你接触到一个 flutter 组件时，首先要考虑的是它的应用场景，而不是看到什么就学什么，flutter 的组件目前已经快接近 400 个了，想要全部了解他们是不可能的，常用的做法是根据你的实际需求去寻找对应的组件使用，慢慢用你就会熟悉越来越多的组件，完全没必要去花时间去一个个过一遍，总之这样的学习方式是不对的。
Slider 是 flutter 中的滑块组件，常用的场景有音乐播放进度条、系统音量调节、屏幕亮度调节等。凡是和进度有关的场景，读者都可以尝试用一下这个组件。如下面的效果，都是可以用 Slider 来实现的。
Slider 基本使用
Slider 的组成大致有：轨道、滑块、刻度、标签。如下图
下面代码是 Slider 组件最简单的使用方法，直接声明了一个 Slider，呈现出来的效果如上图。注意 label 标签属性只有声明了 divisions 属性才会生效，否则不显示。
body: Slider(
value: _value,
min: 0, // 滑动范围最小值
max: 100, // 滑动范围最大值
// 用了 divisions 滑动范围就是离散的，把 100 分成 10 个等长范围，
// 每次滑动的最小单元是下一个离散点，我喜欢叫做刻度，便于理解，比如这里是 10 个刻度
divisions: 10,
label: "$_value", // 标签
activeColor: Colors.blue, // 激活部分的轨道颜色
inactiveColor: Colors.grey, // 未激活轨道部分的颜色
onChanged: (value){ // 滑动滑块时的回调函数
setState(() {
_value = value;
});
},
)
使用 SliderTheme，滑块主题
Slider 的使用难道就这么简单吗，答案显然不是。上面直接声明一个 Silder 并使用，只能算是生成了 Slider 的 4 个基本组成部分（轨道、滑块、标签、刻度）。如何对这些基本结构定制化呢？比如我想让轨道的大小、颜色、形状按照 UI 出图来决定，那么 SlideTheme 就上场了，在实际开发中，基本都是用 SlideTheme 来包装 Slider 使用。
简单点说，就是使用 SliderTheme 可以自定义 Slider 各个组件的颜色和形状，提供了更好的扩展性。
下面代码是 SliderTheme 的基本使用方法。
body: SliderTheme(
data: SliderTheme.of(context).copyWith(
trackHeight: 10, // 轨道高度
trackShape: RectangularSliderTrackShape(), // 轨道形状，可以自定义
activeTrackColor: Colors.blueGrey, // 激活的轨道颜色
inactiveTrackColor: Colors.black26, // 未激活的轨道颜色
thumbShape: RoundSliderThumbShape( // 滑块形状，可以自定义
enabledThumbRadius: 30 // 滑块大小
),
thumbColor: Colors.white, // 滑块颜色
overlayShape: RoundSliderOverlayShape( // 滑块外圈形状，可以自定义
overlayRadius: 50, // 滑块外圈大小
),
overlayColor: Colors.black54, // 滑块外圈颜色
valueIndicatorShape: PaddleSliderValueIndicatorShape(), // 标签形状，可以自定义
activeTickMarkColor: Colors.red, // 激活的刻度颜色
),
child: Slider(
value: _value,
min: 0,
max: 100,
divisions: 10,
label: '$_value',
onChanged: (v){
setState(() {
_value = v;
});
},
),
),
呈现出来的效果是这样的。
介绍 Slider 的使用方法绝对不是本文的目的。细心的读者可能会发现，在上图中，Slider 的轨道（track）宽度并没有占满水平方向，左右还留有空间。读者在直观上可能会认为是轨道自带了外边距（margin）或内边距（padding），其实都不是！左右留有的空间是 Slider 的大小，Slider 占据了整个屏幕的水平宽度。留出的左右空白大小，刚好是滑块外圈直径的大小！滑块滑到最左或最右，能保证滑块仍然在 Slider 内部，仅此而已，如下图。
如何让轨道宽度和 Slider 一样？
读者用过某音，某狗的音乐播放器，某牙、某站的视频播放器，会发现一个共性：他们的滑块是不会超过轨道的。既然有了上面的问题，那么如何解决呢？以正常的角度来看问题，本质是轨道的宽度不够导致的，那么我们让轨道的宽度和 Slider 保持一致，问题就迎刃而解了。
Slider 各个组件（轨道、滑块、标签、刻度）的形状都是可以自定义的，Slider 轨道形状默认是圆角，即（RoundedRectSliderTrackShape），通过继承 RoundedRectSliderTrackShape 重写 getPreferredRect 方法，我们就能很容易的对轨道的宽度、高度做出调整。
class FullWidthTrackShape extends RoundedRectSliderTrackShape {
Rect getPreferredRect({
@required RenderBox parentBox,
Offset offset = Offset.zero,
@required SliderThemeData sliderTheme,
bool isEnabled = false,
bool isDiscrete = false,
}) {
final double trackHeight = sliderTheme.trackHeight;
final double trackLeft = offset.dx;
final double trackTop = offset.dy + (parentBox.size.height - trackHeight) / 2;
// 让轨道宽度等于 Slider 宽度
final double trackWidth = parentBox.size.width;
return Rect.fromLTWH(trackLeft, trackTop, trackWidth, trackHeight);
}
}
上面代码 FullWidthTrackShape 继承了 RoundedRectSliderTrackShape 并重写了 getPreferredRect 方法，让轨道的宽度和 Slider一样。代码写好了，那就试试将下面原先的代码
trackShape: RectangularSliderTrackShape(), // 轨道形状，可以自定义
改为我们刚刚自定义的 FullWidthTrackShape
trackShape: FullWidthTrackShape(), // 轨道形状，可以自定义
来看看效果怎么样，如下图，轨道的宽度和 Slider 一样了，是不是很开心。
Slider，如何沿垂直方向滑动？
告别了上面一个小难题，我现在要讲讲如何让 Slider 沿垂直方向滑动。在你看过所有关于 Slider 组件使用的教程中，基本都是一个组件从左滑到右，滑到全文结束。本文希望从不一样的角度来讲解该如何让 Slider 沿垂直方向滑动。
方法其实很简单，利用 RotatedBox 旋转组件就行了，这个组件很简单，被它包裹的组件可以沿中心轴顺时针旋转，最小旋转角度是90°，即 1/4 圈。来看看下面的代码，顺时针旋转了 3/4 圈，Slider 就可以从下到上沿垂直方向滑动了。读者到这应该可以得到一个启发，在 flutter 中，各种组件的合理组合使用，可以实现意想不到的效果。
body: RotatedBox(
quarterTurns: 3, // 顺时针旋转 3/4 圈
child: SliderTheme(
data: SliderTheme.of(context).copyWith(
trackHeight: 10, // 轨道高度
trackShape: FullWidthTrackShape(), // 轨道形状，可以自定义
activeTrackColor: Colors.blueGrey, // 激活的轨道颜色
inactiveTrackColor: Colors.black26, // 未激活的轨道颜色
thumbShape: RoundSliderThumbShape( // 滑块形状，可以自定义
enabledThumbRadius: 30 // 滑块大小
),
thumbColor: Colors.white, // 滑块颜色
overlayShape: RoundSliderOverlayShape( // 滑块外圈形状，可以自定义
overlayRadius: 50, // 滑块外圈大小
),
overlayColor: Colors.black54, // 滑块外圈颜色
valueIndicatorShape: PaddleSliderValueIndicatorShape(), // 标签形状，可以自定义
activeTickMarkColor: Colors.red, // 激活的刻度颜色
),
child: Slider(
value: _value,
min: 0,
max: 100,
divisions: 10,
label: '$_value',
onChanged: (v){
setState(() {
_value = v;
});
},
),
),
)
写在最后
其实网上有大把介绍组件使用的书籍和教程，甚至有很多开源的组件项目来学习，读者可以从这些书籍中获取它们基本的使用方法。但是这些基础知识在项目中就真的够用了吗？答案肯定是不够用，在项目开发过程中，你会遇到各种各样的问题，这都要需要你从现有的工具来找出问题的解决方法，所以很多时候并不是代码能力上的差异，更多时候是想问题的角度和思维方式。
如果你对我感兴趣，请移步到 blogss.cn ， 或关注公众号：程序员小北，进一步了解。
- 如果本文帮助到了你，欢迎点赞和关注 ❤️
- 由于作者水平有限，文中如果有错误，欢迎在评论区指正 ✔️
- 本文首发于掘金，未经许可禁止转载 ©️
