QML 基础语法与对象模型

QML (Qt Meta-Object Language) 是一种声明式语言，专为创建流畅的用户界面和应用程序逻辑而设计。作为 Qt 框架的一部分，QML 提供了简洁、直观的语法来描述 UI 组件及其交互方式。本文将深入解析 QML 的基础语法和对象模型。

一、QML 基础语法

1. 基本对象结构

// 基本矩形对象
Rectangle {id: myRectangle          // 对象标识符width: 200               // 属性赋值height: 100color: "blue"            // 颜色属性radius: 10               // 圆角半径Text {                   // 嵌套对象id: myTexttext: "Hello QML"    // 文本内容color: "white"font.pointSize: 14   // 字体大小anchors.centerIn: parent  // 居中对齐}
}

2. 属性系统

// 属性定义与使用
Rectangle {id: containerwidth: 300height: 200color: "lightgray"// 自定义属性property int count: 0property string status: "就绪"property color textColor: "black"Text {id: statusTexttext: "状态: " + container.status + ", 计数: " + container.countcolor: container.textColorfont.pointSize: 12anchors.centerIn: parent}// 属性绑定width: height * 1.5  // 宽度始终是高度的1.5倍// 定时器触发属性更新Timer {id: updateTimerinterval: 1000  // 1秒running: truerepeat: trueonTriggered: {container.count += 1if (container.count > 10) {container.status = "完成"container.textColor = "green"updateTimer.running = false}}}
}

3. 信号与槽

// 信号与槽示例
Rectangle {id: buttonwidth: 150height: 50color: "gray"radius: 5// 自定义信号signal clicked// 鼠标区域MouseArea {id: mouseAreaanchors.fill: parentonClicked: button.clicked()  // 触发自定义信号}// 状态变化states: [State {name: "pressed"when: mouseArea.pressedPropertyChanges {target: buttoncolor: "darkgray"}}]// 过渡动画transitions: [Transition {from: ""to: "pressed"reversible: trueColorAnimation {target: buttonproperty: "color"duration: 100}}]
}// 使用自定义按钮
MyButton {id: myButtonanchors.centerIn: parent// 信号连接onClicked: {console.log("按钮被点击了!")// 执行其他操作}
}

二、QML 对象模型

1. 对象层次结构

// 对象层次示例
ApplicationWindow {id: mainWindowvisible: truewidth: 800height: 600title: "QML 对象模型示例"// 菜单栏MenuBar {id: menuBarMenu {title: "文件"MenuItem {text: "打开"onTriggered: console.log("打开文件")}MenuItem {text: "保存"onTriggered: console.log("保存文件")}}Menu {title: "编辑"// 菜单项...}}// 主内容区Rectangle {id: contentAreaanchors {top: menuBar.bottomleft: parent.leftright: parent.rightbottom: parent.bottom}color: "white"// 列表视图ListView {id: itemListanchors.fill: parentmodel: ["项目1", "项目2", "项目3", "项目4", "项目5"]delegate: Rectangle {height: 40width: parent.widthcolor: index % 2 === 0 ? "lightgray" : "white"Text {text: modelDataanchors.verticalCenter: parent.verticalCenteranchors.left: parent.leftanchors.leftMargin: 10}}}}
}

2. 数据模型与视图

// 数据模型与视图示例
Rectangle {id: mainContainerwidth: 400height: 300color: "lightblue"// 列表模型ListModel {id: contactModelListElement {name: "张三"phone: "13800138000"favorite: true}ListElement {name: "李四"phone: "13900139000"favorite: false}ListElement {name: "王五"phone: "13700137000"favorite: true}}// 列表视图ListView {id: contactListanchors.fill: parentmodel: contactModeldelegate: Item {width: parent.widthheight: 50Rectangle {anchors.fill: parentcolor: favorite ? "lightgreen" : "white"Text {text: namefont.pointSize: 14anchors.left: parent.leftanchors.leftMargin: 10anchors.verticalCenter: parent.verticalCenter}Text {text: phonefont.pointSize: 12color: "gray"anchors.right: parent.rightanchors.rightMargin: 10anchors.verticalCenter: parent.verticalCenter}}}}
}

3. 组件化与模块化

// 创建自定义组件 (MyButton.qml)
import QtQuick 2.15Rectangle {id: buttonwidth: 120height: 40color: "blue"radius: 5border.width: 1border.color: "darkblue"property string text: "按钮"property color hoverColor: "lightblue"property color pressedColor: "darkblue"signal clickedText {id: buttonTexttext: button.textcolor: "white"font.pointSize: 12anchors.centerIn: parent}MouseArea {id: mouseAreaanchors.fill: parenthoverEnabled: trueonEntered: button.color = button.hoverColoronExited: button.color = "blue"onPressAndHold: button.color = button.pressedColoronClicked: button.clicked()}
}// 使用自定义组件
import QtQuick 2.15
import QtQuick.Window 2.15Window {id: mainWindowvisible: truewidth: 400height: 300title: "组件化示例"MyButton {id: loginButtontext: "登录"anchors.centerIn: parentonClicked: console.log("登录按钮被点击")}MyButton {id: cancelButtontext: "取消"anchors {bottom: loginButton.topbottomMargin: 20horizontalCenter: loginButton.horizontalCenter}color: "red"hoverColor: "lightred"pressedColor: "darkred"onClicked: console.log("取消按钮被点击")}
}

三、QML 与 JavaScript 交互

1. JavaScript 表达式

// JavaScript 表达式示例
Rectangle {id: calculatorwidth: 300height: 200color: "white"property int num1: 10property int num2: 20property int result: 0Text {id: resultTexttext: "计算结果: " + calculator.resultfont.pointSize: 14anchors.centerIn: parent}Row {anchors {bottom: parent.bottomhorizontalCenter: parent.horizontalCenterbottomMargin: 20}spacing: 10Button {text: "加法"onClicked: calculator.result = calculator.num1 + calculator.num2}Button {text: "减法"onClicked: calculator.result = calculator.num1 - calculator.num2}Button {text: "乘法"onClicked: calculator.result = calculator.num1 * calculator.num2}}
}

2. JavaScript 函数

// JavaScript 函数示例
Rectangle {id: validationFormwidth: 400height: 250color: "lightgray"property string username: ""property string password: ""property bool isValid: falseTextField {id: usernameFieldplaceholderText: "用户名"width: 200anchors {horizontalCenter: parent.horizontalCentertop: parent.toptopMargin: 30}onTextChanged: validationForm.username = text}TextField {id: passwordFieldplaceholderText: "密码"width: 200echoMode: TextField.Passwordanchors {horizontalCenter: parent.horizontalCentertop: usernameField.bottomtopMargin: 20}onTextChanged: validationForm.password = text}Text {id: validationTexttext: validationForm.isValid ? "验证通过" : "请输入用户名和密码"color: validationForm.isValid ? "green" : "red"anchors {horizontalCenter: parent.horizontalCentertop: passwordField.bottomtopMargin: 20}}Button {text: "验证"anchors {horizontalCenter: parent.horizontalCenterbottom: parent.bottombottomMargin: 30}onClicked: validateForm()}// JavaScript 函数function validateForm() {if (username.length >= 3 && password.length >= 6) {isValid = trueconsole.log("表单验证通过")} else {isValid = falseconsole.log("表单验证失败")}}
}

四、QML 动画与过渡

1. 基本动画

// 动画示例
Rectangle {id: animatedRectwidth: 100height: 100color: "red"x: 50y: 50// 位置动画NumberAnimation {id: moveAnimationtarget: animatedRectproperty: "x"to: 250duration: 1000easing.type: Easing.InOutQuadloops: Animation.Infiniterunning: true}// 颜色动画ColorAnimation {id: colorAnimationtarget: animatedRectproperty: "color"from: "red"to: "blue"duration: 2000loops: Animation.Infiniterunning: true}
}

2. 状态与过渡

// 状态与过渡示例
Rectangle {id: toggleButtonwidth: 100height: 50color: "gray"radius: 25property bool checked: falseRectangle {id: handlewidth: 40height: 40color: "white"radius: 20x: checked ? 55 : 5y: 5}MouseArea {anchors.fill: parentonClicked: {toggleButton.checked = !toggleButton.checked}}states: [State {name: "checked"when: toggleButton.checkedPropertyChanges {target: toggleButtoncolor: "green"}PropertyChanges {target: handlex: 55}}]transitions: [Transition {from: ""to: "checked"reversible: trueNumberAnimation {target: handleproperty: "x"duration: 300easing.type: Easing.InOutQuad}ColorAnimation {target: toggleButtonproperty: "color"duration: 300}}]
}