QML ListView - open file by selected Elemnt

Damian7546

Hi,
I have example with ListView like below:

import QtQuick 2.15

Item {
    ListModel {
        id: settingsMainMenuListModel
        ListElement {
            menuText: "Temperature Units"
            iconSource: "qrc:/UI/Assets/thermometer.png"
        }
        ListElement {
            menuText: "Schedule"
            iconSource: "qrc:/UI/Assets/calendar.png"
        }
        ListElement {
            menuText: "WiFi Settings"
            iconSource: "qrc:/UI/Assets/wifi.png"
        }
        ListElement {
            menuText: "About"
            iconSource: "qrc:/UI/Assets/info-button.png"
        }
    }

    Rectangle {
        id: stackViewBackgound
        width: parent.width * .7
        height: parent.height * .7
        radius: 5
        anchors.centerIn: parent
        color: "black"
        border.width: 3
        border.color: "white"
    }

    ListView {
        id: settingsListView
        anchors.fill: stackViewBackgound
        model: settingsMainMenuListModel
        interactive: false
        delegate: Rectangle {
            id: mainButton
            width: stackViewBackgound.width
            height: stackViewBackgound.height / 4
            color: "black"
            border.color: "white"
            border.width: 4
            radius: 5
            Image {
                id: iconImage
                anchors {
                    verticalCenter: parent.verticalCenter
                    left: parent.left
                    leftMargin: 30
                }
                source: iconSource
                height: 48
                width: 48
            }
            Text {
                id: mainText
                anchors {
                    verticalCenter: parent.verticalCenter
                    left: iconImage.right
                    leftMargin: 40
                }
                color: "white"
                font.pixelSize: 30
                text: menuText
            }
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    settingsStackView.push("AboutPage.qml")
                }
            }
        }
    }
}

It contains four elements, now when I click any item , always the AbautPage.qml is opened.
How to make:
Click on element 1 open .qml file1
Click on element 2 open .qml file2
Click on element 3 open .qml file3
Click on element 4 open .qml AbautPage

Damian7546

I solved my problem like this:

import QtQuick 2.15

Item {
    ListModel {
        id: settingsMainMenuListModel
        ListElement {
            menuText: "Temperature Units"
            iconSource: "qrc:/UI/Assets/thermometer.png"
            openPicture: function (value)  {settingsStackView.push("page1.qml")}
        }
        ListElement {
            menuText: "Schedule"
            iconSource: "qrc:/UI/Assets/calendar.png"
            openPicture: function (value)  {settingsStackView.push("page2.qml")}
        }
        ListElement {
            menuText: "WiFi Settings"
            iconSource: "qrc:/UI/Assets/wifi.png"
             openPicture: function (value)  {settingsStackView.push("page3.qml")}
        }
        ListElement {
            menuText: "About"
            iconSource: "qrc:/UI/Assets/info-button.png"
             openPicture: function (value)  {settingsStackView.push("page4.qml")}
        }
    }

    Rectangle {
        id: stackViewBackgound
        width: parent.width * .7
        height: parent.height * .7
        radius: 5
        anchors.centerIn: parent
        color: "black"
        border.width: 3
        border.color: "white"
    }

    ListView {
        id: settingsListView
        anchors.fill: stackViewBackgound
        model: settingsMainMenuListModel
        interactive: false
        delegate: Rectangle {
            id: mainButton
            width: stackViewBackgound.width
            height: stackViewBackgound.height / 4
            color: "black"
            border.color: "white"
            border.width: 4
            radius: 5
            Image {
                id: iconImage
                anchors {
                    verticalCenter: parent.verticalCenter
                    left: parent.left
                    leftMargin: 30
                }
                source: iconSource
                height: 48
                width: 48
            }
            Text {
                id: mainText
                anchors {
                    verticalCenter: parent.verticalCenter
                    left: iconImage.right
                    leftMargin: 40
                }
                color: "white"
                font.pixelSize: 30
                text: menuText
            }
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    openPicture(index)
                }
            }
        }
    }
}

JoeCFD

@Damian7546 said in QML ListView - open file by selected Elemnt:

settingsListView

            MouseArea {
                anchors.fill: parent
                onClicked: {
                    /* here you need to set */
                    settingsListView.currentIndex = index
                    openPicture(index)
                }
            }