不使用GridView或ListView但使用c ++模型的结构化布局的QML解决方案

Question

我试图通过仅使用Row和Column来思考一种以非常有条理的方式表示某些项目的方法。我从Qt Widgets那里得到了一个想法，你可以用水平和垂直布局做任何事情，并拥有漂亮的用户界面。问题是我仍然希望创建我的QML项目的数据来自c ++，这需要某种模型。据我所知，模型只能绑定到PathView，GridView或ListView。此外，数据将根据QML UI发出的一些“添加”和“删除”操作动态更改。有没有办法使用Row和Column与模型？

Answer 1

让我们假设你的模型应该填充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
        }
    }
}