Scroll view

[Javeria]

I want to make an image scroller that the user can select a particular icon of image from the scroller and that image will then appear on the main image display, i am working on QML application, so any suggestions?

[shav]

Hi,

You can use ListView to show list of images which user will select or use GridView to show image as a grid. Code with ListView should looks like:
@
property var imagesListModel: ["image1.png","image2.png","image3.png", ...]

ListView {
id: imagesList
anchors.fill: parent
model: imagesListModel
delegate: Image {
width: imagesList.width
height: 100
source: imagesListModel[index]

     MouseArea {
         anchors.fill: parent

         onClicked: {
              console.log("User select '"+imagesListModel[index]+"' image");
         }
     }
}

}
@

Code with GridView will looks like above.

[Javeria]

!https://www.google.com.pk/search?q=image+grid+view&es_sm=93&biw=1366&bih=643&source=lnms&tbm=isch&sa=X&ei=7U_gVO7iNJPXaurKgcAI&ved=0CAYQ_AUoAQ#tbm=isch&q=image+scroller&imgdii=_&imgrc=uR83Buz403WwlM%3A;QKtst0YoywqgPM;http%3A%2F%2Fblog.atomictemplates.com%2Fwp-content%2Fuploads%2F2010%2F05%2FCreate-a-Thumbs-Scroller-with-AS3-and-XML.jpg;http%3A%2F%2Fblog.atomictemplates.com%2Fflash-tutorials%2Fcreate-flash-image-scrollers-flash-image-galleries-easily%2F;465;139()!

I want the list to look close to this, is it possible in QML?

[p3c0]

Hi,

It seems you want te List to be horizontal. You can do that by changing the "orientation":http://doc.qt.io/qt-5/qml-qtquick-listview.html#listview-layouts to horizontal.

Also please use Link tag to post the links.

[Javeria]

Okay but how will show the list values as images?

[p3c0]

In the similar way shav have explained earlier. Basically its the delegate which is used as a view.

[Javeria]

I have tried this but the view is not visible, i have also set the visibility to true

[p3c0]

Ok. It would be better if you post the code or probably a complete minimal sample.

[Javeria]

@ApplicationWindow {
id : hola
title: ("SketchIt")
width: 640
height: 480
minimumWidth: mainToolBar .implicitWidth
visible: true

Image{
    visible:true
 source:"C:\\1.jpg"
 sourceSize.width:hola.width/2
 sourceSize.height:hola.height/2
}
toolBar: ToolBar{
    id : mainToolBar
    anchors.fill :parent
    RowLayout{
     //   width : parent.width

        ToolButton{
       // text : ("main")
        iconSource: "C:\\Users\\Hassan Adil\\Documents\\sketchIt\\16.png"
        onClicked: hola.color = "blue"
        anchors.margins: 4

}

    Button{

        text : "close"
        onClicked: hola.close()

}
}
}
SplitView{
anchors.fill: parent
orientation: Qt.Horizontal
}

}@

[Javeria]

The C directory path is correct, but no view

[p3c0]

What do you mean by no view in this example?

[Javeria]

View meaning that the image is not visible

[p3c0]

Ok. Try prepending file:// to source. And you can use "/" as file separator. Qt internally handles it depending upon OS.
@
iconSource: "file://C:/Users/Hassan Adil/Documents/sketchIt/16.png"
@

[Javeria]

If i write file:/1.jpg which is located in C: it works and the view also works , but is it possible to put space between the images ?

[p3c0]

Ok. By space, do you mean another path ?

[Javeria]

No i mean i want to have some distance between the images, to make it look good, can i use borders or something else?

[p3c0]

Inside the RowLayout you can set spacing.

[Javeria]

Okay thanks a lot!, and also how can i shift the listview close to the bottom of the window

[p3c0]

anchor it to the bottom.

[Javeria]

I have tried to anchor it to the parent but the list view doesn't appear on the screen

[p3c0]

and who is parent of ListView ?

[Javeria]

I think the application window is the default parent, I haven't specified

[p3c0]

How did you anchor it ? Can you post some code ?

[Javeria]

@import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Window 2.2
import QtQuick.Dialogs 1.2
ApplicationWindow {
//id:root
title: qsTr("Hello World")
width: 1500
height: 1000
property var imagesListModel: ["file:/original.jpg","file:/11.jpg","file:/test (1).jpg","file:/test (2).jpg","file:/test (3).jpg","file:/test (4).jpg","file:/test (5).jpg"]
Image{
id:main
width: 450
height: 600
source:"file:/test (6).jpg"
anchors.centerIn: parent
}
ListView {
id: imagesList
anchors.fill: parent
spacing:25
orientation: Qt.Vertictal
model: imagesListModel
delegate: Image {
width: 75
height: 100
source: imagesListModel[index]

         MouseArea {
             anchors.fill: parent

             onClicked: {

// main.
console.log("User select '"+imagesListModel[index]+"' image");
}
}
}
}

}
@

[Javeria]

And the image with id should change when the user select the image from the list , how can i do that as well?

[p3c0]

You should anchor ListView to bottom of root I.e ApplicationWindow. Do this in ListView
@
anchors.bottom : root.bottom
@

To set Image just assign the string that you get in onClicked to source of main

[Javeria]

It still doesnt work , how to put in corner

[p3c0]

anchor it to left or right as required.