ListView с внешним «делегатом» в qt / qml

Question

У меня проблема с моим кодом QML.У меня есть разные страницы (каждая страница представляет собой отдельный файл .qml) и хочу перейти с одной страницы на другую с помощью вертикального пролистывания / прокрутки.QT уже предоставляет примеры смахивания, но они предназначены только для просмотра с горизонтальным смахиванием, и я хочу вертикальное смахивание.Я также видел примеры вертикального смахивания с использованием ListView.Тем не менее, в представлении списка, до сих пор я могу только поместить текст.

Я хочу поместить различное представление QML в каждую строку ListView. Есть несколько примеров использования внешних файлов 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});
        }
    }
}

Этот код должен работать, вам просто нужно указать пути к страницам в модели.