Flutter學習-9-5 Slider和RangeSlider

 一、slider滑動軸。

slider是滑動軸，在使用時可以利用滑動方式取值，可以再利用這取出的值，操控諸如音樂播放器等元素。Slider的屬性及方法如下:

const Slider({
  Key? key,
  required this.value,  //Slider的值，這裡的值會對應到滑動軸上的位置
  required this.onChanged,// 改變時的回調
  this.onChangeStart,  //在剛點下去要做的回調
  this.onChangeEnd,  //在點選結束後要做的回調
  this.min = 0.0,  //可設定slider的最小值
  this.max = 1.0,  //可設定slider的最大值
  this.divisions,  //每一格滑動的區間
  this.label,  //在滑動軸要顯現的文字，
  this.activeColor,  //已滑過的軌道顏色
  this.inactiveColor, //未滑過的軌道顏色
  this.thumbColor,
  this.mouseCursor,
  this.semanticFormatterCallback,
  this.focusNode,
  this.autofocus = false,

範例:

宣告value

double _rangeValues2=0;

程式

Slider(
  value: _rangeValues2,
  min: 0, // 範圍最小值
  max: 100, // 範圍最大值
  // 每次滑動的刻度
  divisions: 10,
  onChangeStart: (value){  //滑動開始時
    print('滑動開始的$value');
  },
  onChangeEnd: (value){  //滑動開始時
    print('滑動結束的$value');
  },
  label: "現在的數值是$_rangeValues2", // 文字標籤
  activeColor: Colors.blue, //已滑過的軌道顏色
  inactiveColor: Colors.grey, //未滑過的軌道顏色
  onChanged: (value){ // 滑動時的回調
    setState(() {
      print('滑動中的$value');
      _rangeValues2 = value;
    });
  },
),

二、RangeSlider(有起始點和結束點的滑動軸)

參數跟Slider基本相同。在宣告value，要給一個範圍值，前面的是最小的數值，後面最大的數輦。

RangeSlider({
  Key? key,
  required this.values,
  required this.onChanged,
  this.onChangeStart,
  this.onChangeEnd,
  this.min = 0.0,
  this.max = 1.0,
  this.divisions,
  this.labels,
  this.activeColor,
  this.inactiveColor,
  this.semanticFormatterCallback,

範例:

宣告value方法

RangeValues _rangeValues = RangeValues(0, 100);

程式寫法

RangeSlider(
  values: _rangeValues,
  max: 100,
  //最大值
  divisions: 10,
  //間隔
  labels: RangeLabels(
      '开始：${_rangeValues.start}', '结束：${_rangeValues.end}'),
  //區間範圍的文字說明
  onChanged: (value) {
    setState(() {
      _rangeValues = value;
    });
  },
),

上面提供了兩種方法，只是大部分人在使用時，都會想要設計更適合程式需要的滑動軸畫面，顯然上面提供的方法，不足以達到這個目的。因此就有了SliderTheme，以便自己客製化設計出精美的滑動軸。SliderTheme的屬性及方法有下列兩項:

Key? key,
required this.data,
required Widget child,

data是調整Theme的屬性，而child跟上面一樣，是主要設計slider的地方。

track 指軌道，tumbe指姆指按下要拉動的控點整體(滑塊)，TickMark(刻度線)

ValueIndicator為包裹說明文字的容器。

const SliderThemeData({
  this.trackHeight,  //滑動軸的高度
  this.activeTrackColor,  //已執行過滑動軌道顏色
  this.inactiveTrackColor,  //未執行過滑動軌道顏色
  this.disabledActiveTrackColor,  //onchanged value值等於null時，已執行過滑動的軌道顏色
  this.disabledInactiveTrackColor, //onChanged value值等於null時，未執行過滑動的軌道顏色
  this.activeTickMarkColor,  //滑動過部分刻度線的顏色
  this.inactiveTickMarkColor,  //未滑動過部分刻度線的顏色
  this.disabledActiveTickMarkColor, //null時,滑動部分，刻度線的顏色
  this.disabledInactiveTickMarkColor, //null時,未滑動部分，刻度線的顏色
  this.thumbColor,  //未滑動時滑塊的顏色
  this.overlappingShapeStrokeColor, //滑動時周邊的繪製色
  this.disabledThumbColor,  //null時，滑塊的顏色
  this.overlayColor,  //按下去，滑塊周邊的顏色
  this.valueIndicatorColor,  //顯示數劇那個氣泡的顏色
  this.overlayShape,  //控制點的形狀
  this.tickMarkShape,  //刻度線的形狀
  this.thumbShape,  //滑塊的形狀
  this.trackShape, //軌道的形狀
  this.valueIndicatorShape,    ////顯示數劇那個氣泡的形狀
  this.rangeTickMarkShape,  //刻度範圍形狀
  this.rangeThumbShape,  //滑塊範圍形狀
  this.rangeTrackShape,  //軌道範圍形狀
  this.rangeValueIndicatorShape, //
  this.showValueIndicator, //顯示氣泡方式
  this.valueIndicatorTextStyle,
  this.minThumbSeparation, //RangeSlider 的 start 和 end 最小間隔
  this.thumbSelector,
  this.mouseCursor,
});

範例:

SliderTheme(
  data: SliderTheme.of(context).copyWith(
    //.copywith為針對原有部件做部份的修正，這裡是針對SliderTheme做修正
    trackHeight: 6,
    // 軌道高度
    activeTrackColor: Colors.yellowAccent,
    // 已滑動的軌道顏色
    inactiveTrackColor: Colors.blue,
    // 整個軌道的顏色(不包括已滑動的部分)
    thumbColor: Colors.green,
    // 整個拉動控制點的顏色
    activeTickMarkColor: Colors.brown,
    // 刻度的顏色
    overlappingShapeStrokeColor: Colors.black,
    //重疊部份邊線的顏色

    trackShape: RectangularSliderTrackShape(),
    // 軌道形状，這裡是方形
    thumbShape: RoundSliderThumbShape(
        //  滑動控制點的形狀，這裡是圓形
        enabledThumbRadius: 30 // 圓形的半徑
        ),

    overlayColor: Colors.purpleAccent,
    // 滑動控制點外圈的顏色
    overlayShape: RoundSliderOverlayShape(
      // 滑動控制點的形狀
      overlayRadius: 40, // 滑動控制點大小
    ),

    valueIndicatorShape: PaddleSliderValueIndicatorShape(),
    // 包著顯示的標籤形狀
    valueIndicatorColor: Colors.greenAccent,
      showValueIndicator:ShowValueIndicator.onlyForContinuous,  //顯示氣泡的方式

),
  child: Slider(
    value: _Slidervalue,
    min: 0,
    max: 100,
    divisions: 5,
    label: '$_Slidervalue',
    onChanged: (v){
      setState(() {
        _Slidervalue = v;
      });
    },
  ),
),

參考:https://juejin.cn/post/6959703051586240549