QT音乐播放器①----项目创建、窗体Icon、顶部工具栏

原创已于 2025-11-14 20:43:50 修改 · 877 阅读

31 ·

CC 4.0 BY-SA版权

文章标签：

#qt #开发语言 #Quick #QML

于 2025-09-15 14:23:52 首次发布

简介：

基于QT5.12版本的Quick QML项目----恋羽音乐播放器

下一讲链接：https://blog.csdn.net/2301_80668528/article/details/151716658

PS：如有错误，欢迎指出^\/^

原视频出处：https://b23.tv/gFnMsLg

一、项目创建

1.文件->新建文件或项目->选择“QT Quick Application - Empty”->choose

2.文件命名，选择存放的文件路径->下一步

注意：文件名和文件路径均不能出现中文及空格！！！

下一步

可全部勾选->下一步：

完成

创建成功：

Ctrl+R运行程序：

3.在main.qml中修改窗口大小

width:750

height:500

Window {
    visible: true
    width: 800
    height: 500
    title: qsTr("Hello World")
}

Ctrl+R运行程序：

4.修改窗口名为“Music Player”

title: qsTr("Music Player")

5.重命名main.cpp为“App.cpp”

原因：今后添加很多别的文件时，以main命名的文件不容易找到，这样改可使main文件始终都在文件夹顶端，便于查找

右键main.cpp->Rename

“Yes”

命名成功：

在App.cpp文件中将

const QUrl url(QStringLiteral("qrc:/main.qml"));

改成：

const QUrl url(QStringLiteral("qrc:/App.qml"));

二、修改图标logo

1.在工程文件目录下创建文件夹，命名“images”，用于存放图标：

在浏览器搜索“阿里巴巴矢量图标库”，找需要的图标：

阿里巴巴矢量图标库链接：https://www.iconfont.cn/

下载时选择PNG下载：

2.给图标重命名，复制粘贴到image文件夹：

注意：重命名图标时不能出现中文和空格

3.右键“Resources”,点击“Add New”

选择“Qt”->"Qt Resource File"->choose：

命名为“images”->下一步：

->完成：

点击Add Prefix：

删除前缀名：

点击Add Files：

双击进入images文件夹:

Ctrl+A 全选->"打开"：

图标添加成功：

4.添加窗体logo

进入.cpp文件，包含头文件QIcon：

#include <QIcon>

右键musicLogo,点击"Copy Path":/images/musicLogo.png""复制logo路径：

在main函数中添加代码行，将路径粘贴至QIcon()函数中：

//添加logo
    app.setWindowIcon(QIcon(":/images/musicLogo.png"));

Ctrl+R运行：

logo显示正常

三、顶部工具栏设计

1.进入.qml文件中，添加：

import QtQuick.Controls 2.5
import QtQuick.Layouts 1.3  //布局

将第六行的Window改成ApplicationWindow，以便添加其他组件：

ApplicationWindow {
    visible: true
    width: 750
    height: 500
    title: qsTr("Music Player")
}

2.添加顶部工具栏代码

ApplicationWindow
{
    visible: true
    width: 750
    height: 500
    title: qsTr("Music Player")

    /* 工具栏 */
    ToolBar
    {
        //工具栏适应窗体的总宽度
        width:parent.width
        Layout.fillWidth: true

        /* 水平布局 */
        RowLayout
        {
            //子元素的所有边缘（左、右、上、下）自动与父元素或参照元素的相应边缘对齐
            anchors.fill:parent

            /* 按键:音乐Logo */
            ToolButton
            {
                //添加icon
                icon.source: "qrc:/images/musicLogo.png"
                width: 32   //宽度
                height:32   //高度
            }
            /* 按键：关于 */
            ToolButton
            {
                icon.source: "qrc:/images/aboutBlack.png"
                width: 32
                height:32
            }
            /* 按键：电源 */
            ToolButton
            {
                icon.source: "qrc:/images/power.png"
                width: 32
                height:32
            }
        }
    }
}

Ctrl+R运行：

加入Item，使按键紧密一点分布：

在RowLayout中按键代码后面，加入以下代码：

Item
{
    Layout.fillWidth: true
    height:32
}

Ctrl+R运行：

3.添加按键“全屏（黑色）”

/* 按键：全屏（黑） */                                             
ToolButton                                                 
{                                                          
    icon.source: "qrc:/images/full_screenBlack.png"        
    width: 32                                              
    height:32                                              
}

4.将按键布局在窗体两侧，添加Item文本“恋羽Music”，设置字体“微软雅黑”

只需要将Item放在正中间，即可实现按键在窗体中间的紧密排布：

/* 工具栏 */                                                                    
ToolBar                                                                      
{                                                                            
    //工具栏适应窗体的总宽度                                                            
    width:parent.width                                                       
    Layout.fillWidth: true                                                   
                                                                             
    /* 水平布局 */                                                               
    RowLayout                                                                
    {                                                                        
        //子元素的所有边缘（左、右、上、下）自动与父元素或参照元素的相应边缘对齐                                
        anchors.fill:parent                                                  
                                                                             
        /* 按键:音乐Logo */                                                      
        ToolButton                                                           
        {                                                                    
            //添加icon                                                         
            icon.source: "qrc:/images/musicLogo.png"                         
            width: 32   //宽度                                                 
            height:32   //高度                                                 
        }                                                                    
        /* 按键：关于 */                                                          
        ToolButton                                                           
        {                                                                    
            icon.source: "qrc:/images/aboutBlack.png"                        
            width: 32                                                        
            height:32                                                        
        }                                                                    
                                                                             
        Item                                                                 
        {                                                                    
            Layout.fillWidth: true                                           
            height:32                                                        
            //设置文本                                                           
            Text                                                             
            {                                                                
                anchors.centerIn:parent        //将Item放在父类中心位置               
                text: qsTr("恋羽Music");        //设置Item文本                     
                font.family: "微软雅黑"          //设置字体                          
            }                                                                
        }                                                                    
                                                                             
        /* 按键：全屏（黑） */                                                       
        ToolButton                                                           
        {                                                                    
            icon.source: "qrc:/images/full_screenBlack.png"                  
            width: 32                                                        
            height:32                                                        
        }                                                                    
        /* 按键：电源 */                                                          
        ToolButton                                                           
        {                                                                    
            icon.source: "qrc:/images/power.png"                             
            width: 32                                                        
            height:32                                                        
        }                                                                                                                                           
    }                                                                        
}

Ctrl+R运行：

5.设置顶部工具栏背景色为透明色

在代码

ToolBar

{

}

之中加入

//设置背景色为透明色          
background: Rectangle
{                    
    color:"#00000000"
}

Ctrl+R运行：

6.设置按键背景色为透明色

在

ToolButton

{

}

中加入代码

background: transparent

如：

ToolButton                                   
{                                            
    icon.source: "qrc:/images/aboutBlack.png"
    width: 32                                
    height:32                                
    background: transparent                  
}

Ctrl+R运行：

测试结果符合预期

至此，QT Quick QML项目音乐播放器----第①部分完结