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 未滑動過程中對應的值，在 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 瞭解還不夠深入；如有錯誤，請多多指導！

來源： 阿策小和尚