最近有空，了解一下qml的一些事情，也为自己以后如果需要开发一些ui程序做做准备，比如做做demo，纯粹搞
html，js自己有点不感冒，呵呵，传统client 程序员得思维，当然这样还可以继续研究qt的一些机制。
首先qml 按照我的初步理解，应该是一种 简化版的html，js，css组合模型； 即它抛却了browser的很多指责，仅仅将界面展示布局，界面业务处理 抽象出来实现。 所以从思想上它和html，js，css是类似的，但是实现上或者描述上它更加集中，因为它的任务不需要处理下载，xhr，dom tree，rendering tree等浏览器业务。
先看看它的一些基本语法。
import QtQuick 1.0 // 这个表示引入一些qt内在的对象，比如item，rectangle等，是不是有点像idl
{ // 这个有点像js的json对象定义格式，定义了一些对象以及它们的属性
width: 200
height: 200
color: "blue"
Image {
source: "pics/logo.png"
anchors.centerIn: parent
}
}其实这个文件时可以直接执行的，它不是用browser来执行的，而是用一个叫做qmlview的程序，当然你也可以认为它也是一个特殊用途的browser。
效果如下
通过这个效果可以看到，图片居中显示在一个矩形内。
回到source code。
可以看到我们定义了一个对象叫做rectangle , 它有一些外观属性，然后有一个子对象，这个子对象也有一些外观属性。 这些都很直观，但是一般在使用的时候，你得知道你有哪些属性可以设置。像image的anchors.centerIn 它是不是父类的属性呢？
这些打开qassistant. QML elements 就可以找到 rectangle, image . 比如image 它派生自 item
,而anchors.centerIn 则恰恰是item提供的属性。
Rectangle {
width: 200 // item 的属性
height: 200 // item的属性
color: "blue" // 自己的属性，表示如何fill rectangle
Image {
source: "pics/logo.jpg" // 自己的属性
anchors.centerIn: parent // item的属性，表示以谁居中,像本例，它就表示在parent内居中
}
}
再来看一个关于anchors.xxx 的例子。
下面讲一下qml的注释，qml的注释，和c++一样， // /**/ 都可以。
对象识别。
刚才的例子还是过于简单，对象都没有标识，而只有一个类型。 实际上稍复杂些的例子，就需要给对象一个标识id。
import QtQuick 1.0
Rectangle {
width: 200
height: 200
color: "blue"
Image {
id : img1 // 标识
source: "pics/logo.png"
anchors.left : parent.left
anchors.leftMargin : 5
}
Image {
source: "pics/flower.png"
anchors.left : img1.right // 我在左边图片的右边
anchors.leftMargin : 5
}
}
表达式的使用， qml也支持一些js语法的表达式使用，比如
import QtQuick 1.0 // 这个表示引入一些qt内在的对象，比如item，rectangle等，是不是有点像idl
Rectangle { // 这个有点像js的json对象定义格式，定义了一些对象以及它们的属性
width: 200
height: 200
color: "blue"
Image {
id : img1
source: "pics/logo.png"
anchors.left : parent.left
anchors.leftMargin : 5
}
Image {
source: "pics/flower.png"
anchors.left: img1.right
anchors.leftMargin : img1.width / 2
}
}
不过这儿有个注意事项，就是这个表达式使用的时候要注意类型。
比如 你不能将一个数字计算的表达式用在一个AnchorLine 上， 也就是说如果
anchors.left: img1.right + 5 // 这样将发生错误 ，因为类型不匹配
属性变更通知
import QtQuick 1.0
Rectangle {
width: 200
height: 200
color: "blue"
Image {
id : img1
source: "pics/logo.png"
anchors.left : parent.left
anchors.leftMargin : 5
}
Image {
source: "pics/flower.png"
anchors.left: img1.right
anchors.leftMargin : parent.width / 4
onXChanged: console.log("left change 2:",x);
}
}
这个log实际就是我将窗口水平拖动后产生的一系列输出。
列表属性
children: [
Text{
id: txt1
text: "this is test!"
anchors.verticalCenter: img2.verticalCenter
//anchors.topMargin: 5
},
Image{
id: img2
source: "pics/flower.png"
anchors.left: txt1.right
anchors.leftMargin: 5
anchors.top: img1.bottom
anchors.topMargin: 5
}
]
效果
分组化属性
Grouped properties can be written like this:
{
font.pixelSize: 12
font.bold: true
}or like this:
{
font { pixelSize: 12; bold: true }
}attached 属性 (这个概念我还有点模糊)
import QtQuick 1.0
Item {
width: 200; height: 250
ListModel {
id: myModel
ListElement { type: "Dog"; age: 8 }
ListElement { type: "Cat"; age: 5 }
}
Component {
id: myDelegate
Text {
text: type + ", " + age
color: ListView.isCurrentItem ? "red" : "blue"
}
}
ListView {
anchors.fill: parent
model: myModel
delegate: myDelegate
}
}
事件处理
ListView {
id: lv1
anchors.fill: parent
model: myModel
delegate: myDelegate
MouseArea {
anchors.fill: parent
onClicked: {
var i = lv1.indexAt(mouse.x,mouse.y);
if(i != -1)
{
lv1.currentIndex = i;
}
}
}
}
上图中算中item为红色。
