QT Demo 之 text

学习了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)
                    }
                }
            }

从上面这个动画效果，我们可以看到以下几个组成部分：

1. 动画循环次数：这里是无线循环的显示动画。(如果要停掉动画，可以设置running属性为false，或者调用stop()函数)
2. 定义一个具体的动画：这里使用的是一个可以根据数字变化的动画效果：从0增加到50(数值的改变作用在font.letterSpacing)，设置擦除曲线为InQuad(具体效果未知)，动画时长为3s
3. 定义一个脚本动作：具体的效果是随机改变container的x,y坐标值
   

整体的动画效果就是:

• 在3s内不断增大文本的字间距从0到50，然后随机改变一下文本的x,y坐标；
• 循环进行上述操作。

透明度动画效果