Qt Quick 编程入门01

编写一个Qt Quick的Hello world 程序。

作者：覃高 www.laochengxuyuan.com

演示的软件版本是：

1.创建工程。

 

2.进入工程后，文件及界面如下：

3. 我们可以直接对main.qml进行界面设计，也可另外添加一个ui文件与main.qml关联，以后main.qml主要的任务是代码逻辑编写，界面设计则放到另外一个文件中。

添加一个界面文件：

 

4. 设计界面：在MainForm.qml中加入一个按钮Button及一个Label.

 

5. 设置控件的属性，使得控件在上层qml文件中可以访问.

 

6.在main.qml中加入界面

import QtQuick 2.12
import QtQuick.Window 2.12

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

7.编写按钮点击的脚本

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    
    MainForm{
        button.onClicked: {
            label.text = qsTr("按钮被点击了一下下...")
        }
    }
}

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

8.运行程序