How to set background for qml gridview in Qt
14,358
Solution 1
Nest the grid view in a Rectangle and make the delegates of the GridView elements transparent:
Rectangle {
color: "red"
GridView {
delegate: Rectangle {
color: "transparent"
}
}
}
Solution 2
In QML you can compose complex objects by including/nesting widgets/elements within each other.
So for including an image inside a Widget, in your case the GridView
, just nest an Image
element, inside GridView
Element or it's sub elements as required.
GridView {
width: 800
height: 600
Image: {
source: "some-image.png"
}
}
The documentation for GridView
has similar and better examples - http://doc.qt.digia.com/4.7-snapshot/qml-gridview.html#example-usage
Also look out for the anchors
attribute, which will help you position the image in the parent Element, or otherwise.
Documentation for Image
element is available here: http://doc.qt.digia.com/latest/qml-image.html
Related videos on Youtube
Author by
Sandy
Updated on September 15, 2022Comments
-
Sandy about 1 year
How to set background of
gridview
from QML file. -
Sandy about 11 yearsThanks for your post ,but nesting image inside gridview hides gridview elements , i want to set image as a background of the gridview.
-
Sandy about 11 yearsI can nest gridview inside the rectangle and set the image inside rectangle that way , the i can set the background image , but i dont know how to make gridview background transparent. I appreciate your help.
-
JuliusG about 11 yearsYou can also play around with the example proposed by xk0der by setting the 'z:' property of the image smaller than that of the delegate. This will make the image appear below the delegates.
-
leemes about 11 years
Rectangle { color: "transparent" }
doesn't make any sense, does it? Why not justItem {}
? I mean, the only thing Rectangle does is printing a background, which you want to disable... :) -
Mahdi Khalili over 4 years@leemes actually rectangle with transparent color is better you can set border radius + clip to create round rect for card like uses with a delegate to implement your card control for example