QML 之语法技巧

前言

每一门或者每一个框架都有自己的特有的规则，虽然五花八门，但万变不离其宗，我们这篇随笔就是记录 QML 的特有的规则，好达到快速学习它的方法。

QML参考对象

• JavaScript

QML 语法

• QML 语法之注释
• QML 语法之导入模块
• QML 语法之表达式
• QML 语法之变量
• QML 语法之id
• QML 语法之列表属性
• QML 语法之默认属性
• QML 语法之分组属性
• QML 语法之附加属性
• QML 语法之信号处理
• QML 语法之信号与槽

QML 语法之注释

// QML 中的注释方法 >>
// 这是单行注释
/*
   这是多行注释
*/

QML 语法之导入模块

// QML 中导入功能模块 >>
// import [功能模块名]
// 如 >> import QtQuick 2.0

QML 语法之表达式

// QML 语法之表达式 >>
// QML 中的表达式结尾不用以 ';' 结尾，它是以换行符来定义一行代码的 >> title: qsTr("Hello World")

QML 语法之变量

// QML 语法之变量 >>
// 在QML中声明一个变量的特定格式 >> property [type] [var_name] : [list]
// 如 >> property string title_str : "title"

QML 语法之id

// QML 语法之id >>
// 在QML中声明一个对象的id的特定规则 >> id首字符必须是小写字母或下划线并且不能包含字母，数字和下划线以外的字符
// 如 >> id: windowTitleMousePos || __windowTitleMousePos
// 错误 >> id : windowTitleMousePos!@#$%^&*()_

QML 语法之列表属性

// QML 语法之列表属性 >>
// 列表是包含在方括号内，以逗号分隔的列表元素。在你只分配单一项目列表的情况下，是可以省略方括号
// Item { children: [Image{},Text{}] }
// Image { children: Rectangle {} }

QML 语法之默认属性

// QML 语法之默认属性 >>
// 每个对象类型可以指定列表或对象属性之一作为其默认属性。如果一属性已被声明为默认属性，该属性标记可以被省略
/* 
State { changes: [
PropertyChanges {}, PropertyChanges {} 
] }
// 简化后 >> State{ PropertyChanges{},PropertyChanges{} }
*/

QML 语法之分组属性

// QML 语法之分组属性 >>
// 在某些情况下使用一个‘.’符号或分组符号形成一个逻辑组。
/* 
Text {
     font.pixelSize: 12
     font.bold: true
 }
// 或者 >> font { pixelSize: 12; bold: true }
*/

QML 语法之附加属性

// QML 语法之附加属性 >>
// 有些对象的属性附加到另一个对象。附加属性的形式为Type.property其中Type是附加property元素的类型
/* 
Component {
     id: componentObject
     Text {
         text: "Hello"
         color: ListViewObjct.isCurrentItem ? "red" : "blue"
     }
 }
*/

QML 语法之鼠标信号处理

// QML 语法之鼠标信号处理 >>
// 信号处理器允许响应事件时处理动作。例如，MouseArea元素有信号处理器来处理鼠标按下，释放以及单击
// 鼠标按键释放 
MouseArea { onPressed: console.log("mouse button pressed") }

// 所有信号处理器开始都是启用的，我们可以只关注某些消息
MouseArea {
    acceptedButtons: Qt.LeftButton | Qt.RightButton
	// other event handle
}

// 有一些信号处理器包含一个可选的参数，例如MouseArea onPressed信号处理程序有鼠标参数
 MouseArea {
    acceptedButtons: Qt.LeftButton | Qt.RightButton
    onPressed: if (mouse.button == Qt.RightButton) console.log("Right mouse button pressed")
}

QML 语法之信号与槽

// QML 语法之信号与槽 >>
// 信号和槽是Qt的类事件通信机制，使用格式
// 定义信号 >> signal pickSignal()
// 关注信号 >> onPickSignal: { /* 处理代码 */ }