QML Training Course1 Introduction in Qt

本文链接：https://blog.csdn.net/yusheng_bo/article/details/104462476

本文深入探讨了Qt框架的模块与特性，包括其跨平台能力、QML声明式语言如何简化GUI创建，以及QtQuick如何提升动态界面设计效率。通过具体示例，展示了QML与C++结合在UI设计上的强大功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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 {} // 里面的元素按行排列