【Qt】QML-01:使用QtCreator10创建QML工程,并讲解第一个程序:Hello World

1、创建QML工程

1)新建工程
打开QtCreator10,依次点击“Create Project” --> “Application(Qt)” --> “Qt Quick Application(compat)”
注意:本人打算使用Qt5.15.2创建工程,而非Qt6,因此选择兼容低于Qt6版本的“Qt Quick Application(compat)”来创建
【Qt】QML-01:使用QtCreator10创建QML工程,并讲解第一个程序:Hello World_第1张图片
2)设置工程名、路径
【Qt】QML-01:使用QtCreator10创建QML工程,并讲解第一个程序:Hello World_第2张图片
3)选择构建系统
这里选择构建系统为qmake,如果在第一步新建工程时选择的是“Qt Quick Application”,这里将看不到qmake,因为Qt6使用cmake构建。
【Qt】QML-01:使用QtCreator10创建QML工程,并讲解第一个程序:Hello World_第3张图片
4)选择Qt版本
本人选择为Qt5.15,本人没有选择虚拟键盘,请各位看官根据需要来添加
【Qt】QML-01:使用QtCreator10创建QML工程,并讲解第一个程序:Hello World_第4张图片
5)选择翻译语言
本人选择为中文Chinese(China),不选择也可以
【Qt】QML-01:使用QtCreator10创建QML工程,并讲解第一个程序:Hello World_第5张图片
6)选择编译套件Kit
本人选择为Qt5.15.2 64bit
【Qt】QML-01:使用QtCreator10创建QML工程,并讲解第一个程序:Hello World_第6张图片
7)完成
最后在“总结”(Summary)界面点击完成Finish即可。

在这里根据需要可以设置版本管理。
【Qt】QML-01:使用QtCreator10创建QML工程,并讲解第一个程序:Hello World_第7张图片

2、编译、运行

创建完成后,直接编译、运行即可,默认界面如下:
在这里插入图片描述

3、代码讲解

3.1 工程结构

最小工程共5个文件:

$ tree
├── GwQmlDemo1.pro		// 工程pro文件
├── GwQmlDemo1_zh_CN.ts	// 翻译ts文件
├── main.cpp			// 主文件,由此进入qml世界
├── main.qml			// qml描述文件
└── qml.qrc				// qrc资源文件,将qml文件加载到程序中

在编译生成的二进制可执行文件中可以看到qml的内容
【Qt】QML-01:使用QtCreator10创建QML工程,并讲解第一个程序:Hello World_第8张图片

3.2 main.cpp详解

1)头文件

#include 
#include 
#include 
#include 

除了QQmlApplicationEngine其它头文件很常见,QQmlApplicationEngine类下面会详细讲解

2)对高DPI显示屏的支持

int main(int argc, char *argv[])
{
#if QT_VERSION < QT_VERSION_CHECK(6, 0, 0)
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
#endif
    QGuiApplication app(argc, argv);

DPI:每英寸长度内的像素点数;
设置应用程序属性为 Qt :: AA_EnableHighDpiScaling 可以根据显示器的像素密度进行自动缩放。
上面这句话是啥意思呢?
如果不设置 Qt :: AA_EnableHighDpiScaling ,在一些高DPI显示屏上,设计时的窗口尺寸和显示的不一致,如下图所示:
【Qt】QML-01:使用QtCreator10创建QML工程,并讲解第一个程序:Hello World_第9张图片
3)翻译
在创建项目时,选择了翻译Translator,因此会自动生成如下代码

QTranslator translator;
const QStringList uiLanguages = QLocale::system().uiLanguages();
for (const QString &locale : uiLanguages) {
    const QString baseName = "GwQmlDemo1_" + QLocale(locale).name();
    if (translator.load(":/i18n/" + baseName)) {
        app.installTranslator(&translator);
        break;
    }
}

4)加载qml
下面的代码等于 QQmlApplicationEngine engine(“qrc:/main.qml”);其它代码是错误处理

    QQmlApplicationEngine engine;
    const QUrl url(QStringLiteral("qrc:/main.qml"));
    QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
        &app, [url](QObject *obj, const QUrl &objUrl) {
            if (!obj && url == objUrl)
                QCoreApplication::exit(-1);
        }, Qt::QueuedConnection);
    engine.load(url);

    return app.exec();
}

QQmlApplicationEngine:该类可以加载单个QML文件,它结合了QQmlEngine和QQmlComponent方法。
注意:QQuickView会自动创建根窗口,QQmlApplicationEngine不会自动创建根窗口,因此qml中需要使用Window对象为 Qt Quick 场景创建一个新的顶级窗口。

QQmlApplicationEngine::objectCreated:当对象完成加载时会发出此信号。如果加载成功,object包含指向加载对象的指针,否则该指针为 NULL。可以使用该信号来确定对象树何时准备就绪。

QQmlApplicationEngine::load:加载根 QML 文件

3.3 main.qml详解

1)导入模块
使用import来导入模块,和include类似

import QtQuick 2.15
import QtQuick.Window 2.15

还有个常用的模块

import QtQuick.Controls	包含各种按键等

2)元素、属性

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
}

Window即是种元素,常见的元素还有:Rectangle、Text、Button、Image、MouseArea、Item等
width、height、visible、title等皆为属性,

4、补充

4.1 元素列表

可在官网查看所有的元素:
Qt5:https://doc.qt.io/qt-5/qmltypes.html
Qt6:https://doc.qt.io/qt-6/qmltypes.html

4.2 属性列表

以Window为例,Window的全部属性可以在官网查看,Window属性列表如下

active : bool			活动状态
activeFocusItem : Item 	当前具有活动焦点的项目
color : color			窗口的背景颜色
contentItem : Item	 	场景中不可见根项目???
contentOrientation : Qt::ScreenOrientation
data : list	data 属性允许您在一个窗口中自由混合可视子项、资源和其他窗口。
flags : Qt::WindowFlags
height : int
maximumHeight : int
maximumWidth : int
minimumHeight : int
minimumWidth : int
modality : Qt::WindowModality	窗口的形态
opacity : real		窗	口的不透明度
screen : variant		与窗口关联的屏幕
title : string			窗口的标题
transientParent : QWindow	随父窗口显示或隐藏,如果设置为NULL,将独立显示
visibility : QWindow::Visibility	可见性是指窗口在窗口系统中是否应以正常、最小化、最大化、全屏或隐藏的方式显示
visible : bool	窗口在屏幕上是否可见
width : int
x : int
y : int

你可能感兴趣的:(QML,qt,qml)