Flutter 121: 图解简易 Slider 滑动条

    小菜在业务开发过程中会自定义 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 未滑动过程中对应的值,在 minmax 之间;onChanged 是在滑动过程中回调,当 onChangednullvalue 所在的 minmax 集合范围为空时,Slider 禁止滑动;

var _value01 = 0.0;

return Slider(value: _value01, onChanged: (val) => setState(() => _value01 = val));

Flutter 121: 图解简易 Slider 滑动条

2. min & max

    minmax 为滑动条范围,而 value 的取值范围是在 minmax 之间,无论 value 为正还是负,均需要在 minmax 之间;

var _value02 = 0.0;

return Slider(value: _value02, min: 0.0, max: 100.0,
    onChanged: (val) => setState(() => _value02 = val));

Flutter 121: 图解简易 Slider 滑动条

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));

Flutter 121: 图解简易 Slider 滑动条

4. label & divisions;

    label 为滑动条滑动到某一节点的标签文案;divisions 是把 minmax 等分为 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));

Flutter 121: 图解简易 Slider 滑动条

5. onChangeStart & onChangeEnd

    onChangeStartonChangeEnd 分别对应滑动过程中 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));

Flutter 121: 图解简易 Slider 滑动条

SliderTheme

     Slider 的主题效果可以通过 SliderThemeThemeData.sliderTheme 中获取更新,相较于 Slider 只提供已滑动和未滑动颜色效果,属性粒度更细;

SliderThemeData

1. activeTrackColor & inactiveTrackColor

    activeTrackColorinactiveTrackColor 分别对应 Slider 已滑动过和未滑动过的轨道颜色;

return SliderTheme(
    data: SliderThemeData(activeTrackColor: Colors.pink, inactiveTrackColor: Colors.grey),
    child: _itemSlide06());

Flutter 121: 图解简易 Slider 滑动条

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());

Flutter 121: 图解简易 Slider 滑动条

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());

Flutter 121: 图解简易 Slider 滑动条

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());

Flutter 121: 图解简易 Slider 滑动条

5. trackHeight & trackShape

    trackHeightSlider 轨道高度;trackShape 对应轨道样式,主要再此处进行自定义样式;

trackHeight: 8.0

Flutter 121: 图解简易 Slider 滑动条

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));

Flutter 121: 图解简易 Slider 滑动条


    Slider 案例源码


    小菜本节暂未涉及自定义滑动条样式,对于底层的 Slider 了解还不够深入;如有错误,请多多指导!

来源: 阿策小和尚
上一篇:双11阿里云技术负责人杨旭:大考亦从容


下一篇:.NET数据库编程求索之路--5.使用ADO.NET实现(三层架构篇-使用List传递数据)(3)