Как заставить GridView отображать элементы с разной шириной ячейки и высотой ячейки

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

У меня есть модель, которая содержит счетное число. Я хочу показать данные этой модели в заданном макете. Пожалуйста, найдите прикрепленное изображение.


gridview qt qml qt-quick qtquickcontrols2
person Shubham Gupta    schedule 25.01.2019    source источник
comment
Вероятно, вам следует использовать columnSpan и rowSpan   -  person Amfasis    schedule 25.01.2019
comment
Но в gridview значения cellWidth и cellHeight совпадают.   -  person Shubham Gupta    schedule 25.01.2019
comment
Вы должны обновить свой вопрос по этому поводу, это не ясно. Можете ли вы перейти на GridLayout?   -  person Amfasis    schedule 25.01.2019
comment
Я отредактировал свой вопрос. Пожалуйста, предложите   -  person Shubham Gupta    schedule 28.01.2019

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете использовать GridLayout для распределения элемента по нескольким строкам/столбцам.

import QtQuick 2.0
import QtQuick.Layouts 1.3

GridLayout {
    columnSpacing: 10
    rowSpacing: 10
    columns: 4

    Repeater {

        model: ListModel {
            ListElement { colSpan: 2; rowSpan: 3 }
            ListElement { colSpan: 1; rowSpan: 1 }
            ListElement { colSpan: 1; rowSpan: 1 }
            ListElement { colSpan: 1; rowSpan: 1 }
            ListElement { colSpan: 1; rowSpan: 1 }
            ListElement { colSpan: 1; rowSpan: 1 }
            ListElement { colSpan: 1; rowSpan: 1 }

            ListElement { colSpan: 1; rowSpan: 1 }
            ListElement { colSpan: 1; rowSpan: 1 }
            ListElement { colSpan: 2; rowSpan: 3 }
            ListElement { colSpan: 1; rowSpan: 1 }
            ListElement { colSpan: 1; rowSpan: 1 }
            ListElement { colSpan: 1; rowSpan: 1 }
            ListElement { colSpan: 1; rowSpan: 1 }
        }

        Rectangle {
            Layout.columnSpan: model.colSpan
            Layout.rowSpan: model.rowSpan
            Layout.fillHeight: true
            Layout.fillWidth: true

            color: "red"

            Text {
                anchors.fill: parent
                text: index
                horizontalAlignment: Qt.AlignHCenter
                verticalAlignment: Qt.AlignVCenter
            }
        }

    }
}
person Amfasis    schedule 28.01.2019