QML Book 学习基础1

目录

QML 语法初识

与JaveScript脚本

---

QML 语法初识

QML是一种声明性语言，用于描述对象之间的关系。遵循HTML-JavaScript模式，但是为QML和QtQuick重新设计过，因此是在两者基础上基础建立。

• import语句导入一个模块。版本号省略，形式为<主版本号>.<次版本号>，Qt6中版本号可省略
• 注释可以用//来表示单行注释，用/*……*/来表示多行注释。和C/C++和JavaScript一样
• 每个QML文件都需要有一个根元素，类似HTML
• 元素先类型声明，后跟{}
• 元素有属性，形式是 属性名: 属性值
• QML文档中的属性，可以通过它们的id(不带引号)来访问
• 元素可以嵌套，即父元素可以有子元素。可以使用parent访问父元素属性
• 一个属性可以依赖于一个或多个其他属性。这被称为绑定。当关联属性发生变化时，绑定属性将被更新。它就像一个契约，例如，高度总是宽度的两倍。
• property int m_nTypeId: 1；以给元素添加新属性，需要属性限定符、类型、名称和可选的初始值(property <类型> <名称> : <初始值>)。如果没有给初始值，则会使用默认的初始
• property alias anotherSource: triangle.source；声明属性的另一种重要方法是，使用alias关键字(property alias <别名>: <引用对象>)。alias关键字允许我们将对象的属性或对象本身，从类型内部暴露出来。通过这种方法，可以把组件内部属性或元素id导出到根级属性，稍后内容会具体命题组。属性别名不需要类型，它使用被引用的属性或对象的类型

// RectangleExample.qml
import QtQuick
 
// The root element is the Rectangle 根元素是矩形
//定义矩形元素
Rectangle {
    // name this element root 将此元素id命名为root
    id: root
 
    // properties: <name>: <value> 属性:<名称>:<值>
    width: 120; height: 240
 
    // color property 颜色属性
    color: "#4A4A4A"
    
    //属性别名绑定 可以认为是引用&
    property alias anotherSource: triangle.source

    property int m_nTypeId: 1
 
    // Declare a nested element (child of root) 声明一个嵌套元素(根的子元素)
    //定义图像元素
    Image {
        id: triangle
 
        // reference the parent 引用父对象属性
        x: (parent.width - width)/2; y: 40
 
        source: 'assets/triangle_red.png'
    }
 
    // Another child of root 根的另一个子元素
    //定义文字元素
    Text {
        // un-named element 无id的元素
 
        // reference element by id 通过id引用元素属性
        y: triangle.y + triangle.height + 20
 
        // reference root element 参考根元素属性
        width: root.width
 
        color: 'white'
        //设置字体的位置
        horizontalAlignment: Text.AlignHCenter
        text: 'QML 基础' + m_nTypeId
    }
}

通常通过id访问特定元素，或者使用parent关键字访问父元素。所以最好将根元素命名为root，使用id: root。这样就不必考虑如何在QML文件中命名根元素。这里需要注意的是每个ID都是唯一的，遵循后来为尊（假如有两个Button（在同一个作用域内）的id都是root，则最后那个会覆盖前面那个）

与JaveScript脚本

QML:(绑定)和JavaScript =(赋值)之间的区别在于，绑定是一个契约，并在绑定的生命周期内保持绑定值更新，而JavaScript赋值(=)只是一次赋值操作。

Text {
    id: label
 
    x: 24; y: 24
 
    // custom counter property for space presses 自定义计数器属性
    property int spacePresses: 0
 
    text: "Space pressed: " + spacePresses + " times"
 
    // (1) handler for text changes. Need to use function to capture parameters
    //文本更改的处理器。需要使用函数来捕获参数
    onTextChanged: function(text) { 
        console.log("text changed to:", text)
    }
 
    // need focus to receive key events需要接收键盘事件
    focus: true
 
    // (2) handler with some JS 使用JS的事件处理器
    Keys.onSpacePressed: {
        increment()
    }
 
    // clear the text on escape 按下退出键时，清除label的文本
    Keys.onEscapePressed: {
        label.text = ''
    }
 
    // (3) a JS function JS函数
    function increment() {
        spacePresses = spacePresses + 1
    }
}