前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >兼容Qt4/Qt5版本Qml控件TextScroll(文本滚动)

兼容Qt4/Qt5版本Qml控件TextScroll(文本滚动)

作者头像
Qt君
发布2019-07-15 16:40:18
1.7K0
发布2019-07-15 16:40:18
举报
文章被收录于专栏:跟Qt君学编程跟Qt君学编程

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

代码语言:javascript
复制
文件导入

属性

  • text: string
  • fontPixelSize: int
  • color: string
  • width: real
  • height: real

描述

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

代码语言:javascript
复制
TextScroll {    width: 300    fontPixelSize: 40    text: "遇见你每天都有好心情,没关系薯片辣条都给你。"}

示例

属性文档

  • text:string 设置显示的文本。
  • fontPixelSize:int 设置字体像素大小。
  • color:string 设置文本颜色。
  • width:real 设置文本的宽度,默认为文本宽度。如果设置的宽度小于文本的宽度则自动开启文本滚动。
  • height:real 设置文本的高度,默认为文本高度。

关于更新

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

源码

代码语言:javascript
复制
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 }
}
本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2019-03-27,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 Qt君 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 属性
  • 描述
  • 示例
  • 属性文档
  • 关于更新
  • 源码
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档