How to create a stripe with photos?
-
Hi all,
I want to create a stripe as shown in the picture below and put images into it. The stripe will slide on the screen with time. After this task, I want to drag one of those photos to another place. How can I achieve this using qml? I am new on Qt so I ll be glad if there is similar examples or any simple example you could share.
-
@Yunus
hi, you should be able to do this with a ListView, a list can be horizontal orientated and IIRC you can animate/scroll from code commands.List view supports drag and drop as well, here for a stackoverflow example
the background you show is just that, a background (image?) where the Listview lives in
-
@J-Hilk Thanks for your reply. The example which you shared can work for me. But how can I move these listed rectangles with time automatically(For example 1st rectangle replace with 2, 2 replace with 3.... a loop like this). If you could share an example doing this, will solve my problem totally.
-
import QtQuick 2.12 import QtQuick.Window 2.2 Window { visible: true width: 400 height: 100 title: qsTr("Hello World") onFrameSwapped: listView.contentX = listView.contentX +1 ListView{ id:listView anchors.fill: parent orientation: ListView.Horizontal model: 1000 delegate: Image { //I have 8 numbered Icons in my ressource file height: listView.height width: height fillMode: Image.PreserveAspectFit source: { switch(index % 8){ case 0: return "qrc:/Icon1.png" case 1: return "qrc:/Icon2.png" case 2: return "qrc:/Icon3.png" case 3: return "qrc:/Icon4.png" case 4: return "qrc:/Icon5.png" case 5: return "qrc:/Icon6.png" case 6: return "qrc:/Icon7.png" case 7: return "qrc:/Icon8.png" } } } } }
-
@Yunus
currently, each time the frame is drawn/spwapped, the contentX of the list view is increasedonFrameSwapped: listView.contentX = listView.contentX +1
you'll have to stop the the incrementation.
Either with a variable or replace it with aTimer
object where you call start() and/or stop() on -
-
@J-Hilk I found a solution like this:
-
Starting program with layoutDirection: Qt.LeftToRight
-
As soon as the program starts, I am sliding the image quickly to the other side many times by using listView.contentX = listView.contentX + 3600
-
Then when I tried to go to oppossite direction, the image feature still coming instead of white gaps.
-