QML基本语法

简介:   QML是什么?QML 是一中声明式语言,用来描述应用程序接口的――是什么样,有怎样的行为。在QML中,一个用户接口被指定为带有属性的对象是。这个介绍主要面向只有很少或者没有编码经验的人。在QML中,JavaScript作为一种脚本语言被使用。

  QML是什么?

QML 是一中声明式语言,用来描述应用程序接口的――是什么样,有怎样的行为。在QML中,一个用户接口被指定为带有属性的对象是。

这个介绍主要面向只有很少或者没有编码经验的人。在QML中,JavaScript作为一种脚本语言被使用。因此在深入学习QML之前,也许你会想要去学一些关于JavaScript的知识(JavaScript: The Definitive Guide)。另外,对像HTML和CSS这样的网页技术有一些基础的了解也是相当有帮助的,但这些都不是必须的。

  QML 的基本语法
  QML看起来像这样

 import Qt 4.7
Rectangle {
width: 200
height: 200
color: "blue"

Image {
source: "pics/logo.png"
anchors.centerIn: parent
}
}

对象是通过类型而直接被指定的,紧随其后的是一对大括号。对象类型总是以大写字母开头。在上面的例子中,存在两个对象Rectangle和Image。在大括号之间,我们可以指定对象的相关信息,例如它的属性。属性是通过“property: value”这样的方式被呈现的。在上面的例子中,我们可以看到Image拥有一个属性叫做source,它被分配了一个值叫做"pics/logo.png"。属性和值被冒号分隔。

属性可以被一行行指定:

Rectangle {
width: 100
height: 100
}

同时也可以在一个单行上指定多个属性:

Rectangle { width: 100; height: 100 }

当多个property/value对被指定在一个单行上时,他们需要通过分号来分隔。

import声明是为了导入包含所有标准的QML元素的Qt模块。没有这个导入声明,Rectangle和Image元素都将不能被使用。

  表达式

除了直接给属性指定值之外,你也可以像在JavaScript中一样通过表达式来指定。

 Rotation {
angle: 360 * 3
}

  这些表达式可以包含其他对象和属性,这样子的操作将会产生一个绑定关系,当这个表达式的值发生改变时,已经通过表达式指定了的属性的值也会自动更新到那个值。

 

 Item {
Text {
id: text1
text: "Hello World"
}
Text {
id: text2
text: text1.text
}
}

在上面的这个例子中,text2对象将会显示和text1一样的文字.如果text1改变了,text2也会自动变化为相同的值。

在引用其他对象时,可以通过对象的id 值,来进行引用。

  QML注释

QML中的注释方式和Javascript 的相同。

单行注释使用//;

多行注释使用 /* … */ 。

 Text {
text: "Hello world!"/*print text*/
//opacity: 0.5
}

  属性
  属性命名

属性通常以小写字符开头(附加属性除外)

  属性类型

QML支持多种属性(具体参看QML Basic Types)。基本的属性包括 int, real, bool, string, color和lists。

 Item {
x: 10.5 // a 'real' property
...
state: "details" // a 'string' property
focus: true // a 'bool' property
}

  QML的属性是属于类型安全的,也就是说属性的类型必须和所分配的值是相同的。例如,Item的x属性是一个real,如果你想要给他分配一个string值,就会得到一个错误。

 

 Item {
x: "hello" // illegal!
}

  id属性

每个对象都可以指定一个专门的属性叫做id,这个属性的值必须是唯一的。在同一个QML文档中不能有相同的id值。通过指定一个唯一可用的id,对象就可以被其他对象和脚本引用。

 Item {
Rectangle {
id: myRect
width: 100
height: 100
}
Rectangle {
width: myRect.width
height: 200
}
}

ps:id必须以小写字母或者下划线开头,并且不能包含除字母、数字和下划线以外的其他字符。

  List属性

List属性看起来像这样

 Item {
children: [
Image {},
Text {}
]
}

  缺省属性

每个对象类型可以指定一个list或者或者对象属性作为缺省属性。如果一个属性已经被声明为缺省属性,那么该属性的标签就可以被省略。

  示例代码

 State {
changes: [
PropertyChanges {},
PropertyChanges {}
]
}

  可以被简化为

 

 State {
PropertyChanges {}
PropertyChanges {}
}

  因为changes是State类型的缺省属性。
  组属性
  在一些示例中属性会构成一个逻辑上的小组,并且通过点(“.”)或者组标记去使用它。
  组属性可以被写成以下形式:

 

 Text {
font.pixelSize: 12
font.bold: true
}

  或者

 

 Text {
font { pixelSize: 12; bold: true }
}

  附加属性

附加属性的意思就是通过一些对象附加一些属性到另一个对象上。附加属性的格式如Type.property ,在这里Type是这个附加属性元素的类型。

 Component {
id: myDelegate
Text {
text: "Hello"
color: ListView.isCurrentItem ? "red" : "blue"
}
}
ListView {
delegate: myDelegate
}

ListView元素附加ListView.isCurrentItem这个属性到它创建的每一个对象中。

另一个附加属性的例子是Keys元素通过附加属性来处理任何可见Item的key press事件,例如:

 Item {
focus: true
Keys.onSelectPressed: console.log("Selected")
}

  信号处理器

信号处理器允许通过事件来响应动作。举个例子来说,MouseArea元素拥有信号处理器来处理鼠标press、release和click:

 MouseArea {
onPressed: console.log("mouse button pressed")
}

所有的信号处理器都是以“on”开头的。

一些信号处理器还包含有选项参数,例如MouseArea onPressed这个信号处理器就有mouse这个参数:

 MouseArea {
acceptedButtons: Qt.LeftButton | Qt.RightButton
onPressed: if (mouse.button == Qt.RightButton) console.log("Right mouse button pressed")
}
目录
相关文章
|
机器学习/深度学习 自然语言处理 开发工具
ModelScope--人像卡通化、人像美肤
利用ModelScope实现美拍人喜欢的人像处理卡通化、人像美肤
ModelScope--人像卡通化、人像美肤
|
机器学习/深度学习 搜索推荐 API
淘宝/天猫按图搜索(拍立淘)API的深度解析与应用实践
在数字化时代,电商行业迅速发展,个性化、便捷性和高效性成为消费者新需求。淘宝/天猫推出的拍立淘API,利用图像识别技术,提供精准的购物搜索体验。本文深入探讨其原理、优势、应用场景及实现方法,助力电商技术和用户体验提升。
|
人工智能 自然语言处理 计算机视觉
Janus-Pro:DeepSeek 开源的多模态模型,支持图像理解和生成
Janus-Pro是DeepSeek推出的一款开源多模态AI模型,支持图像理解和生成,提供1B和7B两种规模,适配多元应用场景。通过改进的训练策略、扩展的数据集和更大规模的模型,显著提升了文本到图像的生成能力和指令跟随性能。
3034 20
Janus-Pro:DeepSeek 开源的多模态模型,支持图像理解和生成
|
存储 数据采集 数据库
Python爬虫实战:股票分时数据抓取与存储
Python爬虫实战:股票分时数据抓取与存储
|
资源调度 JavaScript API
Vue-treeselect:为Vue应用程序提供强大选择器的指南
Vue-treeselect:为Vue应用程序提供强大选择器的指南
2916 0
|
SQL 前端开发 JavaScript
kettle开发-超好用自定义数据处理组件
kettle开发-超好用自定义数据处理组件
1567 0
|
测试技术 开发工具 iOS开发
iOS自动化测试方案(三):WDA+iOS自动化测试解决方案
这篇文章是iOS自动化测试方案的第三部分,介绍了在没有MacOS系统条件下,如何使用WDA(WebDriverAgent)结合Python客户端库facebook-wda和tidevice工具,在Windows系统上实现iOS应用的自动化测试,包括环境准备、问题解决和扩展应用的详细步骤。
4326 1
iOS自动化测试方案(三):WDA+iOS自动化测试解决方案
|
缓存 安全 应用服务中间件
Web安全-HTTP Host头攻击
Web安全-HTTP Host头攻击
1966 7
|
机器学习/深度学习 计算机视觉
【YOLOv8改进 - 注意力机制】c2f结合CBAM:针对卷积神经网络(CNN)设计的新型注意力机制
【YOLOv8改进 - 注意力机制】c2f结合CBAM:针对卷积神经网络(CNN)设计的新型注意力机制
|
SQL 关系型数据库 数据库
17. Python 数据库操作之MySQL和SQLite实例
17. Python 数据库操作之MySQL和SQLite实例
709 2