QML Training Course1 Introduction in Qt

Qt:

Modules

What is Qt Quick?

QML

QML Structure

Qt Creator

例子

---

 

Qt:

• 基于C++的跨平台框架, 支持 Linux, Windows, QNX, Android, iOS
• 可免费使用的软件
• QMake - new tool for automated generation on Makefiles
• 包含 Meta-Object compiler - 用于extend C++的preprocessor

Modules

• QtCore --- 提供 containers, thread management, event management的基本库
• QtGui --- 用于graphical user interface的基本库
• QtNetwork --- 网络通信
• QtWebKit --- 用于 developing web application的webkit engine
• QtSQL --- database integration
• QtQML --- QML and JavaScript languages
• QtQuick --- 通过 QML API和C++ API来 分离 UI design 和 programming logic

What is Qt Quick?

Qt User Interface Creation Kit

• 编写dynamic user interfaces的框架
• Designed for areas where users expect a non widget based UI

QML

QML (Qt Meta Language or Qt Modeling Language) 是一种声明式语言, 允许用户easily create graphical user interfaces.

• Declarative language声明式语言, 类似 HTML or CSS
• Very expressive
•  easily create reusable components
• Extensible
• Accepts JavaScript

QML Structure

UI 由 层次结构的 嵌套元素组成. 嵌套元素 用 properties属性描述. 属性 可以binded to values, 可以自动更新. 属性可以产生signals when they change and notify the handlers.

Qt Creator

• C++, JS and QML IDE
• 包含 visual debugger
• 包含 layout and forms designer
• 支持Clang

例子

Diamond.qml

import QtQuick 2.0

Rectangle {
    id: diamond
    width: 200
    height: 200
    rotation: 45
    border.width: 1

    signal buttonClicked()

    MouseArea{
        anchors.fill: parent
        onClicked: diamond.buttonClicked()
    }
}

当MouseArea区域中发生点击事件, 会激发 siganl buttonClicked(), 从而调用 onButtonClicked函数.

onButtonClicked是依据buttonClicked自动生成的.

onWidthChanged是根据width自动生成的, 一旦width变化, 就会调用 onWidthChanged

DiamondExample.qml

import QtQuick 2.6
import QtQuick.Window 2.2

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

    Row {
        anchors.centerIn: parent
        height: 200
        spacing: -40

        Diamond {
            id: leftDiamond
            color: "#45ADA8"
        }

        Diamond {
            id: centerDiamond
            color: "#9DE0AD"

            onButtonClicked: {
                leftDiamond.width = leftDiamond.width + 10
                leftDiamond.height = leftDiamond.height + 10
            }

            Text {
                anchors.centerIn: parent
                font.pointSize: 30
                rotation: -45
                color: "gray"
                text: "Welcome to QML!"
            }
        }
    }
}

anchors.centerIn: parent  // 排放在 parent 中间

Row {}  // 里面的元素 按行排列