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

最新推荐文章于 2024-04-22 15:09:04 发布
最新推荐文章于 2024-04-22 15:09:04 发布
阅读量3.2k 收藏 38
点赞数 12
分类专栏： Qt c/c++ 文章标签： qt c++
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_49456900/article/details/125170073
版权
c/c++ 同时被 2 个专栏收录
13 篇文章 3 订阅
订阅专栏
Qt
9 篇文章 12 订阅
订阅专栏

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

在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 gui

greaterThan(QT_MAJOR_VERSION, 4): QT += widgets

CONFIG += 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.0

SOURCES += \
    main.cpp \
    icon.cpp

HEADERS += \
    icon.h

FORMS += \
    icon.ui

# Default rules for deployment.
qnx: target.path = /tmp/$${TARGET}/bin
else: unix:!android: target.path = /opt/$${TARGET}/bin
!isEmpty(target.path): INSTALLS += target

RESOURCES += \
    res.qrc

icon.h

#ifndef ICON_H
#define ICON_H

#include <QMainWindow>

QT_BEGIN_NAMESPACE
namespace Ui { class icon; }
QT_END_NAMESPACE

class icon : public QMainWindow
{
    Q_OBJECT

public:
    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>

运行后。

 动动手指关注一下吧！

麦子穗
关注
  • 12
    点赞
  • 踩
  • 38
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
Qt开发常用菜单小图标.zip
12-07
Qt开发过程中会经常用到一些图标，小编收集了大概370多个菜单小图标，包括文件操作、编辑、检索等相关图标，视频播放操作相关图标等，感兴趣的可以下载收藏。
qt包括菜单栏工具栏的小图标主窗口
05-23
编译环境：vs2008，qt4.8.2 效果，显示一个带菜单栏，工具栏的主窗口，以及添加菜单栏触发事件
QT工具栏按钮
huster_xdw的博客
10-25 9114
工具栏按钮： 采用ToolBar直接建立工具栏按钮，一般一排连续的几个按钮可使用一个ToolBar的不同Action进行分配，一个Action对应着一个按钮；若是有两个ToolBar，则之间会有分隔（竖线右侧带点），属于不同的两部分。此外还可以通过toolBar-&gt;addSeparator添加分隔符，将不同操作分开。 按钮的图标可通过Action进行插入，注意图片要先导入资源中，再输入资...
Qt学习_10_纯Ui操作_设置窗口、菜单栏、工具栏、按钮的图标
heqiunong的专栏
03-10 4693
Qt项目，如果功能少，项目小，用代码来配置图标的方式问题不大，无可厚非。但是一旦项目的功能复杂内容很多，用代码来配置图标的方式就显得很冗余，能在ui设计界面完成的工作，尽量就在ui设计界面完成，这样可以使得整个项目看起来更清爽，更规整。这是我更看重的。因此本文介绍，纯用ui设计界面，完成主窗口图标、菜单栏图标、工具栏图标、按钮图标的设置。免费下载图标的网站。
QT设置程序的图标
风暴中心
03-05 384
QT设置程序的图标
Qt使用大图标工具栏、svg格式图标
05-17
Qt使用大图标工具栏、svg格式图标，加载svg图标
Qt设置窗口图标以及程序图标
04-24
Qt程序设置窗口图标以及程序图标 开发环境 Windows + vs2005(已集成Qt) + qt designer 设置应用程序还没打开时，显示的图标。 以及应用程序窗口打开后，窗口显示的图标
Qt 设置窗口图标
weixin_41920367的博客
05-27 1520
鼠标放在Resources上右击，选择在explorer中显示，将图标文件添加到资源文件中。文件 -->新建文件或项目。
Qt添加图标
hw5230的博客
03-03 2806
双击“MainWindow.ui”，在按钮PushButton的属性栏中，选中“icon”，然后再分别可以给按钮在不同状态，通过点击“▼”添加相对应的图标，可以实现图标的切换。再点击“选择资源”或者“选择文件”，点击“Images”，再选中资源文件“mainWindow.jpg”，最后点击“OK”。双击“MainWindow.ui”，在mainWindow的属性栏中，选中“windowIcon”，点击“▼”，“右键项目”---“添加新文件”，选择“Qt类”---再选择“Qt Resource File”
【QT学习】3----设置自定义窗口图标
coxcombryscy的博客
03-28 1020
QT设置自定义窗口图标
QT设置应用程序的图标
热门推荐
weixin_38590041的博客
09-05 1万+
QT设置应用程序的图标
工具菜单栏图标
11-04
菜单栏，工具栏图标，qt中可以用到，应该对qt的学习有所帮助
Qt窗口练习以及图标文件
09-09
Qt窗口编辑文本实现保存 撤销 剪切等功能，带有精美的状态栏图标添加查找菜单的功能。因为本篇还会涉及Qt Creator很多实用功能，所以单独用一篇文章来介绍。以前都用设计器设计界面，而这次我们用代码实现一个简单的查找对话框。除了讲解怎么实现查找功能。
基于QT+C++开发的托盘图标控件+源码
04-18
用法链接：https://menghui666.blog.csdn.net/article/details/137937249?spm=1001.2014.3001.5502 基于QT+C++开发的托盘图标控件+源码 托盘图标控件 可设置托盘图标对应所属主窗体。 可设置托盘图标。 可设置提示信息。 自带右键菜单。
菜单栏图标，工具栏图标icons
05-25
菜单icon，各种icon图标，菜单icon，各种icon图标
Qt实现XYModem协议(五)
flysnow010的博客
04-18 671
XMODEM协议是一种使用拨号调制解调器的个人计算机通信中广泛使用的异步文件运输协议。这种协议以128字节块的形式传输数据，并且每个块都使用一个校验和过程来进行错误检测。使用循环冗余校验的与XMODEM相应的一种协议称为XMODEM-CRC。还有一种是XMODEM-1K，它以1024字节一块来传输数据。YMODEM也是一种XMODEM的实现。它包括XMODEM-1K的所有特征，另外在一次单一会话期间为发送一组文件，增加了批处理文件传输模式。 本文利用C++实现XYModem-1K协议.
【OpenGL实践08】现代渲染管线在GLUT和Pygame和Qt.QOpenGLWidget上各自的实现代码
gongdiwudu的专栏
04-19 897
据说QOpenGLWidget是用来取代QGLWidget的继承者，我们试图将GLUT上的旧代码改成QOpenGLWidget，本以为差别不大，轻易搞定，经实践发现要付出极大努力才能完成。经多次实验发现GLUT窗口、Pygame窗口、Qt.QOpenGLWidget上的实现方法无法兼容，甚至GL方法都不同，经好多天的百度查询，终于总结出各自的实现方法。作文以记录。
在Qt creator中使用多光标
最新发布
m0_61629312的博客
04-22 223
键，并用鼠标左键在文本编辑器中选择多个光标位置。你可以选择多个不同的位置，或者选择整个文件中的所有匹配项。然后，你可以在这些光标位置上同时进行编辑，输入相同或不同的文本，或者进行其他编辑操作。多光标模式允许你在同一时间在多个光标位置进行编辑，从而可以更快地进行一些重复性的编辑操作。Qt Creator 支持多光标模式。2024年4月22日，周一下午。要启用多光标模式，请按住。
如何查看项目中使用的Qt版本
qq_19605587的博客
04-19 425
1.点击左下角电脑按钮查看Qt版本。2.点击左侧栏项目按钮查看Qt版本。
QT 如何设置程序在任务栏中的图标
06-13
在Qt中，可以通过在程序的窗口类中重写`void changeEvent(QEvent *event)`函数，并在其中判断事件类型为窗口状态改变事件（`event->type() == QEvent::WindowStateChange`），然后设置窗口图标，从而实现程序在任务栏中的图标设置。具体步骤如下： 1. 在窗口类头文件中添加`QIcon m_icon;`成员变量，用于存储程序图标。 2. 在窗口类的构造函数中初始化`m_icon`成员变量，代码如下： ``` // 构造函数 MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent) { // 设置程序图标 m_icon = QIcon(":/images/icon.png"); setWindowIcon(m_icon); } ``` 注意，这里的`:images/icon.png`是指程序图标在程序资源文件中的路径。如果程序没有资源文件，也可以直接使用文件路径来初始化`QIcon`对象。 3. 在窗口类中重写`void changeEvent(QEvent *event)`函数，并在其中判断事件类型为窗口状态改变事件，代码如下： ``` // 窗口状态改变事件处理函数 void MainWindow::changeEvent(QEvent *event) { if (event->type() == QEvent::WindowStateChange) { if (windowState() & Qt::WindowMinimized) { // 窗口最小化时设置任务栏图标 setWindowIcon(m_icon); } else { // 恢复窗口时恢复窗口图标 setWindowIcon(QIcon()); } } QMainWindow::changeEvent(event); } ``` 这里通过判断窗口状态是否为最小化来设置任务栏图标和恢复窗口图标。当窗口最小化时，将程序图标设置为任务栏图标；当窗口恢复时，将窗口图标恢复为默认图标。 这样，就可以实现程序在任务栏中的图标设置了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值