Qt Quick入门教程(1): Qt Quick与QML介绍

2023-11-11 08:34:04

1 什么是Qt Qucik?

Qt Quick是QtSDK4.7中引入的一种新的界面开发框架，使用QtQuick,你可以快速、轻松地创建供移动和嵌入式设备使用的动态触摸式界面和轻最级应用程序，这也是它被命名为Quick的原因.

Qt Quick包括描述性语言QML、语言运行时、大量的用户界面元素、Qt Creator对QML的完美支持、Qt Quick设计器、QML与C++混合编程支持等众多技术，使用它你可以轻松、快速地为移动和嵌入式设备创建流畅的用户界面. 在Android等移动设备上，Qt Quick应用默认使用0penGLES,渲染效率很高，你可以用它创建非常炫、非常酷、非常迷人的界面.QML可以扩展现有的应用程序，也可以称之为“二次开发”。说实话在毕业刚入职时接触了类似的项目，当时也是一脸懵逼，怎么会有这种形式的开发，在别人做好的软件上直接修改。其实类似的二次开发有CAD, Catia等，不过它们是dll, com组件这种插件的模式。

QtQuick能够与C++，JS有机结合混合编程，开发者可以使用已有的Qt技术结合Qt Quick, 创建更好的应用程序。

相对于QWidget, MFC等，qml创建应用程序可能会更简单一些。

2 新建Qt Quick项目

打开QtCreator，我所用的版本是Qt5.12, Qt Quick默认提供了四种基础项目：

（1）空项目Empty

（2）Scroll

（3）页面切换Stack

（4）多页面切换Swipe

下面创建一个空的qml项目，QtCreator会给我们创建好，默认的两个文件main.cpp, main.qml

main.qml代码

import QtQuick 2.12
import QtQuick.Window 2.12

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

我加了个属性color, 修改窗口背景颜色。

一个qml文件主要由两部分组成：

import语句：这个就像C++中的头文件，
QML对象树：根对象是Window, 然后可以在Window中添加各种控件，例如按钮，文本，菜单等

main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>

int main(int argc, char *argv[])
{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);

    QGuiApplication app(argc, argv);

    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();
}

该文件是C++代码，用QML引擎加载main.qml文件，显示窗口，如主循环。

该程序的界面如下：

例如下面是在Window中加了一个按钮和矩形

代码如下：

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5

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

    Button
    {
        id:quit
        text:"tuichu"
        anchors.left:parent.left
        anchors.leftMargin:4
        anchors.bottom:parent.bottom
        anchors.bottomMargin:4

        onClicked:{
            Qt.quit()
        }
    }

    Rectangle
    {
        x:100
        y:70
        width:100
        height:50
        color:"#00C0CC"
        z:1
        opacity:0.6
    }
}

因为引入了按钮，那么就得导入它的头文件 import QtQuick.Controls 2.5，运行界面如下

各个控件怎么放呢，这就涉及到布局，可以使用锚点相对布局，也可以用绝对布局，在后面的文章中介绍。

码农公寓

1 什么是Qt Qucik?

2 新建Qt Quick项目

相关文章