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

Share:
14,358

Related videos on Youtube

Sandy
Author by

Sandy

Updated on September 15, 2022

Comments

  • Sandy
    Sandy about 1 year

    How to set background of gridview from QML file.

  • Sandy
    Sandy about 11 years
    Thanks for your post ,but nesting image inside gridview hides gridview elements , i want to set image as a background of the gridview.
  • Sandy
    Sandy about 11 years
    I 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
    JuliusG about 11 years
    You 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
    leemes about 11 years
    Rectangle { color: "transparent" } doesn't make any sense, does it? Why not just Item {}? I mean, the only thing Rectangle does is printing a background, which you want to disable... :)
  • Mahdi Khalili
    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