兼容Qt4/Qt5版本Qml控件TextScroll

发表于

当文本过长时自动将文字以滚动的形式播放。

TextScroll 备注
导入方法 文件导入
兼容性 QtQuick 1.x与QtQuick 2.x
继承 Item

属性

描述

通过设置一个宽度值，当文本过长时自动滚动。

1
2
3
4
5
TextScroll {
    width: 300
    fontPixelSize: 40
    text: "遇见你每天都有好心情，没关系薯片辣条都给你。"
}

示例

TextScroll

属性文档

  • text: string
    设置显示的文本。

  • fontPixelSize : int
    设置字体像素大小。

  • color : string
    设置文本颜色。

  • width : real
    设置文本的宽度，默认为文本宽度。如果设置的宽度小于文本的宽度则自动开启文本滚动。

  • height : real
    设置文本的高度，默认为文本高度。

关于更新

  • 文章首发于微信公众号你才小学生(nicaixiaoxuesheng)
  • 后续更新于Qtbig哥(qtbig.com)

源码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
import QtQuick 2.0

Item {
    id: root
    property string text: "text"
    property int fontPixelSize: 20
    property string color: "black"

    width: sourceText.width
    height: sourceText.height
    clip: true

    PathView {
        id: pathView
        visible: sourceText.width > root.width
        width: textLoader.width*2; height: textLoader.height
        model: 2
        delegate: textComponent

        path: Path {
            startX: 0; startY: pathView.height/2
            PathLine { x: pathView.width; y: pathView.height/2 }
        }

        NumberAnimation on x {
            id: animation
            loops: Animation.Infinite
            from: 0
            to: -textLoader.width
            duration: 5000
        }
    }

    Text {
        id: sourceText
        visible: width <= root.width
        text: root.text
        font.pixelSize: root.fontPixelSize
        color: root.color
    }

    Loader {
        id: textLoader
        visible: false
        sourceComponent: textComponent
    }

    Component {
        id: textComponent
        Text {
            text: root.text + "   "
            font.pixelSize: root.fontPixelSize
            color: root.color
        }
    }

    /* Shielding sliding events. */
    MouseArea { anchors.fill: parent }
}