QML - GridLayout - Диапазон строк и столбцов - Общие сведения

Я пытаюсь изучить QML, и в данный момент у меня возникли проблемы с пониманием rowSpan и columnSpan, извините, если этот вопрос может показаться некоторым из вас глупым.

ЧТО Я УЗНАЛ:

Поправьте меня, если я ошибаюсь, но в GridLayout должно быть так:

  • Layout.row - указывает линию, в которой расположен объект;
  • Layout.column - указывает столбец, в котором находится объект;
  • Layout.rowSpan - указывает на сколько строк должен растягиваться объект;
  • Layout.columnSpan - указывает на сколько столбцов должен быть растянут объект;

ЧТО Я ПЫТАЮСЬ СДЕЛАТЬ:

Что ж, в этом случае я пытаюсь воссоздать этот макет здесь введите описание изображения здесь

Этот макет, по идее, должен иметь следующее:

  • Фактический GridLayout должен состоять из 24 столбцов и 9 строк.
  • Форма КРАСНАЯ должна быть в -> col 0, row 1 -> colSpan 3, rowSpan 7
  • Форма СИНИЙ должна быть в -> столбец 3, строка 1 -> colSpan 8, rowSpan 1
  • Форма ФИОЛЕТОВЫЙ должна быть в -> столбец 3, строка 4 -> colSpan 6, rowSpan 3

По крайней мере, я до сих пор так понял.

ПРОБЛЕМА:

После того, как я закодировал QML с помощью col, row соответственно, а также colSpan и rowSpan, я получил это вместо этого.

введите описание изображения здесь

МОЙ КОД:

import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.1

Item {
    width: 1366
    height: 512

    GridLayout {
        id: grid

        columns: 24
        rows: 9
        anchors.fill: parent

        Rectangle {

            property var rowSpan: 7
            property var columSpan: 3

            Layout.column: 0
            Layout.row: 1

            Layout.preferredWidth: (parent.width / parent.columns) * columSpan
            Layout.preferredHeight: (parent.height / parent.rows) * rowSpan

            Layout.columnSpan: columSpan
            Layout.rowSpan: rowSpan

            color: "red"

        }

        Rectangle {
            property var rowSpan: 1
            property var columSpan: 8

            Layout.column: 3
            Layout.row: 1

            Layout.preferredWidth: (parent.width / parent.columns) * columSpan
            Layout.preferredHeight: (parent.height / parent.rows) * rowSpan

            Layout.columnSpan: columSpan
            Layout.rowSpan: rowSpan

            color: "blue"
        }
        Rectangle {
            property var rowSpan: 3
            property var columSpan: 6

            Layout.column: 4
            Layout.row: 3

            Layout.preferredWidth: (parent.width / parent.columns) * columSpan
            Layout.preferredHeight: (parent.height / parent.rows) * rowSpan

            Layout.columnSpan: columSpan
            Layout.rowSpan: rowSpan

            color: "purple"
        }
    }
}

Может ли кто-нибудь объяснить мне, что я делаю неправильно или с какой частью GridLayout я не понял?


qt qml qqmlcomponent grid-layout
person Mircea    schedule 14.05.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Кажется, вы хотите использовать GridLayout, как если бы данное пространство разделено на заданное количество столбцов / строк, и каждая ячейка имеет фиксированный размер. Однако идея GridLayout заключается в том, что он настраивает каждый столбец и каждую строку в соответствии с потребностями элементов в ячейках.

Так что происходит то, что вы оставляете некоторые ячейки пустыми, однако GridLayout сделает эти строки / столбцы на 0 пикселей в высоту / ширину, что приведет к хаотическому результату, далекому от ваших ожиданий.

Чтобы GridLayout хорошо сочетался с вашей настройкой, вы можете поместить пустые Item между ними, с установкой предпочтительной ширины / высоты, аналогичной вашему коду, что приведет к довольно большому количеству неиспользуемого QML и нечитаемому фрагменту кода.

Чтобы иметь лучшую настройку, вы можете создать свой собственный элемент макета. Следующее должно работать:

import QtQuick 2.0
import QtQuick.Layouts 1.3

Item {
    id: layout

    property int columns: 1
    property int rows: 1

    onChildrenChanged: updatePreferredSizes()
    onWidthChanged: updatePreferredSizes()
    onHeightChanged: updatePreferredSizes()
    onColumnsChanged: updatePreferredSizes()
    onRowsChanged: updatePreferredSizes()

    function updatePreferredSizes()
    {
        if(layout.children.length === 0)
        {
            return
        }

        var cellWidth = layout.width / columns;
        var cellHeight = layout.height / rows;
        for(var i=0;i<layout.children.length;++i)
        {
            var obj = layout.children[i]

            var c = obj.Layout.column
            var r = obj.Layout.row
            var cs = obj.Layout.columnSpan
            var rs = obj.Layout.rowSpan

            obj.x = c * cellWidth;
            obj.y = r * cellHeight;
            obj.height = cs * cellHeight;
            obj.width = rs * cellWidth;
        }

    }
}

Кстати, ваш основной код можно свести к следующему (где MyGrid - это QML выше):

MyGrid {
    id: grid
    columns: 24
    rows: 9
    anchors.fill: parent

    Rectangle {
        Layout.column: 0
        Layout.row: 1
        Layout.columnSpan: 7
        Layout.rowSpan: 3

        color: "red"
    }

    Rectangle {
        Layout.column: 3
        Layout.row: 1
        Layout.columnSpan: 1
        Layout.rowSpan: 8

        color: "blue"
    }
    Rectangle {
        Layout.column: 4
        Layout.row: 3
        Layout.columnSpan: 3
        Layout.rowSpan: 6

        color: "purple"
    }
}
person Amfasis    schedule 14.05.2020
comment
Спасибо, чувак, это больше, чем я мог бы тебя спросить. Я очень понимаю: D - person Mircea; 14.05.2020