QML. Как растянуть сетку на все родительское пространство

У меня есть пользовательская кнопка:

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
    } 
}

У него есть родитель Rectangle:

Rectangle {
    width: 500
    height: 500

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

        Repeater {
            model: 9
            Xobtn { }
        }
    } 
}

Мне нужно растянуть все кнопки в Grid для всего свободного места в родительском Rectangle. Как я могу это сделать? Спасибо.


qt qml qtquick2
person xskit    schedule 23.05.2015    source источник

Ответы (2)


arrow_upward
6
arrow_downward

Grid просто размещает в нем элементы, соблюдая размер элементов. Чтобы активно изменять размер элементов, необходимо использовать GridLayout и укажите, как следует изменять размер элементов с помощью Layout прикрепленных свойств. . Таким образом, ваш код становится примерно таким, комментарии показывают изменения в вашем коде:

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 
            }
        }
    }
}

Если вы по какой-то причине не хотите зависеть от QtQuick.Layouts, то вам нужно вычислить width и height самостоятельно, но это довольно неуклюже, если вам нужно что-то кроме равномерной сетки, что-то вроде:

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

где grid — идентификатор сетки.

person hyde    schedule 23.05.2015

arrow_upward
-1
arrow_downward

Не используя QtQuick.Layouts, которые немного дороже, вы можете просто сделать что-то вроде этого (но вам нужно знать размер элементов, которые вы помещаете в сетку:

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
                }
            }
        }
    }
}
person Treviño    schedule 07.10.2016