QML元素 - Flickable + Text (文字水平滚动)

原创

于 2025-07-04 16:07:36 发布 · 218 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#学习 #开发语言 #qt #linux

在QML中实现Text元素的水平滚动效果，可以参看如下代码:

Flickable {
        id: flick
        width: 350
        height: 30
        contentWidth: txtSongName.width
        contentHeight: txtSongName.height
        clip: true
        Text {
            id: txtSongName
            text: "1正在滚动的文字,2正在滚动的文字,3正在滚动的文字,4正在滚动的文字,"
            wrapMode: Text.NoWrap
            font {
                pixelSize: 26
                family: "CarobotorOS Sans SC"
                styleName: "Medium"
                italic: true
            }
            color: "#D5E1E8"
        }

        SequentialAnimation {
            id: seqAnum
            running: flick.contentWidth > flick.width
            loops: Animation.Infinite
            NumberAnimation {
                target: flick
                property: "contentX"
                from: 0
                to: flick.contentWidth - flick.width
                duration: 6000
            }
            NumberAnimat