Qt/QML：如何从 GridView 模型的 ListElement 引用 component/object

Question

我有一个 GridView 和一个委托，它应该使用 Loader 来加载和显示在同一个 QML 文件中定义的组件。

假设我有一个这样的 GridView：

GridView {
    delegate: Rectangle {
        Loader { sourceComponent: model.pageContents }
    }
    model: ListModel {
        ListElement { /* how do I reference any of the components defined below from here, so the Loader can actually load and display it...  ? */ }
    }
}



Component {
    id: page_01
    Rectangle { 
        color: "red"
        // Page contents for page 1 go here.
    }
}



Component {
    id: page_02
    Rectangle { 
        color: "red"
        // Page contents for page 2 go here.
    }
}

我知道我可以从字符串、外部文件和 URL 创建 QML 对象和组件。但我想理想地做这样的事情：

ListModel {
    ListElement { pageContents: page_01 }
    ListElement { pageContents: page_02 }
}

我更愿意将所有内容都保存在一个 QML 文件中，这样我就可以轻松地将其传输并存储在设备上，而不必担心解决外部依赖性等问题

如何从 ListElements 中引用同一个 QML 文件中的组件？

Answer 1

由于 ListElement 值的限制，您不能只将项目 id 放在这里。但是您可以轻松地使用一些外部存储，例如属性来存储指向您的页面的指针。在下面的示例中，我使用带有页面 ids 的数组和所需页面的索引作为 ListElement 数据：

import QtQuick 2.3
import QtQuick.Window 2.2

Window {
    visible: true
    width: 600
    height: 600

    GridView {
        id: grid
        anchors.fill: parent
        property var pages: [page_01, page_02]
        model: ListModel {
            ListElement { pageIndex: 0 }
            ListElement { pageIndex: 1 }
        }

        delegate: Loader { sourceComponent: grid.pages[pageIndex] }
    }

    Component {
        id: page_01
        Rectangle {
            color: "red"
            width: 100
            height: 100
            Component.onCompleted: console.log("page_01 was created")
        }
    }

    Component {
        id: page_02
        Rectangle {
            color: "blue"
            width: 100
            height: 100
            Component.onCompleted: console.log("page_02 was created")
        }
    }
}

Qt/QML：如何从 GridView 模型的 ListElement 引用 component/object

Qt/QML: How to refer to a component/object from a GridView's model's ListElement

qt

components

qml