QtQuick简单教程
上⼀篇《》我们已经分别在电脑和 Android ⼿机上运⾏了第⼀个 Qt Quick ⽰例—— HelloQtQuickApp ，这篇呢，我们就来介绍 Qt Quick 编程的⼀些基本概念，为创建复杂的 Qt Quick 应⽤奠定基础。
⾸先看⼀下《》中的 main.qml ⽂件：
android简单教程现在我们结合 main.qml ⽂件来讲解。
import 语句
main.qml ⽂件第⼀⾏代码：import QtQuick 2.0 。这⾏代码引⼊了 QtQuick 模块， import 语句的作⽤与 C++ 中的 #include 类似，与 Java 中的 import 效果⼀样。不再啰嗦了。
Qt Quick 基本元素
Qt Quick 作为 QML 的标准库，提供了很多基本元素和控件来帮助我们构建 Qt Quick 应⽤。如果拿 C++ 来⽐拟， QML 就相当于
C++ 语⾔本⾝，⽽ Qt Quick 相当于 STL 。好吧，你可能觉得有点驴头不对马嘴，没关系，有这么点⼉意思就成。
Rectangle
main.qml 的第三⾏代码，定义了⼀个 Rectangle 类型的对象作为 QML ⽂档的根对象。关于对象在 qml ⽂件中的描述，《》⼀⽂中已经讲解，这⾥不再赘述。下⾯咱们看看 Rectangle 到底是什么。
Rectangle ⽤来绘制⼀个填充矩形，可以带边框，也可以不带，可以使⽤纯⾊填充，也可以使⽤渐变⾊填充，甚⾄还可以不填充⽽只提供边框……
Rectangle 有很多属性。
width ⽤来指定宽， height ⽤来指定⾼，我们已经见识过了。
color 属性可以指定填充颜⾊，⽽ gradient 属性则⽤来设置渐变⾊供填充使⽤，如果你同时指定了 color 和 gradient ，那么 gradient ⽣效；如果你设置 color 属性为 transparent ，那么就可以达到只绘制边框不填充的效果。
border.width 指定边框的宽度， lor 指定边框颜⾊。
Rectangle 还可以绘制圆⾓矩形，你只要设置 radius 属性就⾏了。
下⾯我们来看⼀个简单的⽰例：
Rectangle {
width: 320;
height: 480;
color: "blue";
border.width: 2;
radius: 12;
}
你可以修改 HelloQtQuickApp 的 main.qml ⽂件来查看效果，也可以建⽴⼀个新的⼯程。
上⾯的 Rectangle 对象，我们
颜⾊
关于颜⾊值， 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"
}
渐变⾊
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"; }
}
}
刚刚我们使⽤了 rotation 属性，其实它来⾃ Rectangle 的⽗类 Item 。
Item
Item 是 Qt Quick 中所有可视元素的基类，虽然它⾃⼰什么也不绘制，但是它定义了绘制图元所需要的⼤部分通⽤属性，⽐如 x 、 y 、width 、 height 、 锚定（ anchoring ）和按键处理。
Item 的属性特别多，除了前⾯提到的，还有 scale / smooth / anchors / antialiasing / enabled / visible / state / states / children 等等，详情参考 Qt 帮助⽂档。
你可以使⽤ 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"; }
}
}
}
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 属性，它 Item 的属性，是 Qt Quick 引⼊的⼀种新的布局⽅式。
使⽤ anchors 进⾏界⾯布局
anchors 提供了⼀种⽅式，让你可以通过指定⼀个元素与其它元素的关系来确定元素在界⾯中的位置。
你可以想象⼀下，每个 item 都有 7 条不可见的锚线：左（left）、⽔平中⼼（horizontalCenter）、上（top）、下（bottom）、右（right）、垂直中⼼（verticalCenter）、基线（baseline）。看下图就明⽩了：
在上图中，没有标注基线，基线是⽤于定位⽂本的，你可以想象⼀⾏⽂字端坐基线的情景。对于没有⽂本的图元，baseline 和 top ⼀致。
使⽤ anchors 布局时，除了对齐锚线，还可以在指定上（topMargin）、下（bottomMargin）、左（leftMargin）、右（rightMargin）四个边的留⽩。看个图就明⽩了：
好了，基础知识介绍完毕，可以看⼀些例⼦了。
import QtQuick 2.0
Rectangle {
width: 300;
height: 200;
Rectangle {
id: rect1;
anchors.left: parent.left;
anchors.leftMargin: 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;
width: 120;
height: 120;
rotation: 90;
gradient: Gradient {
GradientStop { position: 0.0; color: "#202020"; }
GradientStop { position: 1.0; color: "#A0A0A0"; }
}
}
}
上⾯的代码运⾏后与之前使⽤ Item 分组的⽰例代码（绝对坐标布局）效果⼀样。这⾥的第⼆个矩形的左边从第⼀个矩形的右边开始、顶部向第⼀个矩形的顶部对齐。⽽对第⼀个矩形的引⽤，是通过的 id 属性来完成的，请参看《 》。
Item 的 anchors 属性，除了上⾯介绍的，还有⼀些，如 centerIn 表⽰将⼀个 item 居中放置到另⼀个 item 内； fill 表⽰充满某个item ……更多请参考 Item 类的⽂档。这⾥再举个使⽤ centerIn 和 fill 的⽰例：
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论