1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > QT使用阿里巴巴矢量图标库设置窗口图标 菜单栏项图标 工具栏项图标 状态栏图标以及

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

时间:2021-10-13 22:00:24

相关推荐

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

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

在QT项目中设置图标示例。

我总结了一下需要设置图标的地方大致分为5个,如下:

1. 设置窗口图标(利用setWindowIcon()属性实现)

2. 设置菜单栏中每一项的图标

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

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

5. 将控件设置为图标(这里以QPushButton控件和QLable控件为例)

先看效果图。

请看具体操作步骤!

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

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

阿里巴巴矢量图标库官网为:/

进入官网后,搜索需要的图标,并点击下载,下载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}/binelse: 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_NAMESPACEnamespace 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使用阿里巴巴矢量图标库设置窗口图标 菜单栏项图标 工具栏项图标 状态栏图标以及将控件设置为图标

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。