Flutter 121: 图解简易 Slider 滑动条

2021-08-25 19:51:20

小菜在业务开发过程中会自定义 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 对应轨道样式，主要再此处进行自定义样式；

trackHeight: 8.0

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 了解还不够深入；如有错误，请多多指导！

来源：阿策小和尚

码农公寓