代码之家 › 专栏 › 技术社区 › bardao

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

qtquick2 qt5 qml qt

bardao · 技术社区 · 7 年前

我正试图通过使用 Row Column 只是。我是从Qt小部件中得到这个想法的,在Qt小部件中,你可以用水平和垂直布局做任何事情,并且有一个漂亮的UI。问题是,我仍然希望创建QML项的数据来自c++,这需要某种模型。据我所知,模型只能 PathView , GridView 或 ListView 排 和 列

1 回复 | 直到 7 年前

derM - not here for BOT dreams 7 年前

假设您的模型将填充 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
        }
    }
}