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";
- 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.
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