CODEWITHSUNDEEP
qtqmlqtquick2
xskit
xskit

Reputation: 431

QML. How to stretch Grid for all parent space

I have a custom button:

import QtQuick 2.0

Rectangle {
    id: xobutton
    width: 100
    height: 100
    property string label: "?"
    border.width: 2

    Text {
        id: xobuttonLabel
        text: label
        font.pointSize: 75
        anchors.centerIn: parent
    } 
}

It has a parent Rectangle:

Rectangle {
    width: 500
    height: 500

    Grid {
        anchors.centerIn: parent
        rows: 3; columns: 3; spacing: 0

        Repeater {
            model: 9
            Xobtn { }
        }
    } 
}

I need to stretch all buttons in Grid for all free space in parent Rectangle. How can I do this? Thanks.

Upvotes: 4

Views: 6285

Answers (2)

Treviño
Treviño

Reputation: 3528

Without using the QtQuick.Layouts that are a little more expensive, you can just do something like this (but you need to know the size of the items you put in the grid:

import QtQuick 2.0

Rectangle {
    id: root
    width: 500
    height: 500

    readonly property int rectSize: 100

    Grid {
        anchors.centerIn: parent
        rows: 3; columns: 3;

        columnSpacing: (parent.width - (root.rectSize * columns)) / (columns - 1)
        rowSpacing: (parent.height - (root.rectSize * rows)) / (rows - 1)

        Repeater {
            model: parent.rows * parent.columns

            Rectangle {
                id: xobutton
                width: root.rectSize
                height: root.rectSize
                property string label: "?"
                border.width: 2

                Text {
                    id: xobuttonLabel
                    text: label
                    font.pointSize: 75
                    anchors.centerIn: parent
                }
            }
        }
    }
}

Upvotes: -1

hyde
hyde

Reputation: 62777

Grid just positions the items in it, respecting the items' size. To have the items actively resized, you need to use GridLayout, and tell it how the items should be resized with Layout attached properties. So your code becomes something like this, comments showing changes to your code:

import QtQuick.Layouts 1.1 // needed for GridLayout

Rectangle {
    width: 500
    height: 500

    GridLayout {
        anchors.fill: parent // GridLayout must have the right size now
        rows: 3; columns: 3
        columnSpacing: 0; rowSpacing: 0 // changed from spacing: 0

        Repeater {
            model: 9
            Xobtn {
                // attached properties guiding resizing
                Layout.fillHeight: true
                Layout.fillWidth: true 
            }
        }
    }
}

If you for some reason don't want to depend on QtQuick.Layouts, then you have to calculate the width and height yourself, but this is rather clunky if you need anything but uniform grid, something like:

        Xobtn {
            height: grid.parent.height / grid.columns - grid.spacing
            width: grid.parent.width / grid.rows - grid.spacing
        }

where grid would be the id of the Grid.

Upvotes: 6

Related Questions