QML-решение для структурированного макета, не использующее GridView или ListView, но использующее модель c ++ - PullRequest
Новая
       6

QML-решение для структурированного макета, не использующее GridView или ListView, но использующее модель c ++

0 голосов
/ 08 сентября 2018

Я пытаюсь придумать способ представления некоторых элементов в очень структурированной форме, используя только Row и Column. Я получил идею от Qt Widgets, где вы можете делать все с горизонтальной и вертикальной разметкой и иметь красивый интерфейс. Проблема в том, что я все еще хочу, чтобы данные, которые создают мои элементы QML, приходили из c ++, что влечет за собой какую-то модель. Из того, что я знаю, модели могут быть связаны только с PathView, GridView или ListView. Кроме того, эти данные будут динамически меняться в зависимости от некоторых операций добавления и удаления, о которых сообщает пользовательский интерфейс QML. Есть ли способ использовать Row и Column с моделью?

1 Ответ

0 голосов
/ 11 сентября 2018

Давайте предположим, что ваша модель должна заполнить Grid, Row и Column: 

ListModel {
    id: lm
    ListElement { target: "Grid"; content: "green" }
    ListElement { target: "Grid"; content: "blue" }
    ListElement { target: "Grid"; content: "yellow" }
    ListElement { target: "Grid"; content: "orange" }
    ListElement { target: "Row"; content: "green" }
    ListElement { target: "Row"; content: "blue" }
    ListElement { target: "Row"; content: "yellow" }
    ListElement { target: "Row"; content: "orange" }
    ListElement { target: "Column"; content: "green" }
    ListElement { target: "Column"; content: "blue" }
    ListElement { target: "Column"; content: "yellow" }
    ListElement { target: "Column"; content: "orange" }
}

Row {
    id: row
    spacing: 2
    anchors {
        top: parent.top
        left: parent.left
        right: parent.right
    }
}
Column {
    id: column
    spacing: 2
    anchors {
        top: row.bottom; topMargin: 2
        left: parent.left
        bottom: parent.bottom
    }
}
Grid {
    id: grid
    spacing: 2
    columns: 2
    anchors {
        top: row.bottom
        left: column.right
        right: parent.right
        bottom: parent.bottom
        margins: 102
    }
}

Вы можете использовать Repeater так: 

Repeater {
    model: lm
    delegate:  Rectangle {
        width: 100
        height: 100
        parent: (target === "Grid" ? grid :
                   (target === "Row" ? row :
                      (target === "Column" ? column :
                         null)))
        color: content
    }
}

, который может дать вам предупреждение: 

QQuickItem::stackAfter: Cannot stack after 0x3d5cb18, which must be a sibling

Или вы можете использовать Instantiator, который должен будет создать дополнительный QtObject, но вместо этого вы не получите никакого предупреждения. 

Instantiator {
    model: lm
    delegate: QtObject {
        property Item child: Rectangle {
        width: 100
        height: 100
        parent: (target === "Grid" ? grid :
                   (target === "Row" ? row :
                      (target === "Column" ? column :
                         null)))
        color: content
    }}
}

И вы можете даже иметь несколько объектов для одной записи модели ... 

Instantiator {
    model: lm
    delegate: QtObject {
        property Item child1: Rectangle {
        width: 100
        height: 100
        parent: (target === "Row" ? row :
                   (target === "Column" ? column :
                      null)) // If "Grid" this thing will be created but not shown.
        color: content
        }

        property Item gridItem: Button {
            width: 100
            height: 30
            text: content
            onClicked: rootWin.color = content
            parent: grid
        }
    }
}
...