QT6学习第五天 第一个QT Quick程序

QT6学习第五天 第一个QT Quick程序

概述

如果将程序的用户界面成为前端,程序的数据存储和逻辑业务成为后端,那么传统QT Widgets程序的前后端都是用C++完成的。对于现代软件开发而言,前端演化速度远快于后端。当要改变界面或重新开发界面时,很难快速只针对前端来开发。

而QT Quick提供了一个适合于开发用户界面的声明式环境。在这里,可以向HTML代码一样声明界面,后端依然使用C++代码。这种设计使得程序的前后端分离,可以分别演化。

QT Quick程序可以同时包含QML和C++代码。可以部署到移动或桌面平台。

在Qt Creator 中,这种项目叫Qt Quick Application。

创建Qt Quick程序

  • 新建项目,命名helloworld,这里它默认构建系统为CMake,我也没看见哪里能改。

    CMake是一组可以进行构建、测试和打包程序的工具集,它可以在所有主要开发平台上使用,并被多中IDE支持,可以很好的简化跨平台项目的构建过程。QT6中CMake得到了很好的支持,可以自己学习下CMake知识。

因为我看的这本书里用的qmake,所以还得从创建空项目开始,烦死了!

  • 我们创建一个空项目,命名helloworld,然后在pro文件中添加 QT += quick

  • 添加 main.qml 文件。

  • 修改 main.qml 文件

    QML代码文件以 .qml 作为后缀,QML是代码语言。

python 复制代码
import QtQuick 2.15

//window对象用来创建一个顶层窗口
Window{
    //设置宽高
    width:640
    height:480
    //设置可显示,默认不显示
    visible:true
    //设置标题,qsTr() 转换字符,使各种字符都可显示
    title:qsTr("Hello World!")

    //Text对象,显示一个字符串
    Text{
        id:text1
        text:qsTr("Hello World! 你好哈哈哈!")
        //位置放到窗口中心
        anchors.centerIn:parent
    }
}
  • 添加 main.cpp 文件,并添加代码
cpp 复制代码
#include <QGuiApplication>
#include <QQmlApplicationEngine>

//此次主要功能是加载 QML 文件
int main(int argc,char *argv[]){
    //创建 QGui 应用,和Qwidget应用一样
    QGuiApplication app(argc,argv);
    //创建 QQmlApplicationEngine 对象,可加载 QML 文件
    QQmlApplicationEngine engine;
    //load() 加载 QML 文件
    engine.load(QUrl::fromLocalFile("../../main.qml"));

    return app.exec();
}

运行看看吧

使用Qt资源文件

QT中的资源系统(The Qt Resource System)是一个独立于平台的机制,可以将资源文件打包到应用程序可执行文件中,并且使用特定的路径来访问它们。如果在应用程序中经常使用一些文件,例如图标、翻译文件、图片等,而且不想使用系统特定的方式来打包和定位这些资源,那么就可以将它们放入资源文件中。

在前面的源码目录中新建文件夹,命名images,向其中放入一张图片,随便放一个png图片。然后进入Qt Creator 编辑模式中,添加新文件,模板选Qt分类下的 Qt Resource File,命名resource.qrc。然后打开 resource.qrc 文件,点击添加前缀,设置为"/",再点击添加文件,把 png 图片添加进去,保存。

在 main.qml 中添加代码来使用资源文件。

cpp 复制代码
//Image 对象用来显示一张图片
Image{
	id:logo
	//大小
	width:100;height:100
	//路径 以 qrc 开头
	source:"qrc:/images/logo.png"
	//
	anchors.horizontalCenter:text1.horizontalCenter
	anchors.top:text.bottom
	anchors.topMargin:10
}

然后我们右击 resource.qrc 文件,选择"用...打开 -> 普通文本编辑器",能够看到 qrc 文件其实是个 XML 文件。

我们会发现添加资源文件后会自动在 pro 文件中生成一些代码

cpp 复制代码
RESOURCE += \
	resource.qrc

以后自己手动添加已有的资源文件时,就在这里手动添加代码。

另外,编译时会对加入的资源文件自动压缩,这些内容可在 QT 帮助中通过 The Qt Resource System中查看。

相关推荐
用户805533698034 天前
不止三件套:QObject 属性系统全关键字与运行时反射!
c++·qt
xcyxiner4 天前
DicomViewer (vcpkg Windows和ubuntu编译)7
qt
Quz9 天前
QML Hello World 入门示例
qt
xcyxiner12 天前
DicomViewer (dcmtk读取dcm文件)5
qt
xcyxiner13 天前
DicomViewer (后台线程处理文件)4
qt
xcyxiner13 天前
DicomViewer (添加模型类)3
qt
xcyxiner14 天前
DicomViewer (目录调整) 2
qt
xcyxiner14 天前
dcmtk vtk vtk-dicom(gdcm) 编译(debug) v2
qt
桥田智能16 天前
桥田智能 QT-650S:面向白车身焊装的 800kg 重载快换解决方案
开发语言·qt·系统架构
森G16 天前
75、服务器源码解析---------云视频服务项目
linux·服务器·网络·c++·qt