在qt / qml中使用外部“委托”的ListView

Question

我的QML代码有问题。 我有一个不同的页面（每个页面是一个不同的.qml文件），并希望使用垂直滑动/滚动从一个页面更改为另一个页面。 QT已经提供了滑动示例，但仅适用于水平滑动视图，我想要垂直滑动。 我还看到了使用ListView进行垂直滑动的示例。 但是，在列表视图中，到目前为止我只能放文本。

我想在每个ListView行中放置一个不同的QML视图。在“委托”中有一些使用外部qml文件的示例，但没有一个适用于我。

在其他教程中，我看到了与此类似的代码：//这是main.qml

    ListView {
        id: iranCitiesList
        snapMode: ListView.SnapOneItem
        highlightRangeMode: ListView.StrictlyEnforceRange

        model: ListModel
        delegate: Loader {
            height: childrenRect.height
            width: parent.width
            source: "Page1.qml"
        }
    }
    Page1 { id: page }

//listModel.qml

import QtQuick 2.9
ListModel {
  ListElement {   sourceComponent: Page1}
  ListElement {   sourceComponent: Page2}
}

//Page1.qml // Page1.qml非常基本。 仅显示简单文本

import QtQuick 2.9
Rectangle {
  id: delegateItem
  width: parent.width; height: 100
  color: "white"

  Text {
    id: itexItem
    font.pixelSize: 40
    text: "Page1"
  }
}

这里，加载了Page1.qml的视图，但是我无法在页面之间滚动。

现在，继承我正在研究的代码。 这是一个工作列表视图。 它非常基础，但它的工作原理。 //main.qml

  ListView {
        id: listView
        snapMode: ListView.SnapOneItem
        highlightRangeMode: ListView.StrictlyEnforceRange

        anchors {
            top: parent.top
            bottom: parent.bottom
            left: parent.left
            right: parent.right
        }

        model: ListModel {
            id: listModel
            ListElement {
                text: "1"
            }
            ListElement {
                text: "2"
            }
        }

        delegate: Page {
            width:  ListView.view.width
            height: ListView.view.height

            Text {
                anchors.centerIn: parent
                text: model.text
            }
        }
    }

正如我之前所说，Listview是加载的，我可以在每一行之间滚动，但我想在我的列表中放置一个更复杂的设计。 像外部qml视图。 我怎样才能做到这一点？

谢谢！

Answer 1

您应该阅读动态对象创建文档： https ： //doc.qt.io/qt-5/qtqml-javascript-dynamicobjectcreation.html

ListView{
    snapMode: ListView.SnapOneItem
    highlightRangeMode: ListView.StrictlyEnforceRange

    anchors {
        top: parent.top
        bottom: parent.bottom
        left: parent.left
        right: parent.right
    }
    model: ListModel {
        ListElement { path: "file1.qml" }
        ListElement { path: "file2.qml" }
    }
    delegate: Page {
        width:  ListView.view.width
        height: ListView.view.height

        Component.onCompleted: {
            var component = Qt.createComponent(path)
            if (component.status == Component.Ready)
                    component.createObject(this, {"width": width, "height": height});
        }
    }
}

这段代码应该可以使用，您只需将页面路径放在模型中即可。