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中查看。

相关推荐
机器视觉知识推荐、就业指导8 小时前
基于Qt实现的自定义树结构容器:设计与应用
开发语言·qt
进击ing小白10 小时前
QChart数据可视化
qt·信息可视化
斯凯利.瑞恩18 小时前
RabbitMQ代码实战2
qt·rabbitmq·ruby
Zafir202418 小时前
Qt实现窗口内的控件自适应窗口大小
c++·qt·ui
人才程序员1 天前
详解Qt 中使用虚拟键盘(软键盘qtvirtualkeyboard)
开发语言·数据库·c++·qt·计算机外设·界面·c语音
喵呜角角1 天前
QML TableView 实例演示 + 可能遇到的一些问题(Qt_6_5_3)
开发语言·windows·qt·qml·qt quick
SSONICX1 天前
QT:生成二维码 QRCode
开发语言·qt
Lllongroad1 天前
QT报错:error: allocation of incomplete type ‘Ui::‘解决办法
qt·ui
老汉忒cpp1 天前
Qt-系统相关(1)事件&文件
开发语言·qt