QML语法基础

翻译参照原文:QML Syntax Basics

QML是一种多范式语言,可以根据对象的属性以及它们如何关联和响应在其他对象中的变化来定义对象。在纯粹的命令式代码中,属性和动作的变化通过一系列逐步处理的语句来表达,与之不同的是,QML的声明式语法将属性和行为的变化直接整合入单个对象中。在需要复杂复杂的定制应用行为的情况下,这些属性定义可以包括命令式代码。

QML源码通常由引擎通过QML文档加载,QML文档是QML代码的独立文档。这些可以用来定义在应用中复用的QML对象类型。注意类型名称必须以大写字母开始,才能在QML文件中声明为QML对象类型。

导入语句

一个QML文档可以在文件头部有一个或者多个导入。一个导入可以是以下任一一种:

    * 已注册类型的版本化命名空间

    * 包含类型定义的QML文档的相对路径    

    * 一个JavaScript文件

JavaScript文件导入在导入后必须是可用的,这样才能访问它们提供的属性和方法。

各种导入的通用形式如下:

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代码块定义了要创建的对象树。对象使用对象声明来定义,对象声明描述了要创建的对象的类型以及该对象的属性。每个对象都可以使用嵌套对象声明来声明子对象。

对象声明包括其对象类型的名称,后跟一组大括号。所有的属性和子对象都在大括号中声明。

这是一个简单的对象声明:

Rectangle {

    width: 100

    height: 100

    color: "red"

}

这个示例定义了一个Rectangle类型的对象,后面跟着一对大括号,括号里封装了定义给对象的属性。Rectangle类型是由QtQuick提供的类型,此处定义的属性是矩形的width、height和color属性的值。(这些属性由Rectangle类型提供,在Rectangle文档中有所描述)

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

import QtQuick 2.0

Rectangle {

    width: 100

    height: 100

    color: "red"

}

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


注意:如果一个对象定义只是有少数属性,可以像这样写在单行里,使用分号分隔属性:

Rectangle { width: 100; height: 100; color: "red" }

很明显,示例中声明的Rectangle对象实际上很简单,只定义了几个属性。为了创建更有用的对象,对象声明可以定义很多其他类型:这些会在QML对象属性文档中论述。另外,对象声明可以定义子对象,接下来会有论述。

子对象

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

比如下例中,Rectangle对象声明下包含Gradient对象声明,Gradient对象声明中又包含两个GrandientStop声明:

import QtQuick 2.0

Rectangle {

    width: 100

    height: 100

    gradient: Gradient { 

       GradientStop { position: 0.0; color: "yellow" }         

       GradientStop { position: 1.0; color: "green" }

     }

}

当这段代码被引擎加载时,会创建一个根节点是Rectangle对象的对象树;Rectangle对象有一个Gradient的子对象,该子对象中又有两个GradientStop子对象。

注意,然而,这个是在QML对象树上下文中的父-子关系,不是在视图上下文中的父-子关系。在视图中的父-子关系概念是QtQuick模块中的Item类型提供的,Item类型是大多数QML类型的基本类型,因为大多数QML对象都要进行视觉渲染。比如,Rectangle和Text都是基于Item的类型,而下例中,一个Text对象被声明为一个Rectangle对象的可视子对象。

import QtQuick 2.0

Rectangle

 width: 200 

 height: 200 

 color: "red" 

  Text

     anchors.centerIn: parent 

     text: "Hello, QML!" 

   }

}

在上述代码中,当Text对象引用其父值时,它引用的是自己的视图父对象,不是对象树中的父对象。在这种情况下,它们是同一个:Rectangle对象在QML对象树中和视图中都是Text对象的父对象。然而,虽然可以更改父属性来改变视图父级,但无法从QML中改变对象树上下文中的父级。

(另外,注意Text对象在声明时没有被赋值给Rectangle的一个属性,不像之前的例子,把Gradient对象赋值给了矩形的gradient属性。这是因为Itemd的children属性已经被设置为这个类型的默认属性,以便来使用这种更方便的语法。)

注释

QML中的注释语法类似JavaScript:

    * 单行注释以//开始,在行尾结束

    * 多行注释以/*开始,以*/结束

Text {
       text: "Hello world!"      //a basic greeting

       /*

            We want this text to stand out from the rest so

            we give it a large size and different font.

         */

        font.family: "Helvetica" 

        font.pointSize: 24

}

在处理QML代码时,引擎会忽略代码。注释非常有助于解释代码片段是在做什么,无论是以后做参考还是向其他人做解释。

注释也可以用来阻止代码执行,有时候对追踪问题非常有用。

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

在上述示例中,Text对象会有默认的透明度,因为opacity: 0.5这行已经变成了一行注释。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,980评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,178评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,868评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,498评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,492评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,521评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,910评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,569评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,793评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,559评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,639评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,342评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,931评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,904评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,144评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,833评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,350评论 2 342

推荐阅读更多精彩内容