qml 音乐播放器的进度条

Posted 2020-11-14 wxmwanggood

进度条采用qml的Slider组件

样式什么的，网上很多。我就不列举了。接下来主要说明，进度条是怎样按秒移动的。

   Slider {

                  id: control

　　　　   value: 0

       stepSize: 0.01
       onValueChanged: {

               txt_time_start.text =formation(control.value)

               txt_time_end.text = formation(maximumValue);

          }
}
//timer启动
   Timer{

        id:time

        running: false

        repeat: true

       // interval: 500

        onTriggered:{

            control.value = control.value + control.stepSize 
　　　　　　}

    }
//取得小数点后两位
     function splitAndRound(num) {

       num = num * Math.pow(10, 2);

        return (Math.round(num)) / (Math.pow(10, 0));

    }
//歌曲的格式都是00：00 为了保持格式因为补0
function formation(controlvalue)

        {

            //补0

              function pad(num, n) {

                  var len = num.toString().length;

                  while(len < n) {

                      num = "0" + num;

                      len++;

                  }

                  return num;

              }

            var min = Math.floor(splitAndRound(controlvalue)/60)

            var sec = splitAndRound(controlvalue)%60

            return(pad(min,2) + ":" + pad(sec,2))

        }
还没有搞清楚的是slider属性。在1.4版本里有maximumValue，minimumValue属性来改变滑块的最大值与最小值。
到了2.3版本变成了from与to。共同点value还是0至1之间的小数。我这里用的是2.3版本。