1. 基本介紹

Slider 是一個常見的進度條控制器按摘。

2. 示例代碼

代碼下載地址誊锭。如果對你有幫助的話記得給個關(guān)注，代碼會根據(jù)我的 Flutter 專題不斷更新脖母。

3. Slider 屬性介紹

Slider屬性	介紹
value	@required 當(dāng)前 Slider 滑塊位置的值，注意不可以超出 min 和 max 的范圍饮戳，否則會報錯
onChanged	@required 正在滑動或者點擊豪治，未松手
onChangeStart	剛開始點擊
onChangeEnd	滑動或者點擊結(jié)束，已松手
min	最小值莹捡，默認為 0.0
max	最大值鬼吵，默認為 1.0
label	氣泡文本
divisions	刻度數(shù)量扣甲，沒有刻度時篮赢，label 不展示
mouseCursor	鼠標(biāo)光標(biāo)
activeColor	滑塊顏色
inactiveColor	軌道顏色
semanticFormatterCallback	語義標(biāo)簽回調(diào)
focusNode	焦點控制，Flutter 組件之 FocusNode 詳解
autofocus	自動聚焦琉挖，默認為 false

SliderThemeData屬性 | 介紹
trackHeight | 軌道高度

activeTrackColor | 滑塊左側(cè)軌道顏色启泣，

紅色部分軌道.png

inactiveTrackColor | 滑塊右側(cè)側(cè)軌道顏色，

灰色部分軌道.png

disabledActiveTrackColor | slider 不可用（onChanged = null）時示辈，滑塊左側(cè)軌道顏色寥茫，位置與 activeTrackColor 相同
disabledInactiveTrackColor | slider 不可用（onChanged = null）時，滑塊右側(cè)軌道顏色矾麻，位置與 inactiveTrackColor 相同

activeTickMarkColor | 滑塊左側(cè)刻度顏色纱耻，

滑塊左側(cè)黑點.png

inactiveTickMarkColor | 滑塊右側(cè)刻度顏色，

滑塊右側(cè)紅點.png

disabledActiveTickMarkColor | slider 不可用（onChanged = null）時险耀，滑塊左側(cè)刻度顏色弄喘，位置與 activeTickMarkColor 相同
disabledInactiveTickMarkColor | slider 不可用（onChanged = null）時，滑塊右側(cè)刻度顏色甩牺，位置與 inactiveTickMarkColor 相同
thumbColor | 滑塊顏色
overlappingShapeStrokeColor | 滑塊按下去時周邊繪制顏色蘑志，很少用

disabledThumbColor | slider 不可用（onChanged = null）時，滑塊顏色

overlayColor | 滑塊按下去時周邊顏色贬派，

黃色部分.png

紅色氣泡.png

rangeTickMarkShape | RangeSlider 刻度形狀
rangeThumbShape | RangeSlider 滑塊形狀
rangeTrackShape | RangeSlider 軌道形狀
rangeValueIndicatorShape | RangeSlider 氣泡形狀
showValueIndicator | 氣泡顯示方式波桩，默認為 ShowValueIndicator.onlyForDiscrete
valueIndicatorTextStyle | 氣泡文本TextStyle
minThumbSeparation | RangeSlider 的 start 和 end 最小間隔
thumbSelector | RangeSlider 滑塊選擇器，默認選擇最近的请敦，可以通過這個自定義突委，例如點擊軌道中間左側(cè)的點就選擇左側(cè)滑塊改變 start 值，點擊軌道中間點右側(cè)冬三，就選擇 end 值匀油。

4. Slider 詳解

4.1 容器創(chuàng)建

import 'package:flutter/material.dart';

class FMSliderVC extends StatefulWidget{
  @override
  FMSliderState createState() => FMSliderState();
}

class FMSliderState extends State <FMSliderVC> {
  @override
  double sliderValue = 0;
  String sliderText = "還沒操作";

  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(title: Text("Slider"),),
      body: Center(
        child: Column(
          children: [
            Padding(padding: EdgeInsets.all(30)),
            _slider(),
            Text(sliderText),
          ],
        ),
      ),
    );
  }


  Slider _slider(){
    return Slider(
      value: sliderValue,
      max: 100,
      onChanged: (value){
        print("onChanged : $value");
        updateSlider(value, "onChanged : $value");
      },
      onChangeStart: (value){
        print("onChangeStart : $value");
        updateSlider(value, "onChangeStart : $value");
      },
      onChangeEnd: (value){
        print("onChangeEnd : $value");
        updateSlider(value, "onChangeEnd : $value");
      },
    );
  }

  void updateSlider(value, text){
    sliderValue = value;
    sliderText = text;

    setState(() {

    });
  }
}

4.2 事件捕捉

事件	描述
onChanged	正在滑動或者點擊，未松手
onChangeStart	剛開始點擊
onChangeEnd	滑動或者點擊結(jié)束勾笆，已松手

Slider normal.gif

4.3 顏色

  Slider _slider(){
    return Slider(
      value: sliderValue,
      max: 100,
      activeColor: Colors.red,
      inactiveColor: Colors.yellow,

      onChanged: (value){
        print("onChanged : $value");
        updateSlider(value, "onChanged : $value");
      },
      onChangeStart: (value){
        print("onChangeStart : $value");
        updateSlider(value, "onChangeStart : $value");
      },
      onChangeEnd: (value){
        print("onChangeEnd : $value");
        updateSlider(value, "onChangeEnd : $value");
      },
    );
  }

顏色	介紹
activeColor	滑塊顏色敌蚜，此處設(shè)置為紅色
inactiveColor	軌道顏色，此處設(shè)置為黃色

Slider colors.png

4.4 值區(qū)間

slider 使用 min 與 max 來設(shè)置最小值與最大值窝爪。

值	介紹
min	最小值弛车，默認為 0.0
max	最大值齐媒，默認為 1.0

  double sliderValue = 100;

  Slider _slider(){
    return Slider(
      value: sliderValue,
      activeColor: Colors.red,
      inactiveColor: Colors.yellow,

      min: 100,
      max: 500,

      onChanged: (value){
        print("onChanged : $value");
        updateSlider(value, "onChanged : $value");
      },
      onChangeStart: (value){
        print("onChangeStart : $value");
        updateSlider(value, "onChangeStart : $value");
      },
      onChangeEnd: (value){
        print("onChangeEnd : $value");
        updateSlider(value, "onChangeEnd : $value");
      },
    );
  }

Slider min.png

Slider max.png

4.5 氣泡與刻度

屬性	介紹
label	氣泡文本
divisions	刻度數(shù)量，沒有刻度時纷跛，label 不展示

  Slider _slider(){
    return Slider(
      value: sliderValue,
      activeColor: Colors.red,
      inactiveColor: Colors.yellow,

      min: 100,
      max: 500,

      label: "氣泡 $sliderValue",
      divisions: 10,

      onChanged: (value){
        print("onChanged : $value");
        updateSlider(value, "onChanged : $value");
      },
      onChangeStart: (value){
        print("onChangeStart : $value");
        updateSlider(value, "onChangeStart : $value");
      },
      onChangeEnd: (value){
        print("onChangeEnd : $value");
        updateSlider(value, "onChangeEnd : $value");
      },
    );
  }

Slider label.gif

5. SliderThemeData 進階之自定義樣式

5.1 Slider 處理

  double sliderValue = 100;
  double sliderEndValue = 300;
  String sliderText = "還沒操作";

  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(title: Text("Slider"),),
      body: Center(
        child: Column(
          children: [
            Padding(padding: EdgeInsets.all(30)),
            _slider(),
            Text(sliderText),
            _sliderTheme(context),
          ],
        ),
      ),
    );
  }

  SliderTheme _sliderTheme(context){
    return SliderTheme(
        data: SliderThemeData(
          trackHeight: 20,
          activeTrackColor: Colors.red,
          inactiveTrackColor: Colors.grey,
          disabledActiveTrackColor: Colors.yellow,
          disabledInactiveTrackColor: Colors.cyan,
          activeTickMarkColor: Colors.black,
          inactiveTickMarkColor: Colors.red,
          overlayColor: Colors.yellow,
          overlappingShapeStrokeColor: Colors.black,
          overlayShape: RoundSliderOverlayShape(),
          valueIndicatorColor: Colors.red,
          showValueIndicator: ShowValueIndicator.onlyForDiscrete,
          minThumbSeparation: 100,

          rangeTrackShape: RoundedRectRangeSliderTrackShape(),
        ),
        child: Slider(
          value: sliderValue,
          min: 100,
          max: 500,
          divisions: 10,
          label: "氣泡",
          onChanged: (value){
            print("SliderTheme onChanged : $value");
            updateSlider(value, "onChanged : $value");
          },
          onChangeStart: (value){},
        ),
    );
  }

具體屬性參考頂部表格喻括。

SliderTheme slider.gif

5.2 RangeSlider 處理

與 Slider 大同小異，不做贅述了贫奠。

  double sliderValue = 100;
  double sliderEndValue = 300;
  String sliderText = "還沒操作";

  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(title: Text("Slider"),),
      body: Center(
        child: Column(
          children: [
            Padding(padding: EdgeInsets.all(30)),
            _slider(),
            Text(sliderText),
            _sliderTheme(context),
          ],
        ),
      ),
    );
  }


  SliderTheme _sliderTheme(context){
    return SliderTheme(
        data: SliderThemeData(
          trackHeight: 20,
          activeTrackColor: Colors.red,
          inactiveTrackColor: Colors.grey,
          disabledActiveTrackColor: Colors.yellow,
          disabledInactiveTrackColor: Colors.cyan,
          activeTickMarkColor: Colors.black,
          inactiveTickMarkColor: Colors.red,
          overlayColor: Colors.yellow,
          overlappingShapeStrokeColor: Colors.black,
          overlayShape: RoundSliderOverlayShape(),
          valueIndicatorColor: Colors.red,
          // tickMarkShape: RoundSliderTickMarkShape(tickMarkRadius: 10.0),
          showValueIndicator: ShowValueIndicator.onlyForDiscrete,
          minThumbSeparation: 100,

          rangeTrackShape: RoundedRectRangeSliderTrackShape(),
          // rangeThumbShape: RoundRangeSliderThumbShape(enabledThumbRadius: 15, disabledThumbRadius: 15, pressedElevation: 3),
        ),

        child: RangeSlider(
            values: RangeValues(sliderValue, sliderEndValue),
            min: 100,
            max: 500,
            onChanged: (rangeValues){
              sliderValue = rangeValues.start;
              sliderEndValue = rangeValues.end;

              setState(() {

              });
            },
        ),
    );
  }

SliderTheme rangeSlider.gif

6. 技術(shù)小結(jié)

Slider 其實實際用處并不是特別多唬血，多加練習(xí)。
自定義 Slider 其實比較復(fù)雜唤崭，需要仔細研究各個屬性拷恨。

Flutter入門（32）：Flutter 組件之 Slider 詳解