QT使用阿里巴巴矢量图标库设置窗口图标、菜单栏项图标、工具栏项图标、状态栏图标以及将控件设置为图标

在阿里巴巴矢量图标库官网上下载图标，具体操作在下方有讲解。

在QT项目中设置图标示例。
我总结了一下需要设置图标的地方大致分为5个，如下：
1. 设置窗口图标（利用setWindowIcon（）属性实现）
2. 设置菜单栏中每一项的图标
3. 设置工具栏中每一项的图标
4. 设置状态栏中每一项的图标
5. 将控件设置为图标（这里以QPushButton控件和QLable控件为例）

先看效果图。

请看具体操作步骤！
1. 打开QT软件，点击“文件”菜单，选择“新建文件或项目（N）”，在弹框中左侧选择“Application”,在右侧选择“Qt Widgets Application”,之后点击右下角的“Choose...”按钮。其他操作按着指示一步一步来就行，最后项目创建成功。

2. 在阿里巴巴矢量图标库中下载图标。

阿里巴巴矢量图标库官网为：https://www.iconfont.cn/

进入官网后，搜索需要的图标，并点击下载，下载PNG格式。

下载成功后，在你的项目文件夹中新建文件夹，并将下载的图标放入此文件夹中。我的图标文件都统一放在了文件夹名为QIcon的文件夹中。

贴心小提示：如果你需要经常用到图标，不妨将所有的图标都放入一个文件夹中，这样不用重复下载了，而且项目需要时，把文件夹复制过去就可以啦！

接下来就可以设置图标啦。

3. 设置窗口图标操作
（1）setWindowTitle属性设置窗口标题

在项目源文件(.cpp)中的构造函数中，输入下方代码。

this->setWindowTitle("设置图标");//窗口标题

（2）setWindowIcon属性设置窗口图标

图标已经准备好啦，要想用到它，还需要最关键的一步，就是将图标放入项目资源中。

操作如下：

鼠标右击项目名，点击“Add New...”，在弹框中选择“Qt”和“Qt Resource File”,资源名随意起，我习惯命名为res，然后一直点下一步。如图所示。

选择文件夹中的所有图标。

出现图标，就说明图标资源已经导入项目中了，接下来，就需要用到这些图标的资源路径。

在需要的图标上鼠标右击，选择“”

路径复制后，回到源文件(.cpp)中，在构造函数中添加如下代码：

this->setWindowIcon(QIcon("://QIcon/xue.png"));//窗口图标

至此，窗口图标设置完成，运行后，界面上就有了标题和图标。

4. 设置菜单栏（QMenuBar）中每一项的图标

（1）在ui设计界面，菜单栏在最顶层，点击“在这里输入”，输入“图标”后，回车。

（2）在QMenuBar（菜单栏）中添加菜单项（QMenu），创建QAction

1）、添加Action操作。

按着上面的步骤，可以添加所有图标。

2）、将创建好的Action添加到菜单项中

此操作只需要，将Action拖到菜单栏的“图标”中即可。

所有图标已经放入到菜单项中。

运行后，效果如下

至此，菜单栏的图标设置已完成。

5. 设置工具栏中每一项的图标

观察下图可以发现，界面中并没有工具栏。那么，就需要手动添加工具栏。

工具栏已经添加成功。

在工具栏中添加图标，与菜单项中添加图标操作一样，只需要拖动Action到工具栏区域即可。

运行之后，效果如下。

至此，工具栏图标设置完成。

6. 将控件设置为图标（这里以QPushButton控件和QLable控件为例）

1）、现在设计界面拖出对应控件，并设置对应类名，在这里就不介绍如何拖动控件了；

2）、在源文件（.cpp）的构造函数中添加以下代码。

    // 2. 给QPushButton控件设置图标QIcon icon1("://QIcon/save.png");//资源文件中对应图标的路径ui->btn1->setIcon(icon1);ui->btn1->resize(20,20);QIcon icon2("://QIcon/clear.png");ui->btn2->setIcon(icon2);ui->btn2->resize(20,20);// 3. 给QLable控件设置图标//图片填充整个区域，此属性必须有，否则不能显示图标ui->label->setScaledContents(true);ui->label->setPixmap(QPixmap(":/QIcon/jian.png"));//设置图标ui->label->resize(20,20);ui->label_2->setScaledContents(true);ui->label_2->setPixmap(QPixmap(":/QIcon/see.png"));ui->label_2->resize(20,20);

运行一下。

7. 设置状态栏中每一项的图标

此功能实现起来比前几个都要麻烦一些。因为在设计界面中状态栏区域不能拖动ACtion，所以需要手动添加代码来实现。

首先声明状态栏对象，然后设置状态栏的类名，之后将状态栏添加到窗口中，接着添加图标的方式就跟在控件中添加图标是一样的。

代码如下：

    // 4. 状态栏设置图标QStatusBar *statusBar = new QStatusBar(this);//声明状态栏对象statusBar->setObjectName(QStringLiteral("statusBar"));//设置状态栏的类名this->setStatusBar(statusBar);//状态栏添加到窗口中QLabel *lab = new QLabel(this);statusBar->addWidget(lab);//将控件添加到状态栏中lab->setScaledContents(true);lab->setPixmap(QPixmap(":/QIcon/save.png"));lab->setMaximumSize(20,20);//设置尺寸QLabel *lab1 = new QLabel(this);statusBar->addWidget(lab1);//将控件添加到状态栏中lab1->move(20,0);//与前一个图标隔开距离lab1->setScaledContents(true);lab1->setPixmap(QPixmap(":/QIcon/clear.png"));lab1->setMaximumSize(20,20);//设置尺寸QLabel *lab2 = new QLabel(this);statusBar->addWidget(lab2);//将控件添加到状态栏中lab2->move(20,0);//与前一个图标隔开距离lab2->setScaledContents(true);lab2->setPixmap(QPixmap(":/QIcon/see.png"));lab2->setMaximumSize(20,20);//设置尺寸QLabel *lab3 = new QLabel(this);statusBar->addWidget(lab3);//将控件添加到状态栏中lab3->move(20,0);//与前一个图标隔开距离lab3->setScaledContents(true);lab3->setPixmap(QPixmap(":/QIcon/jian.png"));lab3->setMaximumSize(20,20);//设置尺寸

运行后，效果如下。

到这里，所有能够设置图标的地方都已经完成。

小伙伴们，动动手试一下吧

附赠源码。

iconfont.pro

QT       += core guigreaterThan(QT_MAJOR_VERSION, 4): QT += widgetsCONFIG += c++11# The following define makes your compiler emit warnings if you use
# any Qt feature that has been marked deprecated (the exact warnings
# depend on your compiler). Please consult the documentation of the
# deprecated API in order to know how to port your code away from it.
DEFINES += QT_DEPRECATED_WARNINGS# You can also make your code fail to compile if it uses deprecated APIs.
# In order to do so, uncomment the following line.
# You can also select to disable deprecated APIs only up to a certain version of Qt.
#DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000    # disables all the APIs deprecated before Qt 6.0.0SOURCES += \main.cpp \icon.cppHEADERS += \icon.hFORMS += \icon.ui# Default rules for deployment.
qnx: target.path = /tmp/$${TARGET}/bin
else: unix:!android: target.path = /opt/$${TARGET}/bin
!isEmpty(target.path): INSTALLS += targetRESOURCES += \res.qrc

icon.h

#ifndef ICON_H
#define ICON_H#include <QMainWindow>QT_BEGIN_NAMESPACE
namespace Ui { class icon; }
QT_END_NAMESPACEclass icon : public QMainWindow
{Q_OBJECTpublic:icon(QWidget *parent = nullptr);~icon();private:Ui::icon *ui;
};
#endif // ICON_H

icon.cpp

#include "icon.h"
#include "ui_icon.h"#include <QLabel>icon::icon(QWidget *parent): QMainWindow(parent), ui(new Ui::icon)
{ui->setupUi(this);// 1. 窗口图标设置this->setWindowTitle("设置图标");//窗口标题this->setWindowIcon(QIcon("://QIcon/xue.png"));//窗口图标// 2. 给QPushButton控件设置图标QIcon icon1("://QIcon/save.png");ui->btn1->setIcon(icon1);ui->btn1->resize(20,20);QIcon icon2("://QIcon/clear.png");ui->btn2->setIcon(icon2);ui->btn2->resize(20,20);// 3. 给QLable控件设置图标//图片填充整个区域，此属性必须有，否则不能显示图标ui->label->setScaledContents(true);ui->label->setPixmap(QPixmap(":/QIcon/jian.png"));ui->label->resize(20,20);ui->label_2->setScaledContents(true);ui->label_2->setPixmap(QPixmap(":/QIcon/see.png"));ui->label_2->resize(20,20);// 4. 状态栏设置图标QStatusBar *statusBar = new QStatusBar(this);//声明状态栏对象statusBar->setObjectName(QStringLiteral("statusBar"));//设置状态栏的类名this->setStatusBar(statusBar);//状态栏添加到窗口中QLabel *lab = new QLabel(this);statusBar->addWidget(lab);//将控件添加到状态栏中lab->setScaledContents(true);lab->setPixmap(QPixmap(":/QIcon/save.png"));lab->setMaximumSize(20,20);//设置尺寸QLabel *lab1 = new QLabel(this);statusBar->addWidget(lab1);//将控件添加到状态栏中lab1->move(20,0);//与前一个图标隔开距离lab1->setScaledContents(true);lab1->setPixmap(QPixmap(":/QIcon/clear.png"));lab1->setMaximumSize(20,20);//设置尺寸QLabel *lab2 = new QLabel(this);statusBar->addWidget(lab2);//将控件添加到状态栏中lab2->move(20,0);//与前一个图标隔开距离lab2->setScaledContents(true);lab2->setPixmap(QPixmap(":/QIcon/see.png"));lab2->setMaximumSize(20,20);//设置尺寸QLabel *lab3 = new QLabel(this);statusBar->addWidget(lab3);//将控件添加到状态栏中lab3->move(20,0);//与前一个图标隔开距离lab3->setScaledContents(true);lab3->setPixmap(QPixmap(":/QIcon/jian.png"));lab3->setMaximumSize(20,20);//设置尺寸
}icon::~icon()
{delete ui;
}

main.cpp

#include "icon.h"#include <QApplication>int main(int argc, char *argv[])
{QApplication a(argc, argv);icon w;w.show();return a.exec();
}

icon.ui

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0"><class>icon</class><widget class="QMainWindow" name="icon"><property name="geometry"><rect><x>0</x><y>0</y><width>800</width><height>600</height></rect></property><property name="windowTitle"><string>icon</string></property><widget class="QWidget" name="centralwidget"><widget class="QPushButton" name="btn1"><property name="geometry"><rect><x>150</x><y>80</y><width>81</width><height>41</height></rect></property><property name="text"><string/></property></widget><widget class="QPushButton" name="btn2"><property name="geometry"><rect><x>150</x><y>160</y><width>81</width><height>41</height></rect></property><property name="text"><string/></property></widget><widget class="QLabel" name="label"><property name="geometry"><rect><x>330</x><y>80</y><width>51</width><height>31</height></rect></property><property name="text"><string>TextLabel</string></property></widget><widget class="QLabel" name="label_2"><property name="geometry"><rect><x>330</x><y>170</y><width>51</width><height>31</height></rect></property><property name="text"><string>TextLabel</string></property></widget></widget><widget class="QMenuBar" name="menubar"><property name="geometry"><rect><x>0</x><y>0</y><width>800</width><height>23</height></rect></property><widget class="QMenu" name="menu"><property name="title"><string>图标</string></property><addaction name="actSave"/><addaction name="actClear"/><addaction name="actQie"/><addaction name="actSee"/></widget><addaction name="menu"/></widget><widget class="QToolBar" name="toolBar"><property name="windowTitle"><string>toolBar</string></property><attribute name="toolBarArea"><enum>TopToolBarArea</enum></attribute><attribute name="toolBarBreak"><bool>false</bool></attribute><addaction name="actSave"/><addaction name="actClear"/><addaction name="actQie"/><addaction name="actSee"/></widget><widget class="QStatusBar" name="statusBar"/><action name="actSave"><property name="icon"><iconset resource="res.qrc"><normaloff>:/QIcon/save.png</normaloff>:/QIcon/save.png</iconset></property><property name="text"><string>保存</string></property><property name="toolTip"><string>保存文件</string></property></action><action name="actClear"><property name="icon"><iconset resource="res.qrc"><normaloff>:/QIcon/clear.png</normaloff>:/QIcon/clear.png</iconset></property><property name="text"><string>清除</string></property><property name="toolTip"><string>清除数据</string></property></action><action name="actQie"><property name="icon"><iconset resource="res.qrc"><normaloff>:/QIcon/jian.png</normaloff>:/QIcon/jian.png</iconset></property><property name="text"><string>剪切</string></property><property name="toolTip"><string>截图</string></property></action><action name="actSee"><property name="icon"><iconset resource="res.qrc"><normaloff>:/QIcon/see.png</normaloff>:/QIcon/see.png</iconset></property><property name="text"><string>观察</string></property><property name="toolTip"><string>观察模式</string></property></action></widget><resources><include location="res.qrc"/></resources><connections/>
</ui>

运行后。

动动手指关注一下吧！

QT使用阿里巴巴矢量图标库设置窗口图标、菜单栏项图标、工具栏项图标、状态栏图标以及将控件设置为图标相关推荐

Qt实现类似Designer中的拖拽效果：从左侧树控件中拖动图标到右侧布局窗口
大家在Qt开发中都用过这样的拖动操作,从左边拖动一个控件到右侧的窗口.或是在其它很多软件使用中,都有把图标通过拖动布置到主画面的操作. 如何实现呢? 先看看Qt帮助中的一个实例: 这个例子自定义了一个 ...
Qt界面优化：Qt窗体控件设置
Qt界面优化:Qt窗体控件设置文章目录 Qt界面优化:Qt窗体控件设置一.效果图 1.鼠标移动点击效果 2. Qt托盘效果二.使用步骤 1. 背景图片的添加 2. 控件样式的更改 3. Qt窗体 ...
Qt 控件设置透明和半透明方法汇总
遇到了好多次控件有需要设置为透明和半透明的情况,每次都是去网上搜一搜,看看别人怎么实现的,浪费了很多时间,故在这里进行一个总结,希望对自己有一个提升. 本文对透明的各种情况进行了分类: 整个窗口及窗口 ...
《LabVIEW 虚拟仪器程序设计从入门到精通（第二版）》一2.3　控件设置
本节书摘来自异步社区<LabVIEW 虚拟仪器程序设计从入门到精通(第二版)>一书中的第2章,第2.3节,作者林静 , 林振宇 , 郑福仁,更多章节内容可以访问云栖社区"异步社 ...
在ListCtrl控件中插入图标
在ListCttrl控件(Report风格)的使用上,有时需要向子列中插入图标,例如要制作一个下载软件,我们计划在控件的第一列用图标的形式显示下载状态:排队.下载中.出错等等,第二列计划用图标显示下载 ...
16、控件使用之图标动画显示和图片动画显示
控件使用之图标动画显示和图片动画显示 1.用到的控件 2.添加控件 2.1.添加[动画图标显示]控件 2.2.添加[增量调节]控件 2.3.添加[动画图片显示]控件 3.保存工程及生成文件 4.下载文 ...
21、控件使用之滚字轮UIC文件的组态和控件设置
控件使用之滚字轮UIC文件的组态和控件设置 1.准备滚字轮图片 2.创建组态图标字库项目 2.1.查看滚字轮图片的分辨率 2.2.创建工程 2.3.添加图片 2.4.设置控件属性 2.5.设置字体高度 ...
您的安全设置不允许网站使用安装在您的计算机上的ActiveX控件的解决方法
电脑是从昨天早晨开始出现这个问题的.打开IE,进入某些网站,就会出现下图所示的情况:在地址栏下弹出一个提示:"您的安全设置不允许网站使用安装在您的计算机上的ActiveX控件--" ...
Android --- BaseQuickAdapter 子控件设置了addOnClickListener(R.id.xxx)；点击的时候还是没反应
正常情况下对控件进行以下操作 helper.addOnClickListener(R.id.rl_feedback); 然后再对控件设置监听事件 // 点击事件myFeedBackAdapter.s ...

QT使用阿里巴巴矢量图标库设置窗口图标、菜单栏项图标、工具栏项图标、状态栏图标以及将控件设置为图标

QT使用阿里巴巴矢量图标库设置窗口图标、菜单栏项图标、工具栏项图标、状态栏图标以及将控件设置为图标相关推荐

最新文章

热门文章