开始QML吧
上面的Hello,World源代码如下
1 import Qt 4.7
2
3 Rectangle {
4 id: page
5 width: 500; height: 200
6 color: “lightgray”
7
8 Text {
9 id: helloText
10 text: “Hello world!”
11 font.pointSize: 24; font.bold: true
12 y: 30; anchors.horizontalCenter: page.horizontalCenter
13 }
14 }
第1行是Qt QML的统一用法，指明当前QML会使用Qt-4.7里已经定义好的类型，比如第3行的Rectangle和第8行的Text。
第3行开始至文章结束处则定义了一个矩形的图形区域对象，第4行则申明了该矩形区域对象的id为”page”可以被其它对象识别并通过该id访问其成员属性，另外几个属性width/height/color则很好理解，语法跟CSS类似，可以写在一行中用分号”;”隔开。
第8行至第12行则是一个文本对象，看它代码的嵌套结构可以知道它是内嵌于Rectangle的。Text的属性除了anchors其它几个都能顾名思义。anchors描诉的是当前对象的位置和其它对象的相对关系，这里看到其水平中心位置在“page“的水平中心位置。如果想对anchors了解更多，请参考锚的解释。
以上就是Hello,World的全部代码，将其存为hellowordl.qml，那么只要执行qml hellowrold.qml就能看到文章前头的界面了。

更多对象？
在上面的代码中我们用到了Rectangle和Text，那么我还有哪些对象以及这些对象有哪些属性呢。那么请访问QML-Item类,Item类是QML最基础的类，通过查看它的继承类以及这些继承类可用的属性，你可以添加更多你感兴趣的内容。
好吧, Happy QML。

QML入门教程(2)
在上一篇文章里我们使用了最基础的QML类型实现了文字Hello,World的显示。这篇文章中将会增加颜色选项面板，用户可以给Hello,World设置不同的颜色，如下图显示

QML组件
从图中可以看到选项面板由6个颜色小块组成，它们唯一的区别就是颜色不一样。那么我们就可以用组件(Component)来实现一个颜色块，然后在需要的时候使用这个组件就可以了。组件其实和其它编程语言中的宏，函数，类，结构体等功能差不多，就是代码复用。作为程序员，我知道你懂的。 组件由一个单独的QML文件名组成，文件名总是以大写字母开头，要使用该组件的时候直接使用该文件名就可以了。关于如何定义自己的组件，请访问Defining new Components。我们为一个颜色块定义了一个Cell.qml文件，然后使用Cell作为一个去访问它。

Cell.qml的内容import Qt 4.7
Item {
id: container
property alias cellColor: rectangle.color
signal clicked(color cellColor)
width: 40; height: 25
Rectangle {
id: rectangle
border.color: "white"
anchors.fill: parent
}
MouseArea {
anchors.fill: parent
onClicked: container.clicked(container.cellColor)
}
}
挨个看代码～
Item {
id: container
property alias cellColor: rectangle.color
signal clicked(color cellColor)
width: 40; height: 25
Item是最常使用的QML类型，一般用作其它类型的容器，可以理解成最顶级的父类，功能类似于QtGui中的QWidget。用一个属性别名访问其内嵌对象rectangle的color属性。在其它文件中可以用Cell对象的cellColor获得rectangle的color值。 signal clicked(color cellColor)则为对象定义了一个信号，在代码的其它部分可以发出这个信号。
Rectangle {
id: rectangle
border.color: “white”
anchors.fill: parent
}
这一部分没有特别好说的，在Item中内嵌了一个id为rectangle白边框的矩形区域，大小占满整个Item。
MouseArea {
anchors.fill: parent
onClicked: container.clicked(container.cellColor)
}
MouseArea则为Item增加了一块鼠标响应区，看它的anchors知道，在整个Item区域内都是鼠标活动区，都能侦听到鼠标事件。onClicked那一行则相当于为鼠标单击事件增加了一个处理行为，这里是发出了一个clicked()的信号。这个信号正是我们在Item里定义的那个signal。 Cell.qml写完了，再来看看程序的主文件。

main.qml的内容import Qt 4.7
Rectangle {
id: page
width: 500; height: 200
color: "lightgray"
Text {
id: helloText
text: "Hello world!"
y: 30
anchors.horizontalCenter: page.horizontalCenter
font.pointSize: 24; font.bold: true
}
Grid {
id: colorPicker
x: 4; anchors.bottom: page.bottom; anchors.bottomMargin: 4
rows: 2; columns: 3; spacing: 3
Cell { cellColor: "red"; onClicked: helloText.color = cellColor }
Cell { cellColor: "green"; onClicked: helloText.color = cellColor }
Cell { cellColor: "blue"; onClicked: helloText.color = cellColor }
Cell { cellColor: "yellow"; onClicked: helloText.color = cellColor }
Cell { cellColor: "steelblue"; onClicked: helloText.color = cellColor }
Cell { cellColor: "black"; onClicked: helloText.color = cellColor }
}
}
这里在原来的基础上增加了一个Grid网格。x坐标是4，底部挨着page的底部，所以我们看到的是在左下角。 新增的6个Cell，名字和Cell.qml是一样的。通过cellColor属性将颜色传给了每个颜色块。 当Cell接收到onClicked事件的时候,关联的代码回去修改Hello,World上的颜色。细心的朋友可能会注意到Cell只是定义了clicked()的信号，并没有定义onClicked()啊，是的这就是Component的语法规则了。如果你在Cell.qml里定义的是clicked(),那么你在main.qml中引用的时候就该用onClicked()了。
好了，代码也不少了，随便改动改动，你会了解更多QML的秘密的:)

完整的源代码main.qmlimport Qt 4.7
Rectangle {
id: page
width: 500; height: 200
color: "lightgray"
Text {
id: helloText
text: "Hello World!"
y: 30
anchors.horizontalCenter: page.horizontalCenter
font.pointSize: 24; font.bold: true
MouseArea { id: mouseArea; anchors.fill: parent }
states: State {
name: "down"; when: mouseArea.pressed == true
PropertyChanges { target: helloText; y: 160; rotation: 180; color: "red" }
}
transitions: Transition {
from: ""; to: "down"; reversible: true
ParallelAnimation {
NumberAnimation { properties: "y,rotation"; duration: 500; easing.type: Easing.InOutQuad }
ColorAnimation { duration: 500 }
}
}
}
Grid {
id: colorPicker
x: 4; anchors.bottom: page.bottom; anchors.bottomMargin: 4
rows: 2; columns: 3; spacing: 3
Cell { cellColor: "red"; onClicked: helloText.color = cellColor }
Cell { cellColor: "green"; onClicked: helloText.color = cellColor }
Cell { cellColor: "blue"; onClicked: helloText.color = cellColor }
Cell { cellColor: "yellow"; onClicked: helloText.color = cellColor }
Cell { cellColor: "steelblue"; onClicked: helloText.color = cellColor }
Cell { cellColor: "black"; onClicked: helloText.color = cellColor }
}
}

除了这个main.qml之外，还有一个Cell.qml也是需要的，和教程(2)中的完全一样。下面来看一看比起教程(2)的代码增加出来的内容。
Text{
...
states: State {
name: "down"; when: mouseArea.pressed == true
PropertyChanges { target: helloText; y: 160; rotation: 180; color: "red" }
}
transitions: Transition {
from: ""; to: "down"; reversible: true
ParallelAnimation {
NumberAnimation { properties: "y,rotation"; duration: 500; easing.type: Easing.InOutQuad }
ColorAnimation { duration: 500 }
}
}
...
}
states内嵌于Text之中，可以为Text元素添加多个状态，现在的这个例子只增加了一个状态。该状态的名为为”down”,然后由“when”指 定了什么时候触发这个状态。PropertyChanges则指定了哪个元素的哪些属性会发生什么样的变化。例子中PropertyChanges利用 “target”指定了id为”helloText”的元素会发生变化，包括其y,rotation,color等属性。
transitions 是用于增加动画效果的（如果把transitions这一段代码删去，Hello,World的文字也会发生变化,但是看不到中间动画渐变效果)。同样可 以看到transitions是复数形式，意味着可以添加多个动画过程。“from”和”to”指明了当前的动画作用于哪两个状态变化之间。 “from”和”to”的参数名来自于State中的”name”属性。
ParalleAnimation则指定了有多个 有多个动画并行发生。NumberAnimation用于qreal类型的属性变化,ColorAnimation则用于颜色变化。更多 Animation请在QML文档中查找”Animation and Transitions”。
好了，三篇教程到此结 束。

TextField实用大全
介绍
TextField 是Qt Quick Components 中用于输入和显示单行文本的控件，通过对其属性的设置，可以实现一些特定的功能，如对输入文本的限制，拼写检查等。下文将具体介绍一些特定功能的实现。
特定功能的具体实现TextField实现密码输入
需要设置其echoMode属性和inputMethodHints属性，具体QML代码如下：
TextField{
anchors {left: parent.left; right: parent.right;}
placeholderText: "Password field"
echoMode: TextInput.Password
inputMethodHints: Qt.ImhNoAutoUppercase | Qt.ImhNoPredictiveText
}
TextField实现输入字符的限制
需要设置其validator 属性，具体QML代码如下：
TextField{
anchors {left: parent.left; right: parent.right;}
placeholderText: "Value between 0 and 100 (mandatory field)"
validator: IntValidator{bottom: 0; top: 100;}
inputMethodHints: Qt.ImhDigitsOnly | Qt.ImhNoPredictiveText
}
注：输入的字符只能为0到100的整数TextField实现拼写检查
需要设置其errorHighligh属性，具体代码如下：
TextArea
{
anchors {left: parent.left; right: parent.right;}
placeholderText: "Error highlight when more than 5 characters"
errorHighlight: text.length > 5
}
注： 当输入字符长度大于5，并且有拼写错误时，TextArea将显示红框
TextField实现输入无联想记忆
需要设置其inputMethodHints属性，具体代码如下：
TextField{
anchors {left: parent.left; right: parent.right;}
inputMethodHints: Qt.ImhNoPredictiveText
}
TextField实现默认输入法为数字
需要设置其inputMethodHints属性，具体代码如下
TextField{
anchors {left: parent.left; right: parent.right;}
inputMethodHints: Qt.ImhDigitsOnly | Qt.ImhNoPredictiveText
}
TextField实现默认输入法为大写字母
需要设置其inputMethodHints属性，具体代码如下：
TextField{
anchors {left: parent.left; right: parent.right;}
inputMethodHints: Qt.ImhUppercaseOnly
}
TextField实现EMAIL输入
需要设置其inputMethodHints属性，具体代码如下：
TextField{
anchors {left: parent.left; right: parent.right;}
inputMethodHints: Qt.ImhNoAutoUppercase | Qt.ImhEmailCharactersOnly | Qt.ImhNoPredictiveText
}
TextField实现PhoneNumber输入
需要设置其inputMethodHints属性，具体代码如下：
TextField{
anchors {left: parent.left; right: parent.right;}
inputMethodHints: Qt.ImhDialableCharactersOnly | Qt.ImhNoPredictiveText
}
TextField实现URL输入
需要设置其inputMethodHints属性，具体代码如下：
TextField{
anchors {left: parent.left; right: parent.right;}
inputMethodHints: Qt.ImhNoAutoUppercase | Qt.ImhUrlCharactersOnly | Qt.ImhNoPredictiveText
}

在Meego上控制横竖屏
引言
在手机上控制横竖屏显示是应用程序经常要遇到的问题。由于在 Meego 上原来的setOrientation(MainWindow::ScreenOrientationLockLandscape) 以及 ScreenOrientationLockPortrait，ScreenOrientationAuto等已经不起作用了（并且 QWidget 在 Meego 上也已经不是主要支持对象了）。取而代之的是一套 QML Component 的实现方式。 本文就向大家介绍如何在 Meego 上控制横竖屏。
具体步骤
首先开发 Meego 程序需要安装 Meego 自己的 SDK，Meego SDK和 Qt SDK 的功能基本是差不多的，只不过它是专门用于开发 Meego 应用程序的。 首先新建一个Qt Quick Project -> Harmattan application。
目前新的Qt Component中有一个Page Element,它有一个 orientationLock 属性，这就是我们锁屏所用到的关键点，它具体包含有4个值
PageOrientation.Automatic (default)
PageOrientation.LockPortrait
PageOrientation.LockLandscape
PageOrientation.LockPrevious
分别是用于自动旋转，锁定竖屏，锁定横屏和保持之前屏幕状态的。
下面是main.qml
import QtQuick 1.1
import com.meego 1.0
PageStackWindow{
id: appWindow
initialPage: MyOrientationPage{}
}
PageStackWindow是用于管理页面的，最初呈现在用户面前的是initialPage。
我们看下MyOrientationPage也就是initialPage是怎么写的：
import QtQuick 1.1
import com.meego 1.0
Page {
id: orientationModePage
Text {
anchors.centerIn: parent
id: mytext
text: "Hello PageOrientation.LockPortrait"
font.pixelSize: 20
}
Component.onCompleted: {
orientationModePage.orientationLock = PageOrientation.LockPortrait
}
}
这个例子是把应用程序强制锁成竖屏状态，在页面创建之后将其orientationLock 赋值为 PageOrientation.LockPortrait。

qt太肿了

完全看不懂

好高深的样子
来自 MeeGo 客户端

看的我都头晕。。。
——————————————
--来自无比至尊的nokia symbian qt客户端，我们是神秘的系统。