在 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});
        }
    }
}

此代码应该可以工作，您只需将页面路径放入模型中。