QT桌面应用程序开发指南(@Like)


目录

QT桌面应用程序开发指南(@Like)

一、 QT简介

二、 QT开发工具

1. QT在线安装: https://download.qt.io/archive/online_installers/4.6/

2. QT SDK: https://download.qt.io/archive/qt/6.6/6.6.1/single/qt-everywhere-src-6.6.1.zip

3. QT Creator IDE: https://www.qt.io/product/development-tools

4. QT design studio: https://www.qt.io/product/ui-design-tools

三、 QT 在线安装

1. Windows

四、 更新QT组件QTCharts

五、 创建QT工程

1. QT Widgets应用

2. QT Quick应用

3. QT Design Studio设计

六、 编辑调试工程

七、 生成EXE

八、 使用QML Charts(从QT Design Studio到QT Creator)绘制曲线图


一、QT简介

QT是一个开发跨平台C++图形用户界面应用程序的开发框架。它既可以开发GUI程序,也可用于开发非GUI程序,比如控制台工具和服务器。Qt是面向对象的框架,使用特殊的代码生成扩展以及一些宏,Qt很容易扩展,并且允许真正的组件编程。

现在Qt是免费的。Qt公司提供了多种许可证,包括商业许可和开源许可。对于商业产品,可以选择购买商业许可,而对于开源项目,可以选择使用开源的LGPL/GPL/Commercial许可。这意味着开发者可以在符合相应许可证要求的情况下免费使用Qt进行开发。


二、QT开发工具

PySide6: PySide是跨平台应用程序框架Qt的Python绑定,Qt是跨平台C++图形可视化界面应用开发框架。PySide由Qt公司自己维护,允许用户在Python环境下利用Qt开发大型复杂GUI。用Python简洁的语法调用PySide6的各种可视化控件的类,可以快速搭建用户的图形界面,PySide6开发的GUI程序可以运行在所有主要操作系统上。

Qt Creator: Qt Creator是基于QT框架开发QT Widgets和QT QML的IDE。可以编写C/C++代码、QML代码、QRC资源文件、QSS式样等几乎QT应用程序所需要的各种文件。而且也可以调用到Qt Designer工具来设计UI界面。也支持完全手工编写代码,自由度非常高,不仅支持编写界面代码,还支持编写业务逻辑代码;不仅支持界面不复杂的情况,还支持界面比较复杂的情况。

Qt Designer: Qt Designer是QT Widgets窗口UI设计器。可视化设计QT Widgets窗口UI界面。可以直接拖控件拖布局,之后使用uic界面编译工具自动生成界面对应的C++代码文件。

Qt Design Studio:Qt Design Studio是QT QML窗口UI设计器和QML IDE。可视化设计QML界面,可以直接拖放界面元素来设计QML应用程序,还可以编写QML代码和JavaScript代码,以及C++代码。用Qt Design Studio设计开发QML应用程序,可能比使用Qt Creator来讲,效率更高,操作更便捷。


1. QT在线安装: https://download.qt.io/archive/online_installers/4.6/

qt-unified-windows-x64-4.6.1-online.exe Windows

qt-unified-linux-x64-4.6.1-online.run Linux

2. QT SDK: https://download.qt.io/archive/qt/6.5/6.5.3/single/qt-everywhere-src-6.5.3.zip

3. QT Creator IDE: https://www.qt.io/product/development-tools

4. QT design studio: https://www.qt.io/product/ui-design-tools


三、QT 在线安装

1. Windows

运行qt-unified-windows-x64-4.6.1-online.exe

QT桌面应用程序开发指南(@Like)_QML

首先注册并登录账户。

选择安装路径,选择安装组件,然后进行安装。

QT桌面应用程序开发指南(@Like)_QtQuick3D_02

安装完成后可以再次通过运行Qt Maintenance Tool进行组件装卸。

组件说明(截图以Windows桌面应用开发为例):

Preview: 预览版

Qt Design Studio: QML界面设计工具

QT:QT版本和开发工具

Qt Create: IDE开发环境

根据需要选择需要的版本和工具及组件。

QT桌面应用程序开发指南(@Like)_QML_03


QT桌面应用程序开发指南(@Like)_QT_04

四、更新QT组件QTCharts

可以在首次安装时选择QT组件安装,也可以到后续需要时随时增加QT组件安装。点击Qt Maintenance Tool快捷方式运行QT维护工具重新进入QT安装程序,登录成功后点下一步,选择添加或移除组件,点下一步,

QT桌面应用程序开发指南(@Like)_QtQuick3D_05

在选择组件页面中选择QT->QT6.6.1->Additional Libraries->QT Charts组件,点下一步,点更新

QT桌面应用程序开发指南(@Like)_QML_06

更新完成后点重新启动然后退出安装工具,完成。

五、创建QT工程

1. QT Widgets应用

选择QT Widgets Application,选择CMake,选择SDK。完成项目创建。

然后双击打开XX.ui,进入Widgets 图形化设计界面,增加信号和槽。

点击右边栏编辑按钮回到代码编辑界面,进行代码编写。

执行CMake,构建项目,运行调试。

QT桌面应用程序开发指南(@Like)_QtCharts_07

QT桌面应用程序开发指南(@Like)_QtCharts_08

QT桌面应用程序开发指南(@Like)_QT_09

QT桌面应用程序开发指南(@Like)_QtCharts_10

2. QT Quick应用

选择QT Quick Application,选择QT版本,选择SDK。完成项目创建。

然后双击打开./content/content/XX.ui.qml,进入QML图形化设计界面进行设计。

点击右边栏编辑按钮回到代码编辑界面,进行代码编写。

执行CMake,构建项目,运行调试。

QT桌面应用程序开发指南(@Like)_QtCharts_11

QT桌面应用程序开发指南(@Like)_QT_12

QT桌面应用程序开发指南(@Like)_QML_13


3. QT Design Studio设计

用QT Design Studio打开刚才创建的QT Quick应用,文件 打开项目 选择项目根目录,选择XX.qmlproject (QML Project file )文件即可打开QT Design创建的项目。

QT桌面应用程序开发指南(@Like)_QtCharts_14


六、编辑调试工程


七、生成EXE


八、使用QML Charts(从QT Design Studio到QT Creator)绘制曲线图

1. 拷贝QT安装目录中QT\Examples\Qt-6.6.1\demos\robotarm,把robotarm整个例程目录拷贝到工作目录下,运行QT Creator 打开工作目录中\robotarm\工程的 CMakeLists.txt文件,配置项目,修改CMark构建目录为工作目录下新建\build-robotarm-Desktop_Qt_6_6_1_MinGW_64_bit-Debug\。然后点击构建项目,编译成功。

2. 运行QT Design Studio 打开工作目录中\robotarm\工程的 RobotArm.qmlproject文件,打开\robotarm\content\MainScreen.ui.qml文件,进入2D UI设计界面,在左侧Components栏中的搜索框中输入Charts搜索(如果Charts插件未安装参见第四章 更新QT组件QTCharts),找到QTCHARTS选择LINE拖拽到2D设计区内(该文件内自动增加包含import QtCharts),调整布局,保存修改。点击运行按钮Run Project,查看UI效果。

3. 返回QT Creator打开的robotarm工程,提示文件有更新,点击全部更新保存修改。修改以下内容:

(1) 修改CMakeLists.txt文件,增加库find_package、target_link_libraries中WidgetsCharts库支持,修改见加粗字体的内容。

find_package(Qt6 Widgets Charts ChartsQml Gui Qml Quick Quick3D)


target_link_libraries(RobotArmApp PUBLIC

    Qt::Widgets

    Qt::Charts

Qt::ChartsQml

Qt::Core

Qt::Gui

Qt::Quick

)

(2) 修改main.cpp文件,QGuiApplication 改为QApplication,修改见加粗字体的内容。

#include <QGuiApplication>

#include <QQmlApplicationEngine>

#include <QApplication>


// QGuiApplication app(argc, argv);//QGuiApplication 改为QApplication

QApplication app(argc, argv);

(3) 拷贝QT安装目录中的\QT\6.6.1\mingw_64\qml\QtCharts文件夹和\QT\6.6.1\mingw_64\bin中的Qt6Charts.dll、Qt6ChartsQml.dll文件到\robotarm\工程的构建目录\build-robotarm-Desktop_Qt_6_6_1_MinGW_64_bit-Debug\内。

4. 在QT Creator构建修改后的robotarm项目,点运行查看程序效果。

QT桌面应用程序开发指南(@Like)_QtCharts_15

(未完)