QML基础之窗体构建与代码介绍

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, 创建更好的应用程序。

2 新建Qt Quick项目

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

下面展示2个项目时效果图

（1）空项目Empty

（2）Scroll

（3）页面切换Stack

（4）多页面切换Swipe

下面以第四个默认的例子介绍QML项目，选择项目类型Swipe，创建一个QtQuick项目，Qt项目用VS中创建，QML也可以，但是稍微有点麻烦，没QtCreator那么方便，QML项目的开发环境最好还是使用QtCreator.

main.qml代码

import QtQuick 2.12
import QtQuick.Controls 2.5

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Tabs")

    SwipeView {
        id: swipeView
        anchors.fill: parent
        currentIndex: tabBar.currentIndex

        Page1Form {
        }

        Page2Form {
        }
    }

    footer: TabBar {
        id: tabBar
        currentIndex: swipeView.currentIndex

        TabButton {
            text: qsTr("Page 1")
        }
        TabButton {
            text: qsTr("Page 2")
        }
    }
}

代码说明：

（1）需要导入QtQuick库

import QtQuick 2.12
import QtQuick.Controls 2.5

(2) 写一个主窗口ApplicationWindow，窗体的其它控件就是用类似于html语法写，不是很复杂，了解html， css的应该都看的懂。

(3)QML页面切换类SwipeView，Qt助手解释如下：SwipeView provides a swipe-based navigation model.

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"));

    //链接qml引擎信号槽
    QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
                     &app, [url](QObject *obj, const QUrl &objUrl)
    {
        if (!obj && url == objUrl)
            //如果qml文件为空，或者有错误，就退出
            QCoreApplication::exit(-1);
    }, Qt::QueuedConnection);

    //加载QML文件
    engine.load(url);

    //进入主循环
    return app.exec();
}

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

来源：oschina

链接：https://my.oschina.net/u/4408322/blog/4255904

标签

Qt Quick

c++

Qt Creator