Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. How to make a scrollable text
Forum Updated to NodeBB v4.3 + New Features

How to make a scrollable text

Scheduled Pinned Locked Moved Solved QML and Qt Quick
3 Posts 2 Posters 698 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • D Offline
    D Offline
    davidino
    wrote on last edited by
    #1

    Goodmorning,
    I'm trying to make a scrollable text that enters inside a rectangle from the left and then goes out from the right, like the gif below.
    https://media.giphy.com/media/qoDDQhekkyVe8/100.webp

    So far I've wrote the code below searching in the net, but I don't know how to make it "enter" and "go out" from a rectangle.

    import QtQuick 2.3
    
    
    Item {
    
        property int clipRegion
        property string testo
        property color colore
        property int sfas: 0
    
        Rectangle
        {
            height: parent.height
            width: clipRegion
            color: "green"
        }
    
        Text{
            id : text
            color: colore
            text: testo
            width: clipRegion
    
            NumberAnimation
            {
                alwaysRunToEnd: true
                id: numberAnimation
                targets: text
                from: clipRegion
                to: 0
                duration: 5000
                property: "x"
    
                Component.onCompleted:  {running = true;}
    
                onRunningChanged:
                    if (!running)
                    {
                        running=true;
                    }
              }
         }
    }
    

    Any help would be highly appreciate.
    Thank you in advanced.

    DiracsbracketD 1 Reply Last reply
    0
    • D davidino

      Goodmorning,
      I'm trying to make a scrollable text that enters inside a rectangle from the left and then goes out from the right, like the gif below.
      https://media.giphy.com/media/qoDDQhekkyVe8/100.webp

      So far I've wrote the code below searching in the net, but I don't know how to make it "enter" and "go out" from a rectangle.

      import QtQuick 2.3
      
      
      Item {
      
          property int clipRegion
          property string testo
          property color colore
          property int sfas: 0
      
          Rectangle
          {
              height: parent.height
              width: clipRegion
              color: "green"
          }
      
          Text{
              id : text
              color: colore
              text: testo
              width: clipRegion
      
              NumberAnimation
              {
                  alwaysRunToEnd: true
                  id: numberAnimation
                  targets: text
                  from: clipRegion
                  to: 0
                  duration: 5000
                  property: "x"
      
                  Component.onCompleted:  {running = true;}
      
                  onRunningChanged:
                      if (!running)
                      {
                          running=true;
                      }
                }
           }
      }
      

      Any help would be highly appreciate.
      Thank you in advanced.

      DiracsbracketD Offline
      DiracsbracketD Offline
      Diracsbracket
      wrote on last edited by Diracsbracket
      #2

      Hi @davidino

      A quick and dirty way to do it purely with QML is as follows (animation starts when you click the text)

      0_1533307221069_scrollingtext.gif

          Rectangle {
              id: scrollingText
              width: 200
              height: 20
              clip: true
              color: "yellow"
      
              property string text: "This is a scrolling text!"
              property int duration: 2000
      
              Text {
                  id: text1
                  verticalAlignment: Text.AlignVCenter
                  text: scrollingText.text
                  x: 0
              }
      
              Text {
                  id: text2
                  verticalAlignment: Text.AlignVCenter
                  text: scrollingText.text
                  x: scrollingText.width
              }
      
              SequentialAnimation {
                  id: animation
                  loops: Animation.Infinite
      
                  ParallelAnimation {
                      PropertyAnimation {target: text1; property: "x"; to: -scrollingText.width; duration: scrollingText.duration}
                      PropertyAnimation {target: text2; property: "x"; to: 0; duration: scrollingText.duration}
                  }
      
                  PropertyAnimation {target: text1; property: "x"; to: scrollingText.width; duration: 0}
      
                  ParallelAnimation {
                      PropertyAnimation {target: text1; property: "x"; to: 0; duration: scrollingText.duration}
                      PropertyAnimation {target: text2; property: "x"; to: -scrollingText.width; duration: scrollingText.duration}
                 }
      
                 PropertyAnimation {target: text2; property: "x"; to: scrollingText.width; duration: 0}
              }
      
              MouseArea {
                  anchors.fill: parent
                  onClicked: {
                      animation.running = true
                  }
              }
          }
      

      Maybe someone else will come with something better.
      Cheers.

      1 Reply Last reply
      3
      • D Offline
        D Offline
        davidino
        wrote on last edited by
        #3

        Hello @Diracsbracket ,
        that's brilliant. I'd never have thought about it.
        THank you very much.

        1 Reply Last reply
        0

        • Login

        • Login or register to search.
        • First post
          Last post
        0
        • Categories
        • Recent
        • Tags
        • Popular
        • Users
        • Groups
        • Search
        • Get Qt Extensions
        • Unsolved