How can I select a string from a list and transfer it to another QML?

Mateus

Hey

The question is, I'm starting to work on QML, developing some screens for a project, and I'm not sure how to solve the following problem:

I have a gridview with four quadrants (First Figure), and if I press enter it will open a new screen with a list of parameters. If, for example, I select the first one in this list, that name must also appear in the quadrant I selected.

Captura de tela de 2022-09-27 22-36-22.png

Captura de tela de 2022-09-27 22-36-26.png

Code of first .qml:

import QtQuick 2.0
import QtQuick.Controls 6.2

Item {

Rectangle {
    id: rectangle
    anchors.fill: parent
    color: "#d9d9d9"

    Component {
        id: highlight
        Rectangle {
            id: rectangle2
            color: "#d9d9d9"
            border.width: 4
            width: 400
            height: 250
        }
    }

    Rectangle {
        id: rectangle1
        width: parent.width
        height: 62
        color: "#000000"
        anchors.left: parent.left
        anchors.top: parent.top
        anchors.leftMargin: 0
        anchors.topMargin: 0

        Text {
            id: text1
            color: "#ffffff"
            text: qsTr("Monitor: Tela de parâmetros")
            anchors.left: parent.left
            anchors.top: parent.top
            anchors.bottom: parent.bottom
            font.pixelSize: 40
            font.styleName: "Medium"
            anchors.leftMargin: 8
            anchors.bottomMargin: 8
            anchors.topMargin: 9

        }
    }

ListModel {
    id: nameModel
    ListElement { name: "Temperatura ambiente"}
    ListElement { name: "Velocidade do motor" }
    ListElement { name: "Pressão de ar do sistema"}
    ListElement { name: "Tensão do sistema"}
}

Component {
        id: nameDelegate
        Rectangle {
            color: "transparent"
            width: 335
            height: 180
            border.width: 0.5
            Image {
                id: delegateImage
                anchors.horizontalCenter: delegateText.horizontalCenter
                width: 64; height: 64; smooth: true
                fillMode: Image.PreserveAspectFit
            }

            Text {
                id: delegateText
                text: model.name; font.pixelSize: 22
            }
            Text {
                    id: airtempLabel
                    text: qsTr("0")
                    anchors.left: parent.left
                    anchors.top: parent.top
                    font.pixelSize: 22
                    font.styleName: "Medium"
                    anchors.leftMargin: 169
                    anchors.topMargin: 110

                    Connections {
                        target: backend

                        function onSetAirTempValue(airtemp) {
                            airtempLabel.text = airtemp
                        }
                    }
             }

        }

}

GridView {
    id:gridview
    anchors.fill: parent
    anchors.bottomMargin: 50
    anchors.topMargin: 70
    cellWidth: 350; cellHeight: 200
    model: nameModel
    delegate: nameDelegate
    clip: false
    highlight: highlight
    focus: true
}

Image {
    id: proximo
    x: 697
    y: 241
    width: 50
    height: 50
    source: "images/seta-para-tras.png"
    rotation: 180
    fillMode: Image.PreserveAspectFit

    MouseArea {
        id: mouseArea10
        x: 0
        y: 0
        width: 50
        height: 55
        rotation: 180
        onClicked:
            if (gridview.currentIndex !== 3){
            gridview.currentIndex = gridview.currentIndex + 1
            }
            else{
            gridview.currentIndex = 0
            }
    }
}

Image {
    id: ok
    x: 697
    y: 502
    width: 50
    height: 50
    source: "images/enter.png"
    fillMode: Image.PreserveAspectFit

    MouseArea {
        id: mouseArea11
        x: 0
        y: 0
        width: 50
        height: 55
        onClicked: {
            switch(gridview.currentIndex) {
            case 0:
                source = "UI/Monitor_SelectParameter_Q1.qml"
                break
            case 1:
                source = "UI/Monitor_SelectParameter_Q2.qml"
                break
            case 2:
                source = "UI/Monitor_SelectParameter_Q3.qml"
                break
            case 3:
                source = "UI/Monitor_SelectParameter_Q4.qml"
                break
            default:
                source = "UI/Monitor_SelectParameter_Q4.qml"
            }
        }
    }
}
Image {
    id: voltar
    x: 8
    y: 499
    width: 50
    height: 50
    source: "images/seta-para-tras.png"
    fillMode: Image.PreserveAspectFit

    MouseArea {
        id: mouseArea12
        x: 0
        y: 0
        width: 50
        height: 55
        onClicked: source = "UI/MainWindow.qml"
    }
}
}

}

Code of second .qml

import QtQuick 2.0

Item {

Rectangle {
    id: rectangle
    anchors.fill: parent
    anchors.rightMargin: 0
    anchors.bottomMargin: 0
    anchors.leftMargin: 0
    anchors.topMargin: 0
    color: "#d9d9d9"

    MainHeader {
        id: mainHeader
    }


    Rectangle {
        id: rectangle1
        height: 60
        color: "#000000"
        border.width: 2
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.top: parent.top
        anchors.rightMargin: -2
        anchors.leftMargin: -2
        anchors.topMargin: 70

        Text {
            id: text1
            color: "#ffffff"
            text: qsTr("Monitorar: Selec Parâmetro")
            anchors.verticalCenter: parent.verticalCenter
            anchors.left: parent.left
            font.pixelSize: 34
            font.styleName: "Medium"
            anchors.leftMargin: 20
        }

    }

    Image {
        id: voltar
        x: 8
        y: 487
        width: 50
        height: 50
        source: "images/seta-para-tras.png"
        fillMode: Image.PreserveAspectFit

        MouseArea {
            id: mouseArea10
            x: 0
            y: 0
            width: 50
            height: 55
            onClicked: source = "UI/MonitorScreen.qml"
        }
    }
    Rectangle {
        id: rectangle2
        width: 739
        height: 285
        x:0
        y:185
        color: "#d9d9d9"
        border.width: 2


        ListView {
            id: listView
            width: 332
            spacing: -10
            anchors.leftMargin: 2
            clip: true
            boundsBehavior: Flickable.StopAtBounds
            anchors {
                top: parent.top
                left: parent.left
                topMargin: 8
                bottom: parent.bottom
                bottomMargin: 36
            }

            delegate: Item {
                x: 2
                width: 50
                height: 53
                Rectangle {
                    id: rect1
                    Rectangle {
                        anchors {
                            top: parent.top
                            leftMargin: 0
                        }
                        width: 730
                        height: 46
                        color: listView.currentIndex===index? "black": "#D9D9D9"

                        Text {
                            text: name
                            y: 0
                            x: 4
                            font.pixelSize: 20
                            font.styleName: "Medium"
                            color: listView.currentIndex===index? "white": "black"

                            font.bold: listView.currentIndex===index? true: false

                            MouseArea {
                                anchors.fill: parent
                                onClicked: listView.currentIndex = index
                            }
                        }

                    }


                }
            }
            model: ListModel {
                ListElement {
                    name: "Temp Óleo Freio (ED)"
                }

                ListElement {
                    name: "Temp Óleo Freio (ET)"
                }

                ListElement {
                    name: "Temp Óleo Freio (DD)"
                }

                ListElement {
                    name: "Temp Óleo Freio (DT)"
                }

                ListElement {
                    name: "Pressão Bomba Freio"
                }

                ListElement {
                    name: "Temp Ar da Cabine"
                }

                ListElement {
                    name: "Temp Ar Duto Cabine"
                }

                ListElement {
                    name: "Temp Óleo (Eixo) Dif"
                }

                ListElement {
                    name: "Temp Ar Cab Sol Oper"
                }

                ListElement {
                    name: "Pr Óleo Freio Est (ET)"
                }

                ListElement {
                    name: "Pr Óleo Freio Est (DT)"
                }

                ListElement {
                    name: "Press Acum Freio Sec"
                }

                ListElement {
                    name: "Press Acum Freio Serv"
                }

                ListElement {
                    name: "Pressão Lubrifi. Automático"
                }

                ListElement {
                    name: "Pressão do Óleo Acu. Direção"
                }

                ListElement {
                    name: "Temp. Fluido de Direção"
                }

                ListElement {
                    name: "Press. Óleo Bomba Dir"
                }

                ListElement {
                    name: "Restrição Filtro Ar 1"
                }

                ListElement {
                    name: "Restrição Filtro Ar 1"
                }

                ListElement {
                    name: "Restrição Filtro Ar 2"
                }

                ListElement {
                    name: "Restrição Filtro Ar 3"
                }

                ListElement {
                    name: "Restrição Filtro Ar 4"
                }

                ListElement {
                    name: "Temp. Ar Ambiente"
                }

                ListElement {
                    name: "Press. Atmosférica"
                }

                ListElement {
                    name: "Press. Ar Cárter"
                }

                ListElement {
                    name: "Pres (Abs) Sd Arref Mot"
                }

                ListElement {
                    name: "Temp. Líq Arref. Motor"
                }

                ListElement {
                    name: "Press. Dif. Filtro ÓLEO Mtr"
                }

                ListElement {
                    name: "Pressão Óleo Motor"
                }

                ListElement {
                    name: "Pressão Óleo Motor (Abs)"
                }

                ListElement {
                    name: "Tem. Óleo Motor"
                }

                ListElement {
                    name: "Temp. Escape LE"
                }

                ListElement {
                    name: "Temp. Escape LD"
                }

                ListElement {
                    name: "Prs (abs) Sd Bm El Tr C"
                }

                ListElement {
                    name: "Press Dif Filtro Comb"
                }

                ListElement {
                    name: "Press. do Comb"
                }

                ListElement {
                    name: "Adm (Abs) Bomb Comb"
                }

                ListElement {
                    name: "Press Cremalh(Trilho) Comb"
                }

                ListElement {
                    name: "Temp Cremalh(Trilho) Comb"
                }

                ListElement {
                    name: "Temp Combustível"
                }

                ListElement {
                    name: "Press. Coletor Adm 2"
                }

                ListElement {
                    name: "Temp Coletor Adm 2"
                }

                ListElement {
                    name: "Press Coletor Adm"
                }

                ListElement {
                    name: "Temp Colet Adm"
                }

                ListElement {
                    name: "Entr Cmp Turbo 1 (Abs)"
                }

                ListElement {
                    name: "Entr Cmp Turbo 2 (Abs)"
                }

                ListElement {
                    name: "Entr Cmp Turbo 3 (Abs)"
                }

                ListElement {
                    name: "Entr Cmp Turbo 4 (Abs)"
                }

                ListElement {
                    name: "Temp Óleo Conv Trq"
                }

                ListElement {
                    name: "Temp Óleo Trans"
                }

                ListElement {
                    name: "Deriv Pico Arm"
                }

                ListElement {
                    name: "Passo Pico Arm"
                }

                ListElement {
                    name: "Incl Pico Arm"
                }

                ListElement {
                    name: "Pressão Esteio (DE)"
                }

                ListElement {
                    name: "Pressão Esteio (TE)"
                }

                ListElement {
                    name: "Pressão Esteio (DD)"
                }

                ListElement {
                    name: "Pressão Esteio (TD)"
                }
            }
        }
    }

    Image {
        id: upbutton
        x: 345
        y: 136
        width: 50
        height: 50
        source: "images/seta-para-cima.png"
        fillMode: Image.PreserveAspectFit

        MouseArea {
            id: mouseArea5
            x: 0
            y: 0
            width: 50
            height: 55
            onClicked:
                if (listView.currentIndex !== 0){
                    listView.currentIndex = listView.currentIndex - 1
                }
        }
    }
    Image {
        id: downbutton
        x: 345
        y: 487
        width: 50
        height: 50
        source: "images/seta-para-baixo.png"
        fillMode: Image.PreserveAspectFit

        MouseArea {
            id: mouseArea1
            x: 0
            y: 0
            width: 50
            height: 55
            onClicked:
                if (listView.currentIndex !== 56){
                    listView.currentIndex = listView.currentIndex + 1
                }
        }
    }

    Image {
        id: ok
        x: 697
        y: 502
        width: 50
        height: 50
        source: "images/enter.png"
        fillMode: Image.PreserveAspectFit

        MouseArea {
            id: mouseArea11
            x: 0
            y: 0
            width: 50
            height: 55
            onClicked: {
                switch(listView.currentIndex) {
                case 0:
                    source = "UI/MonitorScreen.qml"
                    break
                default:
                    source = "UI/MonitorScreen.qml"
                }
            }
        }
    }
}

}