QML基础

BASIC

QWidget 和 QML

QWidgets were designed for a different type of user interface than QML, so it is not always a good idea to port a QWidget-based application to QML.

QWidgets are a better choice if your UI is comprised of a small number of complex and static elements.

QML is a better choice if your UI is comprised of a large number of simple and dynamic elements.

QtQuick提供了一套动态的QML元素来定制UI的Framework, 帮助程序员和设计师合作为便携式设备建立流畅的UI; 

QML是对JavaScript的一种扩展, 使用QML元素来构建对象树, 对QObject base类型系统进行改善, 支持自动属性绑定;

Dependency

QtDeclarative: QtCore, QtGui, QtNetwork, QtOpenGL, QtScript, QtSql, QtSvg, QtXmlPatterns

http://qt-project.org/wiki/Qt_Library_Cross_Dependencies

QML语言格式

对象是指定的类型, 首字母大写, 使用大括号;

1 2 3 4

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

属性指定, property: value

属性一般以单行指定, 也可以指定多个属性, 使用分号作为语句的结束;

1	Rectangle { width: 100; height: 100 }

Import语句: import Qt 4.8 OR import QtQuick 1.1, 表示将QML元素或QtQuick库包含进来;

JS表达式

属性可以和表达式绑定, 还可以通过id引用其他对象的属性;

1 2 3 4 5 6 7 8

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

QML注释 单行 //...     多行 /*...*/

属性

通常首字母小写; property int textId;

属性类型: 整型int, 实数real, 布尔bool, 字符串string, 颜色color, 列表等;

QML属性会进行类型安全检测;

1	x:  "hello"  // illegal!

id 每个对象有一个唯一的属性-id, 同一个QML文件不能出现同名的id; id可以被对象以及脚本使用;

Note id首字符必须是小写字符或下划线, 不能包含除字母,数字和下划线以外的字符;

列表属性

1 2 3 4 5 6

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

对于单一项目列表, 可以省略方括号

1 2 3

Image {            children: Rectangle {}       }

默认属性: 属性标记可省略

1 2 3 4 5 6

State {       changes: [ //可省略            PropertyChanges {},            PropertyChanges {}       ] //可省略       }

分组属性: 使用点操作符 '.' 或分组符号

1 2 3 4 5 6 7

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

对象属性: Type.property;

信号处理

1 2 3 4

MouseArea {            acceptedButtons: Qt.LeftButton | Qt.RightButton            onPressed:  if  (mouse.button == Qt.RightButton)     console.log( "Right mouse button pressed" )       }

设置别名

property alias someName: element.property

QML定义signal

signal signalName(type Property)

使用时定义slot: 'onSignalName'

QtQuick针对C++开发者入门

Qt Framework运行性能高, 占内存小, 适合开发移动, 嵌入式与上网本的App;

QML是描述性语言, 适合设计师编写; QML整合了JavaScript与Qt现存的QObject类型系统;

QtQuick包含QML, QDeclarative模块, 以及QtCreator等工具;

QML文档可以是本地文件, 网络资源或者直接构建的文本数据; QML也是一个版本化的语言: import Lib version;

默认属性 children: [Text {},Rectangle {}]; resources: [Timer {}]

锚属性: anchors, 目前有17个;

可视化透明度 opacity: real; 在动画中应该谨慎使用, 多个图层进行渲染将导致性能下降; 最好在最终部署前对尽可能多的场景做预渲染;

子对象对于某些属性可以继承自父级对象;

互动元素

MouseArea - Flickable, Flipable, FocusScope; 可以使用JavaScript表达式;

状态声明 state

动画 Transitions, Animation 

QML视图模式 ListView GridView ListModel ListElement PathView C++QAbstractItemModel

QML文档是UTF-8编码格式的;

---End---