02_qml_简介

qml介绍：

• QML是一种描述用户界面的声明式语言。它将用户界面分解成一些更小的元素，这些元素能够结合成一个组件。
• QML语言描述了用户界面元素的形状和行为。用户界面能够使用JavaScript来提供修饰，或者增加更加复杂的逻辑。从这个角度来看它遵循HTML-JavaScript模式，但QML是被设计用来描述用户界面的，而不是文本文档。
• 从QML元素的层次结构来理解是最简单的学习方式。子元素从父元素上继承了坐标系统，它的x,y坐标总是相对应于它的父元素坐标系统。

如下是一个简单的qml代码示例：

import QtQuick 2.11
import QtQuick.Controls 2.4
import QtQuick.Layouts 1.11

// 按钮
// 比较典型的按钮有：“确定”、“应用”、“取消”、“关闭”、“是”、“否”和“帮助”。
Rectangle {
    
    
    id: buttonWindow

        // 普通按钮
        Button {
    
    
            text: "Button"
            onClicked: {
    
    
                console.info("button clicked, x:" + pressX + ", y:" + pressY)
            }
            onDoubleClicked: {
    
    
                console.info("button double clicked")
            }
        }
}

qml语法：

• import：导入模块版本。一般来说会导入QtQuick2.0来作为初始元素的引用。
• 注释，类似c++使用 // 和 /**/ 。
• 根元素：每一个QML文件都需要一个根元素，就像HTML一样。
• 一个元素使用它的类型声明，然后使用{}进行包含。
• 元素拥有属性，他们按照name:value的格式来赋值。
• 任何在QML文档中的元素都可以使用它们的id进行访问（id是一个任意的标识符）。
• 元素可以嵌套，这意味着一个父元素可以拥有多个子元素。子元素可以通过parent关键字来访问它们的父元素。
• 访问父对象的方法通常是使用id或者关键字parent。有一个比较好的方法是命名根元素对象id为root（id:root），这样就不用去思考该QML文档中的根元素的命名方式了。