01 qt qml Cloud Music Player播放器(适合新手，分多个项目)

-------------------------------演示

目录：

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.3

ApplicationWindow {         //改成appwindpw更容易添加工具
    width: 1200
    height: 800
    visible: true
    title: qsTr("Cloud Music player")

    //窗口区域划分
    ColumnLayout{
        anchors.fill: parent
        spacing: 0         //控件间隙设为0

        //顶部工具栏
        ToolBar{

            //重写背景，实现透明
            background: Rectangle{
                color: "#00AAAA"
            }

            width: parent.width
            Layout.fillWidth: true        //会尽可能地扩展自己的宽度，以充满水平方向上的可用空间(弹性布局)
            //height: 32

            RowLayout{
                anchors.fill: parent

                ToolButton{
                    icon.source:"qrc:/images/music"
                        width: 32;height: 32
                }
                ToolButton{
                    icon.source:"qrc:/images/about"
                        width: 32;height: 32
                }
                ToolButton{
                    icon.source:"qrc:/images/small-screen"
                        width: 32;height: 32
                }

                Item {            //中间文字显示，以及把其他控件向两边弹
                    Layout.fillWidth: true
                    height: 32
                    Text {
                        anchors.centerIn: parent
                        text: qsTr("shuqi")
                        font.family: "微软雅黑"
                        font.pointSize: 15
                    }
                }

                ToolButton{
                    icon.source:"qrc:/images/minimize-screen"
                        width: 32;height: 32
                }
                ToolButton{
                    icon.source:"qrc:/images/full-screen"
                        width: 32;height: 32
                }
                ToolButton{
                    icon.source:"qrc:/images/power"
                        width: 32;height: 32
                }

            }

        }

        //中间区域
        Frame {
            Layout.fillHeight: true
            Layout.preferredWidth: 200        //用于控制元素首选宽度的属性,但布局管理器可以根据其他因素（如布局约束、内容大小等）来确定最终的宽度
            background: Rectangle{
                color: "#f0f0f0"
            }
            padding: 0         //内边距设为0
        }

        //底部工具栏，进度条，按钮
        Rectangle{
            Layout.fillWidth: true
            height: 60
            color: "lightsteelblue"           //测试颜色

            RowLayout{
                anchors.fill: parent

                //占位作用(使按钮更紧凑一点)
                Item {
                    Layout.preferredWidth: parent.width/10
                    Layout.fillWidth: true
                }

                Button{
                    Layout.preferredWidth: 50
                    icon.source: "qrc:/images/previous"
                    icon.width: 32
                    icon.height: 32
                }
                Button{
                    Layout.preferredWidth: 50
                    icon.source: "qrc:/images/stop"
                    icon.width: 32
                    icon.height: 32
                }
                Button{
                    Layout.preferredWidth: 50
                    icon.source: "qrc:/images/next"
                    icon.width: 32
                    icon.height: 32
                }
                //进度条
                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
                        Layout.bottomMargin: 15
                        text: "失去-shiqu"
                    }
                    Text {
                        id:timeText
                        anchors.right: slider.right
                        anchors.bottom: slider.top
                        Layout.bottomMargin: 15
                        text: "00:00/05:30"
                    }

                    Slider{
                        id:slider
                        width: parent.width
                        Layout.fillWidth: true
                        height: 25
                    }
                }
                Button{
                    Layout.preferredWidth: 50
                    icon.source: "qrc:/images/favorite"
                    icon.width: 32
                    icon.height: 32
                }
                Button{
                    Layout.preferredWidth: 50
                    icon.source: "qrc:/images/repeat"
                    icon.width: 32
                    icon.height: 32
                }

                //占位作用
                Item {
                    Layout.preferredWidth: parent.width/10
                    Layout.fillWidth: true
                }

            }

        }

    }

}

---------------------

来自

Qt Quick QML项目实战——Cloud Music Player——01 项目创建_哔哩哔哩_bilibili