专栏首页跟Qt君学编程兼容Qt4/Qt5版本Qml控件TextScroll(文本滚动)

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

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

文件导入

属性

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

描述

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

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

示例

属性文档

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

关于更新

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

源码

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 }
}

本文分享自微信公众号 - Qt君(qtjuna),作者:Prosa

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-03-27

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • QtCreator画UML

      Qt君和往日一样,被分配了一个任务,就是设计一个网络模块。Qt君看到任务一到就来劲了,立马就做了起来。

    Qt君
  • 兼容Qt4/Qt5版本Qml控件RoundRectangle

    Qt君
  • Qt 5.9长期支持版本将于2020年5月结束

    「对Qt 5.9 LTS的支持将于2020年5月结束。如果仍然使用Qt 5.9 LTS,则建议更新到即将发布的Qt 5.15 LTS或Qt 5.12 LTS。...

    Qt君
  • 浙江大学和海康威视提出:视频场景文本定位算法SVST(集成检测,跟踪和识别于一体)

    【导读】本文分享一篇浙江大学和海康威视最新联合提出的视频场景文本定位(Video Scene Text Spotting)方向的算法:SVST(spotting...

    Amusi
  • 锚文本具体有那些作用?

    很多人都知道锚文本,但是很多人都不确切锚文本究竟改看看,一般做锚文本分为车站内做锚文本和站外锚文本,锚文本只不过是链接的一种方式,那么明确锚文本有那些作用呢?上...

    申霖
  • 文本挖掘 – Text mining

    文本摘要:许多文本挖掘应用程序需要总结文本文档,以便对大型文档或某一主题的文档集合做出简要概述。

    easyAI
  • 海量短文本场景下的去重算法

    在大多数情况下,大量的重复文本一般不会是什么好事情,比如互相抄袭的新闻,群发的垃圾短信,铺天盖地的广告文案等,这些都会造成网络内容的同质化并加重数据库的存储负担...

    腾讯QQ大数据
  • 文本挖掘| 到底什么是文本挖掘?

    你是否想过为什么图书馆的管理员能够将几千本几万本的书籍进行快速的管理?你是否好奇习近平总书记的政府工作报告,随着时间的推移,他传达的信息有什么变化?如何从海量的...

    黑妹的小屋
  • 德企开发出基于人工智能的新型文本分析技术

    新闻门户网站和社会媒体都含有丰富的信息资源,例如对股票市场趋势的预测信息。如今,很多服务提供商允许通过向其搜索引擎输入描述性关键字来搜索大量的文本集。然而关键词...

    人工智能快报
  • CVPR 2018 | 华中科技大学提出多向文本检测方法:基于角定位与区域分割

    选自arXiv 作者:Pengyuan Lyu等 机器之心编译 参与:Nurhachu Null、李泽南 在计算机视觉的应用场景里,对图像中的文本进行准确识别是...

    机器之心

扫码关注云+社区

领取腾讯云代金券