QML控件功能：Text循环显示内容

QT的版本：5.12

信息循环来回显示的效果图如下：

对应的组件实现如下：

    Rectangle 
    {
           x:parent.width * 0.4
           y:parent.height*0.2
           width : parent.width*0.4;
           height : parent.height*0.1;
           clip:true

           Text
           {
               property var m_diff
               property var m_showtext
               id:m_Text
               width : parent.width;
               height : parent.height;
               text:qsTr("两个黄鹂鸣翠柳，一行白鹭上青天。窗含西岭千秋雪，门泊东吴万里船。")
               color:"red"
               horizontalAlignment: Text.AlignLeft

               SequentialAnimation on x
               {
                   id:m_SequentialAnimation
                   running: true  //控制是否运行
                   loops: 1       //只循环一次

                   PropertyAnimation {
                       id:m_PropertyAnimation
                       from:0
                       to: m_Text.contentWidth >= m_Text.width ? -(m_Text.contentWidth - m_Text.width): 0
                       duration: 8000     //持续的时间，和显示的速度有关
                   }

                   onStopped:
                   {
                       //控件宽度不足以显示内容时，改变相关值，并赋值继续启动
                       if(m_Text.width < m_Text.contentWidth)
                       {
                           m_PropertyAnimation.from = m_PropertyAnimation.to
                           m_PropertyAnimation.to += - m_Text.m_diff
                           m_Text.text += "    " + m_Text.m_showtext
                           m_SequentialAnimation.running = true
                       }
                   }
               }

               Component.onCompleted:
               {
                   //组件初始化成功时，记录控件内容宽度与控件宽度的差值,以及原有的text内容
                    m_Text.m_diff = m_Text.width >= m_Text.contentWidth ? m_Text.width - m_Text.contentWidth : m_Text.contentWidth - m_Text.width
                    m_Text.m_showtext = m_Text.text
               }
           }
       }

信息每次从头显示的效果图如下：

对应的组件实现如下：

    Rectangle
    {
           width : parent.width*0.4;
           height : parent.height*0.1;
           clip:true

           Text
           {
               property var m_diff
               property var m_showtext
               id:m_Text
               width : parent.width;
               height : parent.height;
               text:qsTr("两个黄鹂鸣翠柳，一行白鹭上青天。窗含西岭千秋雪，门泊东吴万里船。")
               color:"red"
               horizontalAlignment: Text.AlignLeft

               SequentialAnimation on x
               {
                   id:m_SequentialAnimation
                   loops: Animation.Infinite

                   PropertyAnimation {
                       id:m_PropertyAnimation
                       from:0
                       to: -(m_Text.contentWidth - m_Text.width)
                       duration: 8000     //持续的时间，和显示的速度有关
                   }
               }
           }
    }