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

阿策小和尚發表於2021-06-01

    小菜在業務開發過程中會自定義 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));
複製程式碼

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));
複製程式碼

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 是把 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));
複製程式碼

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));
複製程式碼

SliderTheme

     Slider 的主題效果可以通過 SliderThemeThemeData.sliderTheme 中獲取更新,相較於 Slider 只提供已滑動和未滑動顏色效果,屬性粒度更細;

SliderThemeData

1. activeTrackColor & inactiveTrackColor

    activeTrackColorinactiveTrackColor 分別對應 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

    trackHeightSlider 軌道高度;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 瞭解還不夠深入;如有錯誤,請多多指導!

來源: 阿策小和尚

相關文章