QML TEXT content up and down, left and right effect realization

1. effect

Want to use QML to achieve the effect of scrolling Text, that is, "can scroll up and down one by one, when each content exceeds the length of Text display, when the mouse moves up, can scroll left and right";

2. Implementation ideas
  • Scroll up and down: in fact, use ListView control to display only one line. You can change the current item every time, and then add animation when changing the current item. When moving to the last row, you can move the first row to the last row, and then change the current item, so as to avoid the situation of blank at the end.
  • Move left and right: add animation in the x direction of Text.
3.QML implementation code
import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.0
import QtGraphicalEffects 1.0

Rectangle {
    id: root;
    implicitHeight: 32;
    implicitWidth: 200;
    
    signal sigAdvertisingClicked();
    signal sigAdvertisingEntered();
    signal sigAdvertisingExited();
    
    property alias modelRoll: list.model;

    ListView {
        id: list;
        objectName: "list_ads";
        height: parent.height;
        width: parent.width;
        model: 5;
        delegate: rollDelegate;
        clip: true;
        interactive: false;

        NumberAnimation {
            id: animation;
            target: list;
            property: "contentY";
            duration: 1000;
        }
    }

    function nextAds() {
        if (list.count == 1)
            return;
        
        list.forceLayout();

        var nextindex = list.currentIndex + 1;
        console.log("curindex="+list.currentIndex + ",nextindex=" + nextindex);
        
        var curpos = list.contentY;        
        var nextpos = curpos + 32;
        list.positionViewAtIndex(nextindex, ListView.Contain);
        list.currentIndex = nextindex;
        animation.from = curpos;
        animation.to = nextpos;
        animation.running = true;
    }

    Component {
        id: rollDelegate
        Rectangle {
            height: root.height;
            width: root.width;

            Text {
                id: text_ads;
                height: parent.height;
                width: parent.width;
                elide: Text.ElideRight;
                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.AlignLeft
                font.family: nimoobs_main_window.font.family
                color: "#505050"
                font.pixelSize: 10;
                text: '<html></style><font color="#505050"><a href="https://www-dev.nimo.tv/?_pop=1">' + list.model.get(index, 0) + '</a></font></html>' 
                SequentialAnimation on x {
                    loops: 0;
                    id: seq_ads_x;
                    PropertyAnimation {
                        from: 0
                        to: -(text_ads.contentWidth - text_ads.width)
                        duration: 3000
                    }                   
                    onStopped: {
                        if (text_ads.x == (-(text_ads.contentWidth - text_ads.width))) {
                        } else {
                        }                        
                    }
                }

                MouseArea {
                    anchors.fill: parent
                    cursorShape: entered ? Qt.PointingHandCursor : Qt.ArrowCursor;
                    hoverEnabled: true
                    onEntered: {
                        text_ads.elide = Text.ElideNone;
                        if (text_ads.contentWidth > text_ads.width) {
                            seq_ads_x.loops = 1;
                            seq_ads_x.running = true;
                        }
                        emit: sigAdvertisingEntered();
                    }
                    onExited: {
                        seq_ads_x.running = false;
                        text_ads.x = 0;
                        text_ads.elide = Text.ElideRight;
                        emit: sigAdvertisingExited();
                    }
                    onClicked: {
                        seq_ads_x.running = false;
                        text_ads.x = 0;
                        emit: sigAdvertisingClicked();
                    }
                }
            }
        }
    }
}

Little cat

Tags: Qt

Posted on Sun, 10 Nov 2019 15:51:11 -0500 by ublapach