UOS20 Qt5 系统状态图标Demo

1. 开发环境搭建

• 系统：UOS20
• 处理器架构：X86_64

由于Qt和DTK支持跨平台，处理器架构均可以兼容，只需要把同样的代码在不同环境下进行编译即可。

首先UOS20进入开发者环境。

sudo apt update
sudo apt-get install qtcreator qt5-default build-essential

安装内容包括：

• Qt开发环境（头文件、动态库、Qmake等）
• Qt IDE
• gcc、g++、make、gdb…

检验Qt

qmake --version

安装完成后可以看到Qt Creator IDE。

2. Hello World

打开 Qt Creator IDE，新建项目

选择 Qt Widgets Application

填写名称和项目存储位置

选择工具套件，保持默认即可。

类信息保持默认就可以。

项目管理保持默认即可。

项目创建完成后，点击绿色三角就可以启动运行 Helloworld 程序，弹出为一个空白窗口。

左侧的项目目录如下：

分别是：

1. 项目管理文件，相当于Cmake的Makefile.txt
2. 头文件，在.pro文件中指定。
3. 源文件，在.pro文件中指定。
4. 设计文件，Qt IDE支持通过图形操作拖拽来设计界面，这个文件就是用来存储了这些控件信息的。

helloworld.pro文件，内容如下：

根据需要在源文件和头文件部分增加或删除项目的文件可以改变左侧项目目录显示的文件。

3. 系统状态栏程序

本次Demo目标为：创建一个无窗口的系统状态栏程序，主要是使用Qt提供的QSystemTrayIcon与QMenu控件。

基于上述步骤的helloworld项目进行改造。

Github： https://github.com/Trisia/qt5systray

3.1 增加图标资源文件

这次Demo使用的图标如下：

首先将图标文件复制到项目根目录下：

右键 项目，点击Add New

选择 Qt，Qt Resource File 点击Choose

命名为 icon，点击下一步，直到完成。

该步骤完成后会向helloworld.pro文件中添加RESOURCES 配置信息。

完成后项目目录中会增加一个Resources目录，右键点击该目录，点击添加现有文件

选择我们的icon文件并点击打开。

可以看到我们文件位于/目录下，在需要使用到该资源的地方通过:/文件名的形式就可以取到文件路径，如::/icon.png

3.2 修改配置文件

本次只需要显示系统状态栏图标仅需使用libqtwidget相关API，我们采用简单的一个main函数来完成所有功能，因此那其他文件都给删除。

修改后的helloworld.pro内容如下所示：

QT       += widgets

CONFIG += c++11

DEFINES += QT_DEPRECATED_WARNINGS

SOURCES += \
    main.cpp

HEADERS += \

RESOURCES += \
    icon.qrc

由于没有其他的文件所以头文件这边也为空，修改保存之后，项目会自动更新项目结构。

此时项目中只有main.cpp和资源文件。

3.3 程序主体

main.cpp程序如下：

#include 
#include 
#include 
#include 
#include 

QSystemTrayIcon *trayIcon;

// 打开点击事件处理器
void handleOpen(){
    qDebug(">> Open button clicked!");
    QDesktopServices::openUrl(QUrl("http://www.baidu.com"));
}

void handleQuit(){
    trayIcon->hide();
    QCoreApplication::quit();
}

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    // 创建右键菜单
    QMenu menu;
    QAction openAct("打开");
    QAction  quitAct("退出");

    menu.addAction(&openAct);
    menu.addAction(&quitAct);
    // 菜单绑定事件回调
    QObject::connect(&quitAct, &QAction::triggered, qApp, &handleQuit);
    QObject::connect(&openAct, &QAction::triggered, qApp, &handleOpen);

    // 加载图标
    QPixmap oPixmap(32, 32);
    oPixmap.load(":/icon.png");
    QIcon qIcon(oPixmap);

    // 创建并配置状态栏icon
    trayIcon = new QSystemTrayIcon(qIcon);
    trayIcon->setContextMenu(&menu);
    trayIcon->setToolTip("Some thing");
    trayIcon->setVisible(true);
    // 消息提示
    // trayIcon->showMessage("Test Message", "Text", QSystemTrayIcon::Information, 3000);

    return a.exec();
}

1. 创建右键菜单，并注册并绑定事件处理器。
2. 加载图标。
3. 创建系统状态栏对象并配置。

完成编写后启动运行程序，可以在右下角看到程序启动的系统状态栏图标，对图标点击右键可以弹出菜单。

点击打开，可以在控制台看到回调函数打印信息，并且可以打开浏览器。

3.4 可执行程序图标

我们将之前的icon.png通过装换工具装换为 .ico格式

将icon.ico文件复制到项目目录下

编辑helloworld.pro 文件，添加如下内容，然后保存即可。

RC_ICONS = icon.ico

可执行文件位于：

这样我们编译的程序就有图标了

参考文献

[1]. github . QtExamples . XMuli . https://github.com/xmuli/QtExamples
[2]. stackoverflow . How to write QT system tray app without a window class, and integrate it with another process? . Kevin Krammer . 2017.01 . https://stackoverflow.com/questions/41780618/how-to-write-qt-system-tray-app-without-a-window-class-and-integrate-it-with-an
[3]. C语言中文网 . Qt教程 . http://c.biancheng.net/qt/