【QT学习】qml中实现文字的逐个显示

最新推荐文章于 2024-07-13 08:31:03 发布

ipfpm

最新推荐文章于 2024-07-13 08:31:03 发布

阅读量1.1k

点赞数

分类专栏： QT linux

本文链接：https://blog.csdn.net/ipfpm/article/details/88414631

版权

QT 同时被 2 个专栏收录

41 篇文章 14 订阅

订阅专栏

linux

38 篇文章 0 订阅

订阅专栏

效果：文字能逐个显示，然后全部消失，然后再逐个显示。

import QtQuick 2.9
import QtGraphicalEffects 1.0


Rectangle{
    property var textVar: ["等","待","确","认"," ."," ."," ."]
    property var textIndex: 0

    color: "transparent"
    width: 250
    height: 50


    Item
    {
        id:waitItem
        anchors.left: parent.left
        anchors.leftMargin: 15
        anchors.verticalCenter: parent.verticalCenter
        implicitHeight: 30
        implicitWidth: 30
        Rectangle
        { id: rect
            width: parent.width
            height: parent.height
            color: Qt.rgba(0, 0, 0, 0)
            radius: width / 2
            border.width: width / 6
            visible: false
        }
        ConicalGradient
        {
            width: rect.width
            height: rect.height
            gradient: Gradient
            { GradientStop
                { position: 0.0; color: "#87CEFF" }
                GradientStop
                {
                    position: 1.0;
                    color: "blue"
                }
            }
            source: rect
            Rectangle {
                anchors.top: parent.top
                anchors.horizontalCenter: parent.horizontalCenter
                width: rect.border.width
                height: width
                radius: width / 2
                color: "blue"
            }
            RotationAnimation on rotation {
                from: 0
                to: 360
                duration: 800
                loops: Animation.Infinite
            }
        }
    }

    Text
    {
        id:scrollText
        height:parent.height
        anchors.left: waitItem.right
        anchors.leftMargin: 15

        color:"white"
        //font.bold: true
        font.pixelSize: 22
        verticalAlignment: Text.AlignVCenter
        text: ""

    }
    Timer
    {
        id:textTimer
        interval: 1000
        running: true
        repeat: true
        onTriggered:
        {
            if(textIndex == textVar.length)
            {
                scrollText.text = ""
                textIndex = 0;
                return;
            }
            scrollText.text = scrollText.text + textVar[textIndex]
            textIndex++;
        }

    }

}