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