QML语法基础

简介: 简述QML 是一种多范式语言,使对象能够根据其属性以及如何关联和响应其他对象的更改来定义对象。与纯粹的命令式代码相反,属性和行为的变化通过一系列逐步处理的语句表达。QML 的声明性语法将属性和行为更改直接集成到单个对象的定义中,这些属性定义可以包含必要的代码,在情况复杂的自定义应用程序行为是必要的。QML 源代码通常由引擎通过 QML 文档加载,QML 文档是 QML

简述

QML 是一种多范式语言,使对象能够根据其属性以及如何关联和响应其他对象的更改来定义对象。与纯粹的命令式代码相反,属性和行为的变化通过一系列逐步处理的语句表达。QML 的声明性语法将属性和行为更改直接集成到单个对象的定义中,这些属性定义可以包含必要的代码,在情况复杂的自定义应用程序行为是必要的。

QML 源代码通常由引擎通过 QML 文档加载,QML 文档是 QML 代码的独立文档。这些可以用于定义 QML 对象类型,然后可以在整个应用程序中重复使用。

版权所有:一去丶二三里,转载请注明出处:http://blog.csdn.net/liang19890820

导入语句

QML 文档可以在文件的顶部包含一个或多个 import 语句。一个 import 可以是以下任何一种:

  • 一个已经注册了类型的版本化命名空间(例如:通过插件)
  • 一个包含 QML 文档类型定义的相对目录
  • 一个 JavaScript 文件

在导入时,JavaScript 文件的导入必须是合格的,以便可以访问其提供的属性和方法。

各种 import 的通用形式如下:

  • import Namespace VersionMajor.VersionMinor
  • import Namespace VersionMajor.VersionMinor as SingletonTypeIdentifier
  • import "directory"
  • import "file.js" as ScriptIdentifier

例如:

  • import QtQuick 2.0
  • import QtQuick.LocalStorage 2.0 as Database
  • import "../privateComponents"
  • import "somefile.js" as Script

对象声明

在语法上,一个 QML 代码块定义了一个要被创建的 QML 对象树。使用对象声明来定义对象,对象声明描述了要创建对象的类型以及要给予对象的属性。每个对象也可以使用嵌套对象声明来声明子对象。

一个对象声明包含:

  • 对象类型的名称(例如:Rectangle )
  • 一组花括号{ }: 紧随其(对象类型的名称)后
  • 属性(例如:width)和子对象(例如:Text):在花括号中声明

来看一个简单的对象声明:

Rectangle {
    width: 300
    height: 200
    color: "green"
}

这声明了一个类型为 Rectangle 的对象(Rectangle 类型由 QtQuick 模块提供),后跟一组包含为该对象定义属性的花括号,定义的属性是矩形的 width (宽度)、height(高度)和 color(颜色)。

如果上述对象是 QML 文档的一部分,则可以由引擎加载。也就是说,如果源代码用导入 QtQuick 模块的 import 语句来补充(使 Rectangle 类型可用),如下所示:

import QtQuick 2.3

Rectangle {
    width: 300
    height: 200
    color: "green"
}

当放置到 .qml 文件中并由 QML 引擎加载时,上述代码会使用 QtQuick 模块提供的 Rectangle 类型创建一个 Rectangle 对象:

这里写图片描述

注意:如果对象定义只有少量的属性,可以写在单行,用分号分隔:

Rectangle { width: 300; height: 200; color: "green" }

显然,这个例子中声明的 Rectangle 对象很简单,因为只定义了几个属性值。为了创建更多有用的对象,对象声明可以定义许多其他类型的属性(在下一节中讨论)。另外,对象声明还可以定义子对象,如下所述。

子对象

任何对象声明都可以通过嵌套的对象声明来定义子对象。通过这种方式,任何对象声明隐式声明了一个对象树,可以包含任意数量的子对象。

例如,下面的 Rectangle 对象声明包含了一个 Gradient 对象声明,Gradient 又包含了两个 GradientStop 声明:

import QtQuick 2.3

Rectangle {
    width: 300
    height: 200

    gradient: Gradient {
        GradientStop { position: 0.0; color: "yellow" }
        GradientStop { position: 1.0; color: "green" }
    }
}

当代码被引擎加载时,会创建一个对象树,在根处有一个 Rectangle 对象;这个对象有一个 Gradient 子对象,Gradient 又有两个 GradientStop 子对象。

这里写图片描述

然而,这是一个在 QML 对象树的上下文中的父子关系,而不是在视觉场景的上下文中。在视觉场景中的父子关系的概念由来自 QtQuick 模块的 Item 类型提供,QtQuick 模块是大多数 QML 类型的基本类型,因为大多数 QML 对象旨在可视化地呈现。

例如,Rectangle 和 Text 都是基于 Item 的类型,而在下面,一个 Text 对象已经被声明为一个 Rectangle 对象的可视化子对象:

import QtQuick 2.3

Rectangle {
    width: 300
    height: 200
    color: "green"

    Text {
        anchors.centerIn: parent
        text: "Hello, QML!"
    }
}

这里写图片描述

在上述代码中,当 Text 对象引用它的 parent 值时,指的是它的视觉 parent,而不是对象树中的 parent。在这种情况下,它们是一样的:Rectangle 对象既是 QML 对象树,又是视觉场景的上下文中的 Text 对象的 parent。然而,尽管可以修改 parent 属性以更改视觉父对象,但是对象树的上下文中的一个对象的父对象不能从 QML 更改。

(另外,请注意,Text 对象已经被声明了,而没有赋值给 Rectangle 的属性,这与将 Gradient 对象赋值给 Rectangle 的 gradient 属性的前面的例子不同,这是因为 Item 的 children 属性已经被设置为类型的默认属性来启用这个更方便的语法。)

注释

在 QML 中,注释的语法与 JavaScript 类似:

  • 单行注释:以 // 开头,并在行尾结束。
  • 多行注释:以 /* 开头,以 */ 结尾。
Text {
    text: "Hello QML!"  //一个基本的问候
    /*
        希望这个文本脱颖而出
        给它一个不同的字体和大点的尺寸
    */
    font.family: "Helvetica"
    font.pointSize: 24
}

引擎在处理 QML 代码时会忽略注释。注释的好处很多:

  • 有助于解释代码以提高其可读性,便于日后自己参考或者他人阅读。
  • 用于防止代码执行,这有时对跟踪问题非常有用。
Text {
    text: "Hello QML!"
    //opacity: 0.5
}

这时,Text 对象将具有正常的透明度,因为行 opacity: 0.5 已经被注释掉了。

这里写图片描述

项目验收时,序猿演示功能,猛戳按钮愣是没反应。。。闷头走向工位,打开源码,发现了神奇的 // TODO

目录
相关文章
|
5月前
关于Qt的pri模块化编程详解
今天在移植一份代码的时候遇到了了Qt的`pri`文件,在CSDN上看了一下怎么用,都告诉我新建文件夹,直接Ctrl+S的,试了半天不行,看了一下需要移植的代码,茅塞顿开,分享给大家详细过程。
|
开发者 Python
Python Qt GUI设计:信号与槽的使用方法(基础篇—7)
Python Qt GUI设计:信号与槽的使用方法(基础篇—7)
Python Qt GUI设计:信号与槽的使用方法(基础篇—7)
|
2月前
|
开发框架 数据可视化 JavaScript
qt编程---->qml
qt编程---->qml
|
6月前
|
前端开发 数据可视化 搜索推荐
【100天精通python】Day37:GUI界面编程_PyQt 从入门到实战(上)_PyQt6基本组件、事件和信号槽、界面设计
【100天精通python】Day37:GUI界面编程_PyQt 从入门到实战(上)_PyQt6基本组件、事件和信号槽、界面设计
197 0
|
4月前
|
前端开发 JavaScript PHP
Python(三十三)python模块化编程
1 :模块的定义 模块:用来从逻辑上组织Python代码(变量,函数、类,逻辑:实现一个功能),本质就是.py结尾的Python文件(文件名:test.py,对应的模块名,test)。 2 :模块的引用 模块的引用大概有三种方式: python 复制代码 import module_test, module_test1 # 调用方法的时候,需要module_test. form moudule_test import * # * 表示所有的方法(不建议使用,这个就相当于导入了程序。) 容易造成覆盖,出现问题。 form module_test import module_ajun
51 0
|
10月前
|
自然语言处理 Python 容器
Python|GUI编程中组件的布局
Python|GUI编程中组件的布局
264 0
|
10月前
|
程序员 Python
Python Qt GUI设计:5种事件处理机制(提升篇—3)
之前在Python Qt GUI设计:QTimer计时器类、QThread多线程类和事件处理类(基础篇—8)中,我们已经简单讲到,PyQt为事件处理提供了两种机制:高级的信号与槽机制以及低级的事件处理程序,本篇博文将系统讲解Qt的事件处理机类和制。
|
10月前
|
数据可视化 Python 智能硬件
Python Qt GUI设计:专栏总述
本专栏基于Python语言,侧重于具有GUI效果的上位机项目开发,可实现和硬件设备的数据交互通信。
|
10月前
|
前端开发 测试技术 人机交互
软件测试|超好用超简单的Python GUI库——tkinter(十四)
软件测试|超好用超简单的Python GUI库——tkinter(十四)
107 1
|
10月前
|
数据可视化 测试技术 Python
软件测试|超好用超简单的Python GUI库——tkinter(十六)
软件测试|超好用超简单的Python GUI库——tkinter(十六)
93 0

相关实验场景

更多