upload file

App.cpp

@@ -0,0 +1,26 @@
+#include <QGuiApplication>
+#include <QQmlApplicationEngine>
+#include <QIcon>
+
+
+int main(int argc, char *argv[])
+{
+#if QT_VERSION < QT_VERSION_CHECK(6, 0, 0)
+    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
+#endif
+
+    QGuiApplication app(argc, argv);
+
+    app.setWindowIcon(QIcon(":/images/music.png"));
+
+    QQmlApplicationEngine engine;
+    const QUrl url(QStringLiteral("qrc:/App.qml"));
+    QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
+                     &app, [url](QObject *obj, const QUrl &objUrl) {
+        if (!obj && url == objUrl)
+            QCoreApplication::exit(-1);
+    }, Qt::QueuedConnection);
+    engine.load(url);
+
+    return app.exec();
+}

App.qml

@@ -0,0 +1,40 @@
+//App.qml
+
+import QtQuick 2.12
+import QtQuick.Window 2.12
+import QtQuick.Controls 2.5
+import QtQuick.Layouts 1.3
+
+ApplicationWindow {
+
+    id:window
+
+    property int mWINDOW_WIDTH: 1200
+    property int mWINDOW_HEIGHT: 800
+
+    property string mFONT_FAMILY: "微软雅黑"
+
+
+    width: mWINDOW_WIDTH
+    height: mWINDOW_HEIGHT
+    visible: true
+    title: qsTr("Demo Cloud Music Player")
+
+    ColumnLayout{
+        anchors.fill: parent
+        spacing: 0
+
+        LayoutHeaderView{
+            id:layoutHeaderView
+        }
+
+        PageHomeView{
+            id:pageHomeView
+        }
+
+        LayoutBottomView{
+            id:layoutBottomView
+        }
+    }
+
+}

LayoutBottomView.qml

@@ -0,0 +1,117 @@
+//LayoutBottomView.qml
+
+import QtQuick 2.12
+import QtQuick.Controls 2.5
+import QtQuick.Layouts 1.3
+
+//底部工具栏
+Rectangle{
+    Layout.fillWidth: true
+    height: 60
+    color: "#00AAAA"
+
+    RowLayout{
+        anchors.fill: parent
+
+        Item{
+            Layout.preferredWidth: parent.width/10
+            Layout.fillWidth: true
+        }
+        MusicIconButton{
+            icon.source: "qrc:/images/previous"
+            iconWidth: 32
+            iconHeight: 32
+            toolTip: "上一曲"
+        }
+        MusicIconButton{
+            iconSource: "qrc:/images/stop"
+            iconWidth: 32
+            iconHeight: 32
+            toolTip: "暂停/播放"
+        }
+        MusicIconButton{
+            icon.source: "qrc:/images/next"
+            iconWidth: 32
+            iconHeight: 32
+            toolTip: "下一曲"
+        }
+        Item{
+            Layout.preferredWidth: parent.width/2
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+            Layout.topMargin: 25
+
+            Text{
+                id:nameText
+                anchors.left:slider.left
+                anchors.bottom: slider.top
+                anchors.leftMargin: 5
+                text:"续加仪-续加仪"
+                font.family: "微软雅黑"
+                color: "#ffffff"
+            }
+            Text{
+                id:timeText
+                anchors.right: slider.right
+                anchors.bottom: slider.top
+                anchors.rightMargin: 5
+                text:"00:00/05:30"
+                font.family: "微软雅黑"
+                color: "#ffffff"
+            }
+
+            Slider{
+                id:slider
+                width: parent.width
+                Layout.fillWidth: true
+                height: 25
+                background:Rectangle{
+                    x:slider.leftPadding
+                    y:slider.topPadding+(slider.availableHeight-height)/2
+                    width: slider.availableWidth
+                    height: 4
+                    radius: 2
+                    color: "#e9f4ff"
+                    Rectangle{
+                        width: slider.visualPosition*parent.width
+                        height: parent.height
+                        color: "#73a7ab"
+                        radius: 2
+                    }
+                }
+                handle:Rectangle{
+                    x:slider.leftPadding+(slider.availableWidth-width)*slider.visualPosition
+                    y:slider.topPadding+(slider.availableHeight-height)/2
+                    width: 15
+                    height: 15
+                    radius: 5
+                    color: "#f0f0f0"
+                    border.color: "#73a7ab"
+                    border.width: 0.5
+                }
+            }
+        }
+
+        MusicIconButton{
+            Layout.preferredWidth: 50
+            icon.source: "qrc:/images/favorite"
+            iconWidth: 32
+            iconHeight: 32
+            toolTip: "我喜欢"
+        }
+        MusicIconButton{
+            Layout.preferredWidth: 50
+            icon.source: "qrc:/images/repeat"
+            iconWidth: 32
+            iconHeight: 32
+            toolTip: "重复播放"
+        }
+        Item{
+            Layout.preferredWidth: parent.width/10
+            Layout.fillWidth: true
+        }
+
+    }
+
+}
+

LayoutHeaderView.qml

@@ -0,0 +1,178 @@
+//LayoutHeaderView.qml
+
+import QtQuick 2.12
+import QtQuick.Controls 2.5
+import QtQuick.Layouts 1.3
+import QtQuick.Window 2.12
+
+
+ToolBar{
+    background: Rectangle{
+        color: "#00AAAA"
+    }
+
+    width: parent.width
+    Layout.fillWidth: true
+    RowLayout{
+        anchors.fill: parent
+
+        MusicToolButton{
+            icon.source: "qrc:/images/music"
+            toolTip: "关于"
+            onClicked: {
+                aboutPop.open()
+            }
+        }
+        MusicToolButton{
+            icon.source: "qrc:/images/about"
+            toolTip: "续加仪的博客"
+            onClicked: {
+                Qt.openUrlExternally("https://www.hyz.cool")
+            }
+        }
+        MusicToolButton{
+            id:smallWindow
+            iconSource: "qrc:/images/small-window"
+            toolTip: "小窗播放"
+            onClicked: {
+                setWindowSize(330,650)
+                smallWindow.visible=false
+                normalWindow.visible=true
+            }
+        }
+        MusicToolButton{
+            id:normalWindow
+            iconSource: "qrc:/images/exit-small-window"
+            toolTip: "退出小窗播放"
+            visible: false
+            onClicked: {
+                setWindowSize()
+                normalWindow.visible=false
+                smallWindow.visible=true
+            }
+        }
+        Item{
+            Layout.fillWidth: true
+            height: 32
+            Text {
+                anchors.centerIn: parent
+                text: qsTr("续加仪")
+                font.family: window.mFONT_FAMILY
+                font.pointSize: 15
+                color:"#ffffff"
+            }
+        }
+        MusicToolButton{
+            icon.source: "qrc:/images/minimize-screen"
+            toolTip: "最小化"
+            onClicked: {
+                window.hide()
+            }
+        }
+        MusicToolButton{
+            id:resize
+            icon.source: "qrc:/images/small-screen"
+            toolTip: "退出全屏"
+            visible: false
+            onClicked: {
+                setWindowSize()
+                window.visibility = Window.AutomaticVisibility
+                maxWindow.visible = true
+                resize.visible = false
+            }
+        }
+        MusicToolButton{
+            id:maxWindow
+            icon.source: "qrc:/images/full-screen"
+            toolTip: "全屏"
+            onClicked: {
+                window.visibility = Window.Maximized
+                maxWindow.visible = false
+                resize.visible = true
+            }
+        }
+        MusicToolButton{
+            icon.source: "qrc:/images/power"
+            toolTip: "退出"
+            onClicked: {
+                Qt.quit()
+            }
+        }
+    }
+
+    Popup{
+        id:aboutPop
+
+        topInset: 0
+        leftInset: -2
+        rightInset: 0
+        bottomInset: 0
+
+        parent: Overlay.overlay
+        x:(parent.width-width)/2
+        y:(parent.height-height)/2
+
+        width: 250
+        height: 230
+
+        background: Rectangle{
+            color:"#e9f4ff"
+            radius: 5
+            border.color: "#2273a7ab"
+        }
+
+        contentItem: ColumnLayout{
+            width: parent.width
+            height: parent.height
+            Layout.alignment: Qt.AlignHCenter
+
+            Image{
+                Layout.preferredHeight: 60
+                source: "qrc:/images/music"
+                Layout.fillWidth:true
+                fillMode: Image.PreserveAspectFit
+
+            }
+
+            Text {
+                text: qsTr("续加仪")
+                Layout.fillWidth: true
+                horizontalAlignment: Text.AlignHCenter
+                font.pixelSize: 18
+                color: "#8573a7ab"
+                font.family: window.mFONT_FAMILY
+                font.bold: true
+            }
+            Text {
+                text: qsTr("这是我的Cloud Music Player")
+                Layout.fillWidth: true
+                horizontalAlignment: Text.AlignHCenter
+                font.pixelSize: 16
+                color: "#8573a7ab"
+                font.family:  window.mFONT_FAMILY
+                font.bold: true
+            }
+            Text {
+                text: qsTr("www.hyz.cool")
+                Layout.fillWidth: true
+                horizontalAlignment: Text.AlignHCenter
+                font.pixelSize: 16
+                color: "#8573a7ab"
+                font.family:  window.mFONT_FAMILY
+                font.bold: true
+            }
+        }
+
+
+    }
+
+
+
+    function setWindowSize(width = window.mWINDOW_WIDTH,height = window.mWINDOW_HEIGHT){
+        window.width = width
+        window.height = height
+        window.x=(Screen.desktopAvailableWidth-window.width)/2
+        window.y=(Screen.desktopAvailableHeight-window.height)/2
+    }
+}
+

MusicIconButton.qml

@@ -0,0 +1,34 @@
+//MusicIconButton.qml
+
+import QtQuick 2.12
+import QtQuick.Controls 2.5
+
+Button{
+    property string iconSource: ""
+
+    property string toolTip: ""
+
+    property bool isCheckable:false
+    property bool isChecked:false
+
+    property int iconWidth: 32
+    property int iconHeight: 32
+
+    id:self
+
+    icon.source:iconSource
+    icon.height: iconHeight
+    icon.width: iconWidth
+
+    ToolTip.visible: hovered
+    ToolTip.text: toolTip
+
+    background: Rectangle{
+        color: self.down||(isCheckable&&self.checked)?"#497563":"#20e9f4ff"
+        radius: 3
+    }
+    icon.color: self.down||(isCheckable&&self.checked)?"#ffffff":"#e2f0f8"
+
+    checkable: isCheckable
+    checked: isChecked
+}