qml教程

QML

QML是一种描述性的脚本语言,文件格式以.qml结尾。语法格式非常像CSS(参考后文具体例子),但又支持javacript形式的编程控制。它结合了QtDesigner UI和QtScript的优点。QtDesigner可以设计出.ui界面文件,但是不支持和Qt原生C代码的交互。QtScript可以和Qt原生代码进行交互,但是有一个缺点,如果要在脚本中创建一个继承于QObject的图形对象非常不方便,只能在Qt代码中创建图形对象,然后从 QtScript中进行访问。而QML可以在脚本里创建图形对象,并且支持各种图形特效,以及状态机等,同时又能跟Qt写的C代码进行方便的交互,使用起来非常方便。

属性

  • 属性命名 - 属性命名以首字母为小字(附加属性除外)。

  • 属性类型 - 基本类型包括整型、实数型、布尔、字符串、颜
    色以及列表。

  • id 属性 - 每个对象可给予一个特定唯一的属性称之为 id 。在同一个 QML 文件中不可能拥有与其它对象同名的 id值。指定一个 id 可以允许该对象可以被其它的对象与脚本引用。

  • 列表属性 - 列表是包含在方括号内,以逗号分隔的列表元素。在你只分配单一项目列表的情况下,是可以省略方
    括号

  • 默认属性 - 每个对象类型可以指定列表或对象属性之一作为其默认属性。如果一属性已被声明为默认属性,该属
    性标记可以被省略

      State {
      	changes: [
      		PropertyChanges {},
      		PropertyChanges {}
      	]
      }
    
      可以简化成这样:
    
      State {
      	PropertyChanges {},
      	PropertyChanges {}
      }
    
  • 分组属性 - 在某些情况下使用一个 '.' 符号或分组符号形成一个逻辑组

      Text {
      	font.pixelSize: 12
      	font.bold: true
      }
      或者这样:
      Text {
      	font { pixelSize: 12; bold: true }
      }
    
  • 附加属性 - 有些对象的属性附加到另一个对象。附加属性的形式为 Type.property 其中 Type 是附加 property元素的类型。

  • 信号处理器 - 信号处理器允许响应事件时处理动作。例如, MouseArea 元素有信号处理器来处理鼠标按下,释放以及单击

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

打印

1、console.log("123");

2、console.log("a is ", a, "b is ", b);

3、打印代码块时间

console.time("wholeFunction");

//代码块

console.timeEnd("wholeFunction");

4、打印执行次数

console.count("fun called")

js

QML引擎直接支持Js对象和数组。任何标准的Js类型都可以在QML中使用var类型进行创建和存储。

import QtQuick 2.2
Item{
    property var theArray: new Array()
    property var theDate: new Date()
    Component.onCompleted:{
        for(var i=0;i<10;i++){
        	theArray.push("Item"+i)
        }
        console.log("Thers are ",theArray.length,"items in the array")
        console.log("the time is",theDate.toUTCString())
	}
}

变量

数据类型

int 整型(所有整型数字,包括负数、零、正数)

double 带小数点的数字,以双精度存储

real 带小数点的数字

bool 布尔类型,1为真、0为假

enumeration 枚举类型

string 字符串类型

list QML对象列表类型

注意:列表是包含在方括号内,以逗号分隔的多个元素的集合。列表内只能包含QML对象,不能包含任何基本类型的字面值。

url 资源定位器

var 通用属性类型

qml中定义变量方法

property+类名+变量名 : 值  

Var

var类型是一个可以引用任何数据类型的通用属性类型。它相当于一个常规的JavaScript变量,var属性可以存储数字,字符串,对象,数组和函数:

Item {
    property var aNumber: 100
    property var aBool: false
    property var aString: "Hello world!"
    property var anotherString: String("#FF008800")
    property var aColor: Qt.rgba(0.2, 0.3, 0.4, 0.5)
    property var aRect: Qt.rect(10, 10, 10, 10)
    property var aPoint: Qt.point(10, 10)
    property var aSize: Qt.size(10, 10)
    property var aVector3d: Qt.vector3d(100, 100, 100)
    property var anArray: [1, 2, 3, "four", "five", (function() { return "six"; })]
    property var anObject: { "foo": 10, "bar": 20 }
    property var aFunction: (function() { return "one"; })
}
# qml  

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×