分类： 嵌入式
2014-08-26 16:33:10
import QtQuick 2.2
import QtQuick.Window 2.1
Window {
visible: true
width: 360
height: 360
MouseArea {
anchors.fill: parent
onClicked: {
Qt.quit();
}
}
Text {
text: qsTr("Hello World")
anchors.centerIn: parent
}
}
import 语句
main.qml 文件第一行代码：import QtQuick 2.1 。这行代码引入了 QtQuick 模块， import 语句的作用与 C++ 中的 #include 类似，与 Java 中的 import 效果一样。
Qt Quick 基本元素
Qt Quick 作为 QML 的标准库，提供了很多基本元素和控件来帮助我们构建 Qt Quick 应用。
Window
定义了一个 Window 类型的对象作为 QML 文档的根对象。
width 用来指定宽， height 用来指定高
color 属性可以指定填充颜色，而 gradient 属性则用来设置渐变色供填充使用，如果你同时指定了 color 和 gradient ，那么 gradient 生效；如果你设置 color 属性为 transparent ，那么就可以达到只绘制边框不填充的效果。
border.width 指定边框的宽度， border.color 指定边框颜色。
下面我们来看一个简单的示例：
Rectangle {
width: 320;
height: 480;
color: "blue";
border.color: "#808080";
border.width: 2;
radius: 12;
}
颜色
关于颜色值， QML 中可以使用颜色名字，如 blue / red / green / transparent 等，也可以用 "#RRGGBB" 或者 "#AARRGGBB" 来指定，还可以使用 Qt.rgba() / Qt.lighter() 等等方来构造。详情请参考 Qt SDK 中 "QML Basic Type: color" 页面。
color 类型有 r 、 g 、 b 、 a 四个属性，分别表示一个颜色值的 red 、 green 、 blue 、 alpha 四个成分。你可以这样使用它们：
Text {
color: "red"
// prints "1 0 0 1"
Component.onCompleted: console.log(color.r, color.g, color.b, color.a)
}
渐变色
QML 中渐变色的类型是 Gradient ，渐变色通过两个或多个颜色值来指定， QML 会自动在你指定的颜色之间插值，进行无缝填充。Gradient 使用 GradientStop 来指定一个颜色值和它的位置（取值在 0.0 与 1.0 之间）。
Rectangle {
width: 100;
height: 100;
gradient: Gradient {
GradientStop { position: 0.0; color: "#202020"; }
GradientStop { position: 0.33; color: "blue"; }
GradientStop { position: 1.0; color: "#FFFFFF"; }
}
}
Gradient 只能用来创建垂直方向的渐变，不过其它方向的，可以通过给 Rectangle 指定 rotation 属性来实现。下面是示例：
Rectangle {
width: 100;
height: 100;
rotation: 90;
gradient: Gradient {
GradientStop { position: 0.0; color: "#202020"; }
GradientStop { position: 1.0; color: "#A0A0A0"; }
}
}
Item
Item 是 Qt Quick 中所有可视元素的基类，虽然它自己什么也不绘制，但是它定义了绘制图元所需要的大部分通用属性，比如 x 、 y 、 width 、 height 、 锚定（ anchoring ）和按键处理。
Item 的属性特别多, 你可以使用 Item 来分组其它的可视图元。如：
import QtQuick 2.0
Rectangle {
width: 300;
height: 200;
Item {
id: gradientGroup;
Rectangle {
x: 20;
y: 20;
width: 120;
height: 120;
gradient: Gradient {
GradientStop { position: 0.0; color: "#202020"; }
GradientStop { position: 1.0; color: "#A0A0A0"; }
}
}
Rectangle {
x: 160;
y: 20;
width: 120;
height: 120;
rotation: 90;
gradient: Gradient {
GradientStop { position: 0.0; color: "#202020"; }
GradientStop { position: 1.0; color: "#A0A0A0"; }
}
}
}
Component.onCompleted: {
console.log("visible children: " ,gradientGroup.visibleChildren.length);
console.log("visible children: " ,gradientGroup.children.length);
for(var i = 0; i < gradientGroup.children.length; i++){
console.log("child " , i, " x = ", gradientGroup.children[i].x);
}
}
}
分组后可以通过 Item 的 children 或 visibleChildren 属性来访问孩子元素，如上面的代码所示。
另外你可能注意到了， x 、 y 、 width 、 height 四个属性结合起来，可以完成 Qt Quick 应用的界面布局，不过这种采用绝对坐标的方式来布局，不太容易适应多种多样的移动设备分辨率。
使用 anchors 进行界面布局
anchors 提供了一种方式，让你可以通过指定一个元素与其它元素的关系来确定元素在界面中的位置。
你可以想象一下，每个 item 都有 7 条不可见的锚线：左（left）、水平中心（horizontalCenter）、上（top）、下（bottom）、右（right）、垂直中心（verticalCenter）、基线（baseline）。
import QtQuick 2.0
Rectangle {
width: 300;
height: 200;
Rectangle {
id: rect1;
anchors.left: parent.left;
anchors.leftMargin: 20;
anchors.top: parent.top;
anchors.topMargin: 20;
width: 120;
height: 120;
gradient: Gradient {
GradientStop { position: 0.0; color: "#202020"; }
GradientStop { position: 1.0; color: "#A0A0A0"; }
}
}
Rectangle {
anchors.left: rect1.right;
anchors.leftMargin: 20;
anchors.top: rect1.top;
width: 120;
height: 120;
rotation: 90;
gradient: Gradient {
GradientStop { position: 0.0; color: "#202020"; }
GradientStop { position: 1.0; color: "#A0A0A0"; }
}
}
}
Item 的 anchors 属性，除了上面介绍的，还有一些，如 centerIn 表示将一个 item 居中放置到另一个 item 内； fill 表示充满某个 item ……更多请参考 Item 类的文档。这里再举个使用 centerIn 和 fill 的示例：
import QtQuick 2.0
Rectangle {
width: 300;
height: 200;
Rectangle {
color: "blue";
anchors.fill: parent;
border.width: 6;
border.color: "#888888";
Rectangle {
anchors.centerIn: parent;
width: 120;
height: 120;
radius: 8;
border.width: 2;
border.color: "black";
antialiasing: true;
color: "red";
}
}
}
Z 序 与 透明度
Item 除了 x 、 y 属性，其实还有一个 z 属性，用来指定图元在场景中的 Z 序。 z 属性的类型是 real ，数值越小，图元就越垫底（远离我们），数值越大，图元就越靠近我们。
Item 的属性 opacity 可以指定一个图元的透明度，取值在 0.0 到 1.0 之间。
结合 Z 序和透明度，有时可以达到不错的效果。下面是一个简单的示例：
import QtQuick 2.0
Rectangle {
width: 300;
height: 200;
Rectangle {
x: 20;
y: 20;
width: 150;
height: 100;
color: "#606080";
z: 0.5;
}
Rectangle {
width: 100;
height: 100;
anchors.centerIn: parent;
color: "#a0c080";
z: 1;
opacity: 0.6;
}
}
除了视觉效果，有时我们也需要安排图元在场景中的 Z 序。比如一个图片浏览器，可能在加载图片时要显示一个 loading 图标，这个图标要显示在图片之上，此时就可以设置 loading 图元的 Z 序大于图片元素的 Z 序。
按键处理
前面提到 Item 可以处理案件，所有从 Item 继承的元素都可以处理按键，比如 Rectangle ，比如 Button 。
Item 通过附加属性 Keys 来处理按键。Keys 对象是 Qt Quick 提供的，专门供 Item 处理按键事件的对象。它定义了很多针对特定按键的信号，比如 onReturnPressed ，还定义了更为普通的 onPressed 和 onReleased 信号，一般地，你可以使用这两个信号来处理按键
这里举一个简单的例子，检测到 Escape 和 Back 键时退出应用，检测到数字键，就通过 Text 来显示对应的数字。代码如下：
import QtQuick 2.0
Rectangle {
width: 300;
height: 200;
color: "#c0c0c0";
focus: true;
Keys.enabled: true;
Keys.onEscapePressed: Qt.quit();
Keys.onBackPressed: Qt.quit();
Keys.onPressed: {
switch(event.key){
case Qt.Key_0:
case Qt.Key_1:
case Qt.Key_2:
case Qt.Key_3:
case Qt.Key_4:
case Qt.Key_5:
case Qt.Key_6:
case Qt.Key_7:
case Qt.Key_8:
case Qt.Key_9:
keyView.text = event.key - Qt.Key_0;
break;
}
}
Text {
id: keyView;
font.bold: true;
font.pixelSize: 24;
text: qsTr("text");
anchors.centerIn: parent;
}
}
示例中用到了 onPressed / onEscapePressed / onBackPressed 三个附加信号处理器，其中 onPressed 信号的参数是 event ，包含了按键信息，程序中使用 switch 语句与 Qt 对象的枚举值比较来过滤我们关注的按键。
Text
Text 元素可以显示纯文本或者富文本（使用 HTML 标记修饰的文本）。它有 font / text / color / elide / textFormat / wrapMode / horizontalAlignment / verticalAlignment 等等属性，你可以通过这些属性来决定 Text 元素如何显示文本。
当不指定 textFormat 属性时， Text 元素默认使用 Text.AutoText ，它会自动检测文本是纯文本还是富文本，如果你明确知道要显示的是富文本，可以显式指定 textFormat 属性。
import QtQuick 2.0
Rectangle {
width: 300;
height: 200;
Text {
width: 150;
height: 100;
wrapMode: Text.WordWrap;
font.bold: true;
font.pixelSize: 24;
font.underline: true;
text: "Hello Blue Text";
anchors.centerIn: parent;
color: "blue";
}
}
下面的例子仅仅把 "Text" 字样以蓝色显示：
import QtQuick 2.0
Rectangle {
width: 300;
height: 200;
Text {
width: 150;
height: 100;
wrapMode: Text.WordWrap;
font.bold: true;
font.pixelSize: 24;
font.underline: true;
text: "Hello Blue
anchors.centerIn: parent;
}
}
Text 元素的 style 属性提供了几种文字风格，Text.Outline 、 Text.Raised 、 Text.Sunken ，可以使文字有点儿特别的效果。而 styleColor 属性可以和 style 配合使用（如果没有指定 style ，则 styleColor 不生效），比如 style 为 Text.Outline 时，styleColor 就是文字轮廓的颜色。看个简单的示例：
import QtQuick 2.0
Rectangle {
width: 300;
height: 200;
Text {
id: normal;
anchors.left: parent.left;
anchors.leftMargin: 20;
anchors.top: parent.top;
anchors.topMargin: 20;
font.pointSize: 24;
text: "Normal Text";
}
Text {
id: raised;
anchors.left: normal.left;
anchors.top: normal.bottom;
anchors.topMargin: 4;
font.pointSize: 24;
text: "Raised Text";
style: Text.Raised;
styleColor: "#AAAAAA" ;
}
Text {
id: outline;
anchors.left: normal.left;
anchors.top: raised.bottom;
anchors.topMargin: 4;
font.pointSize: 24;
text: "Outline Text";
style: Text.Outline;
styleColor: "red";
}
Text {
anchors.left: normal.left;
anchors.top: outline.bottom;
anchors.topMargin: 4;
font.pointSize: 24;
text: "Sunken Text";
style: Text.Sunken;
styleColor: "#A00000";
}
}
Button
按钮可能是 GUI 应用中最常用的控件了。 QML 中的 Button 和 QPushButton 类似，用户点击按钮会触发一个 clicked() 信号，在 QML 文档中可以为 clicked() 指定信号处理器，响应用户操作。
要使用 Button ，需要引入 import QtQuick.Controls 1.1 。
先看一个简单的示例，点击按钮，退出应用。代码如下：
import QtQuick 2.0
import QtQuick.Controls 1.1
Rectangle {
width: 300;
height: 200;
Button {
anchors.centerIn: parent;
text: "Quit";
onClicked: Qt.quit();
}
}
你可以运行它看看效果。
现在我们再来看 Button 都有哪些属性。
text 属性指定按钮文字，见过了。
checkable 属性设置 Button 是否可选。如果 Button 可选 checked 属性则保存 Button 选中状态。其实我一直没用过这个属性……
iconName 属性指定图标的名字，如果平台的图标主题中存在该名字对应的资源， Button 就可以加载并显示它。iconSource 则通过 URL 的方式来指定 icon 的位置。iconName 属性的优先级高于 iconSource 。
isDefault 属性指定按钮是否为默认按钮，如果是默认的，用户按 Enter 键就会触发按钮的 clicked() 信号。
pressed 属性保存了按钮的按下状态。
menu 属性，允许你给按钮设置一个菜单（此时按钮可能会出现一个小小的下拉箭头），用户点击按钮时会弹出菜单。默认是 null 。
action 属性，允许设定按钮的 action ，action 可以定义按钮的 checked ， text ，tooltip 等属性。默认是 null 。
activeFocusOnPress ，指定当用户按下按钮时是否获取焦点，默认是 false 。
style 属性用来定制按钮的风格，与它配套的有一个 ButtonStyle 类，允许你定制按钮的背景。
其实 Button 比较简单好用，我不准备再啰嗦下去了，咱再看下 style 的使用就结束对 Button 的介绍。
ButtonStyle
要使用 ButtonStyle 需要引入 QtQuick.Controls.Styles 1.1 。
ButtonStyle 类有 background 、 control 、 label 三个属性。我们通过重写 background 来定制一个按钮。 control 属性指向应用 ButtonStyle 的按钮对象，你可以用它访问按钮的各种状态。 label 属性代表按钮的文本，如果你看它不顺眼，也可以替换它。
background 实际是一个 Component 对象， Component（组件） 的概念我们回头讲。这里我们简单的使用 Rectangle 来定制按钮的背景。看下面的示例：
import QtQuick 2.0
import QtQuick.Controls 1.1
import QtQuick.Controls.Styles 1.1
Rectangle {
width: 300;
height: 200;
Button {
text: "Quit";
anchors.centerIn: parent;
style: ButtonStyle {
background: Rectangle {
implicitWidth: 70;
implicitHeight: 25;
border.width: control.pressed ? 2 : 1;
border.color: (control.hovered || control.pressed) ? "green" : "#888888";
}
}
}
}
我通过给 style 对象指定一个 ButtonStyle 对象来定制 Button 的风格。这个就地实现的 ButtonStyle 对象，重写了 background 属性，通过 Rectangle 对象来定义按钮背景。我定义了背景的建议宽度和高度，根据按钮的 pressed 属性（ control 是实际按钮的引用 ）来设置背景矩形的边框粗细，而边框颜色则随着按钮的 hovered 和 pressed 属性来变化。
最终的效果是这样的：当鼠标悬停在按钮上时，边框颜色为绿色；当鼠标按下时，边框变粗且颜色为绿色。
对于 ButtonStyle ，如果有多个按钮同时用到，上面的方式就有点繁琐了，可以像下面这样使用：
import QtQuick 2.0
import QtQuick.Controls 1.1
import QtQuick.Controls.Styles 1.1
Rectangle {
width: 300;
height: 200;
Component{
id: btnStyle;
ButtonStyle {
background: Rectangle {
implicitWidth: 70;
implicitHeight: 25;
color: "#DDDDDD";
border.width: control.pressed ? 2 : 1;
border.color: (control.hovered || control.pressed) ? "green" : "#888888";
}
}
}
Button {
id: openButton;
text: "Open";
anchors.left: parent.left;
anchors.leftMargin: 10;
anchors.bottom: parent.bottom;
anchors.bottomMargin: 10;
style: btnStyle;
}
Button {
text: "Quit";
anchors.left: openButton.right;
anchors.leftMargin: 6;
anchors.bottom: openButton.bottom;
style: btnStyle;
}
}
