学习了MouseArea,我们继续选择一个基本的组件进行学习,这次我们学习text的Demo。
text的Demo位于F:\Qt\Qt5.3.2\Examples\Qt-5.3\quick\text目录。通过text.qmlproject文件我们了解,该Demo的mainFile是text.qml。
Item {
height: 480
width: 320
LauncherList {
id: ll
anchors.fill: parent
Component.onCompleted: {
addExample("Hello", "An Animated Hello World", Qt.resolvedUrl("fonts/hello.qml"));
addExample("Fonts", "Using various fonts with a Text element", Qt.resolvedUrl("fonts/fonts.qml"));
addExample("Available Fonts", "A list of your available fonts", Qt.resolvedUrl("fonts/availableFonts.qml"));
addExample("Banner", "Large, scrolling text", Qt.resolvedUrl("fonts/banner.qml"));
addExample("Img tag", "Embedding images into text", Qt.resolvedUrl("imgtag/imgtag.qml"));
addExample("Text Layout", "Flowing text around items", Qt.resolvedUrl("styledtext-layout.qml"));
}
}
}
从代码来看,该Example主界面是一个LauncherList,其中包含6个子元素,分别从6个方面演示text的操作。
先看一下程序运行的效果图:
LauncherList简述
LauncherList是一个自定义的容器,具体实现是在qrc:/shared/LauncherList.qml文件中,其自身的注释说明如下:
//model is a list of {"name":"somename", "url":"file:///some/url/mainfile.qml"}
//function used to add to model A) to enforce scheme B) to allow Qt.resolveUrl in url assignments
此处我们知道LaunchList是一个可以添加name,description和url的可点击栏即可,后面有机会再详细分析LaunchList。
在使用LauncherList时,添加List元素是在Component.onCompleted:{}响应函数中添加的,针对Component,官方说明如下:
Components are reusable, encapsulated QML types with well-defined interfaces.
Components are often defined by component files - that is, .qml files.
而completed()信号的以及onCompleted响应函数的说明如下:
completed()
Emitted after the object has been instantiated. This can be used to execute script code at startup, once the full QML environment has been established.The corresponding handler is onCompleted.
因此,我们了解到在这里LauncherList.qml整体是作为一个Component的,当LauncherList实例化完成之后,就会触发onCompleted响应函数,来向LauncherList中addExample。
下面我们就开始分析每一个Example。
fonts/hello.qml文件
hello.qml源码结构比较简单,只有一个Item:
Rectangle {
id: screen
width: 320; height: 480
color: "black"
Item {....}
}
Item中只有一个Text字段,坐标在父元素的居中位置:
Item {
id: container
x: screen.width / 2; y: screen.height / 2
Text {....}
}
Text中描述了颜色(白色)、文本内容(Hello world!)、字体大小(32),而且还定义了两个SequentialAnimation分别表示字间距和透明度上的动画效果。
Text {
id: text
anchors.centerIn: parent
color: "white"
text: "Hello world!"
font.pixelSize: 32
//! [letterspacing]
SequentialAnimation on font.letterSpacing {....}
//! [letterspacing]
SequentialAnimation on opacity {....}
}
字间距动画效果
SequentialAnimation on font.letterSpacing {
loops: Animation.Infinite;
NumberAnimation { from: 0; to: 50; easing.type: Easing.InQuad; duration: 3000 }
ScriptAction {
script: {
container.y = (screen.height / 4) + (Math.random() * screen.height / 2)
container.x = (screen.width / 4) + (Math.random() * screen.width / 2)
}
}
}
从上面这个动画效果,我们可以看到以下几个组成部分:
- 动画循环次数:这里是无线循环的显示动画。(如果要停掉动画,可以设置running属性为false,或者调用stop()函数)
- 定义一个具体的动画:这里使用的是一个可以根据数字变化的动画效果:从0增加到50(数值的改变作用在font.letterSpacing),设置擦除曲线为InQuad(具体效果未知),动画时长为3s
- 定义一个脚本动作:具体的效果是随机改变container的x,y坐标值
整体的动画效果就是:
- 在3s内不断增大文本的字间距从0到50,然后随机改变一下文本的x,y坐标;
- 循环进行上述操作。