音乐播放器2.0版--QT动画制作（二十）

alltolove

效果：


功能增加了播放进度和音量调节，再往后的3.0版更新我不想做了，其实还可以有很多功能，比如多曲播放和现实时间长度，这都没什么难度，希望有志人士能继续研究。
还有视频播放器也跟这个原理差不多，我以后就不讲了
main.qml文件：

1. import QtQuick 2.5
   
2. import QtQuick.Controls 1.3
   
3. import QtQuick.Dialogs 1.0
   
4. import QtMultimedia 5.0
   
5. ApplicationWindow {
   
6.     visible: true
   
7.     width: 300
   
8.     height: 250
   
9.     title: qsTr("Hello World")
   
10.     Action{
    
11.         id:open
    
12.         text:"open"
    
13.         onTriggered:fg.open()
    
14.     }
    
15. menuBar:MenuBar{
    
16.     Menu{
    
17.         title: qsTr("File")
    
18.         MenuItem{
    
19.             action: open
    
20.         }
    
21.         MenuItem {
    
22.                         text: qsTr("Exit")
    
23.                         onTriggered: Qt.quit();//退出程序
    
24.                     }
    
25.     }
    
26. 
    
27. }
    
28. FileDialog{
    
29.      id:fg
    
30.      onAccepted: main.rect.music.source=fg.fileUrl
    
31. }
    
32.     MainForm {
    
33.         id:main
    
34.         anchors.fill: parent
    
35. 
    
36.     }
    
37. }
    

复制代码

MainForm.ui.qml文件：

1. import QtQuick 2.5
   
2. import QtQuick.Controls 1.3
   
3. Rect{
   
4.     property alias rect: rect
   
5.     id:rect
   
6.     anchors.centerIn: parent
   
7. }
   

复制代码

Rect.qml文件：

1. import QtQuick 2.0
   
2. import QtMultimedia 5.0
   
3. import QtQuick.Controls 1.0
   
4. import QtQuick.Controls.Styles 1.0
   
5. 
   
6. Item{
   
7.    property alias music:music
   
8.     MediaPlayer{
   
9.         id:music
   
10.         loops:MediaPlayer.Infinite//无限循环播放
    
11.         autoPlay: false//自动播放设定为假
    
12.     }
    
13. Column{
    
14.     anchors.centerIn: parent
    
15.     spacing: 20
    
16.     Row{
    
17.         spacing: 20
    
18.     Button{
    
19.     id:btn
    
20.     text:"play"
    
21.     style:button
    
22.     onClicked: music.play()//开始播放
    
23.     }
    
24.     Button{
    
25.     id:btn1
    
26.     text:"pause"
    
27.     style: button
    
28.     onClicked: music.pause()//暂停播放
    
29.     }
    
30.     }
    
31.     /*播放进度*/
    
32.     Slider{id:progress;maximumValue: music.duration}
    
33.     Row{
    
34.         Text{text:"volume:"}
    
35.         Slider{id:s;style:slider;value: maximumValue/2}
    
36.     }
    
37. }
    
38. Text{anchors.bottom: parent.bottom;text:"鱼C工作室制作"}
    
39.     property Component button:ButtonStyle{
    
40.     background: Rectangle{
    
41.         implicitHeight: 70
    
42.         implicitWidth: 100
    
43.         radius: 5
    
44.         border.width: 2
    
45.         border.color: "gray"
    
46.         /*当控件按下时颜色为灰，否则为白*/
    
47.         color:control.pressed?"darkgray":"white"
    
48.     }
    
49. }
    
50. function sound()
    
51. {
    
52.     music.volume=s.value;
    
53. }
    
54. function position()
    
55. {
    
56.     progress.value=music.position;
    
57. }
    
58. property Component slider: SliderStyle{//给声音大小的滑动条设定样式
    
59.     handle:Rectangle{
    
60.         width:10
    
61.         height: 10
    
62.         radius:2
    
63.         color: control.pressed?"darkgray":"gray"
    
64.     }
    
65. }
    
66. Connections{//改变声音
    
67.     target:s
    
68.     onValueChanged: sound()
    
69. }
    
70. Connections{//让滑动条进度跟随播放进度
    
71.     target:music
    
72.     onPositionChanged:position()
    
73. }
    
74. Connections{//滑条手动拖动时，播放进度跟着改变
    
75.     target:progress
    
76.     onValueChanged:music.seek(progress.value)
    
77. }
    
78. }
    

复制代码

Preview: 明天我们介绍Socket网络通信

不二如是

终于有点播放器的样子了。。。

不二如是

这么快就到socket！！！

alltolove

不二如是 发表于 2017-3-11 09:18
终于有点播放器的样子了。。。

嫌我做的丑吧

不二如是

alltolove 发表于 2017-3-11 10:09
嫌我做的丑吧

至少有播放键了，，，

alltolove

不二如是 发表于 2017-3-11 09:19
这么快就到socket！！！

我是讲QML模式下的，不是QWiget网络编程，QWiget其它没讲完的你还是继续讲吧

wei_Y

一直有个问题，怎么知道QML的版本是多少。

alltolove

wei_Y 发表于 2017-3-11 14:17
一直有个问题，怎么知道QML的版本是多少。

应该就是QT的版本吧

wei_Y

alltolove 发表于 2017-3-11 14:54
应该就是QT的版本吧

额，我是说QtQuick这类在导入时怎么确定他的版本。。