How to create a stripe with photos?

[Yunus]

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.

[J.Hilk]

@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

[Yunus]

@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.

[J.Hilk]

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]

@J-Hilk Ahh, Thank you very much J-Hilk. Thats what I need exactly :)

[Yunus]

This post is deleted!

[J.Hilk]

@Yunus
currently, each time the frame is drawn/spwapped, the contentX of the list view is increased

onFrameSwapped: listView.contentX = listView.contentX +1

you'll have to stop the the incrementation.
Either with a variable or replace it with a Timer object where you call start() and/or stop() on

[Yunus]

@J-Hilk @SGaist I know this topic already solved. Listview layoutDirection is defaultly Qt.LeftToRight, I need both direction at the same time Qt.LeftToRight and Qt.RightToLeft. Is there a feature to achieve this as combined?

[J.Hilk]

hi @Yunus

with ListView, I don't think so, IIRC ListView restricts the contentArea in one of the two ways.

You can go one step down and use a ScrollArea (The "BaseClass" of ListView) and try it there. It should be possible ten.

[Yunus]

@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.