Scroll view
-
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?
-
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.
-
I want the list to look close to this, is it possible in QML?
-
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.
-
Okay but how will show the list values as images?
-
In the similar way shav have explained earlier. Basically its the delegate which is used as a view.
-
I have tried this but the view is not visible, i have also set the visibility to true
-
Ok. It would be better if you post the code or probably a complete minimal sample.
-
@ApplicationWindow {
id : hola
title: ("SketchIt")
width: 640
height: 480
minimumWidth: mainToolBar .implicitWidth
visible: trueImage{ 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
}}@
-
The C directory path is correct, but no view
-
What do you mean by no view in this example?
-
View meaning that the image is not visible
-
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"
@ -
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 ?
-
Ok. By space, do you mean another path ?
-
No i mean i want to have some distance between the images, to make it look good, can i use borders or something else?
-
Inside the RowLayout you can set spacing.
-
Okay thanks a lot!, and also how can i shift the listview close to the bottom of the window
-
anchor it to the bottom.
-
I have tried to anchor it to the parent but the list view doesn't appear on the screen