技術標籤：FlutterflutterSlider進度條滑動條

這裡寫目錄標題

• Slider
• CupertinoSlider

失敗是什麼？沒有什麼，只是更走近成功一步；成功是什麼？就是走過了所有通向失敗的路，只剩下一條路，那就是成功的路。

Slider

普通風格進度條

加粗是必傳引數

 //當前播放視訊進度條進度
  double _slidervalue = 0.0;

  //滑動進度條
  Widget buildSilder
 
() {
    return Row(
      children: [
      //開始文字
        Text(
          "0.0",
          style: TextStyle(fontSize: 14, color: Colors.white),
        ),
        Expanded(
          child: Slider(
            //分段提示 配合divisions使用
            label: "$_slidervalue _slidervalue",

            ///將視訊分為5段 只能滑動到5段上的某個位置
 

            divisions: 5,

            ///已滑動過得顏色
            activeColor: Colors.red,

            ///未滑動的顏色
            inactiveColor: Colors.cyan,

            ///預設為0.0。必須小於或等於[最大值]
            ///如果[max]等於[min]，則滑塊被禁用。
            min:  0,

            ///預設為1.0。必須大於或等於[min]。
            ///如果[max]等於[min]，則滑塊被禁用。
            max: 1,

            ///當前進度 取值(0 - 1)
            value: _slidervalue,

            //進度條進度 返回值為(0-1)
            onChanged: (double value) {
              setState(() {
                _slidervalue = value;
              });
            },
            //滑動開始回撥
            onChangeStart: (double value){
              Toast.toast(context,msg: "滑動開始$value");
            },
            //滑動結束回撥
            onChangeEnd: (double value){
              Toast.toast(context,msg: "滑動結束$value");
            },
          ),
        ),
        //結束文字
        Text(
          "0.0",
          style: TextStyle(fontSize: 14, color: Colors.white),
        ),
      ],
    );
  }

效果圖(1.1)

CupertinoSlider

蘋果風格滑動條

加粗是必傳引數

/// 蘋果風格滑動條
  Widget initCupertinoSlider() {
    return CupertinoSlider(
      // ///將視訊分為5段 只能滑動到5段上的某個位置
      divisions: 5,

      ///已滑動過得顏色
      activeColor: Colors.red,

      ///未滑動的顏色
      thumbColor: Colors.cyan,

      ///預設為0.0。必須小於或等於[最大值]
      ///如果[max]等於[min]，則滑塊被禁用。
      min: 0,

      ///預設為1.0。必須大於或等於[min]。
      ///如果[max]等於[min]，則滑塊被禁用。
      max: 1,

      ///當前進度 取值(0 - 1)
      value: _slidervalue,

      //進度條進度 返回值為(0-1)
      onChanged: (double value) {
        setState(() {
          _slidervalue = value;
          //拖動進度條改變視訊長度
        });
      },
      //滑動開始回撥
      onChangeStart: (double value) {
        Toast.toast(context, msg: "滑動開始$value");
      },
      //滑動結束回撥
      onChangeEnd: (double value) {
        Toast.toast(context, msg: "滑動結束$value");
      },
    );
  }

效果圖(1.2):

用到Demo:

Flutter 小知識:ListView播放視訊列表(二)

原創不易,您的點贊就是對我最大的支援,留下您的點贊吧~