【Flutter 專題】121 圖解簡易 Slider 滑動條

阿策小和尚發表於2021-06-01
Flutter圖解IDE

    小菜在業務開發過程中會自定義 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 瞭解還不夠深入；如有錯誤，請多多指導！

來源： 阿策小和尚

相關文章