List Item highlight under StackView

[AROH]

Hi,

I want to highlight an Item of a List View which is under StackView pages. The use case i am trying to achieve is
On mainPage of StackView there is an ListView and among the List Items if user an Item then it should navigate to next page and same item should get highlighted from the List View that is present in the nextPage and action of the particular item should be visible in rectangle present beside the ListView in the next page with the value that is received via stackView PUSH.

Here is the Sample application below that i am trying to achieve the same

main.qml

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    StackView{
        id: mainView

        anchors.fill: parent
        initialItem: mainPage

        Page{
            id: mainPage

            ListView {
                width: 400
                height: 600

                model: ListModel{
                    ListElement {
                        name: "Hai"
                    }

                    ListElement {
                        name: "Hai1"
                    }

                    ListElement {
                        name: "Hai2"
                    }

                    ListElement {
                        name: "Hai3"
                    }

                    ListElement {
                        name: "Hai4"
                    }

                    ListElement {
                        name: "Hai5"
                    }
                }

                delegate: Button {
                    text: model.name
                    onClicked: {
                        mainView.push("MePage.qml",{selectedIndex:index})
                    }
                }
            }
        }
    }
}

MePage.qml

import QtQuick 2.0

import QtQuick.Layouts 1.3
import QtQuick.Controls 2.2

Page {
    id: root
    //anchors.fill: parent

    property int selectedIndex: -1
    onSelectedIndexChanged: {
        console.error("===============>IndexChanged", selectedIndex)
    }

    RowLayout{
        anchors.fill: parent
        ColumnLayout {
            RowLayout {
                Layout.alignment: Qt.AlignTop
                Button {
                    id: a

                    text: "A"
                    onClicked: {
                        console.error("A")
                    }
                }

                Button {
                    id: b

                    text: "B"
                    onClicked: {
                        console.error("B")
                    }
                }
            }

            Rectangle {
                Layout.fillWidth: true
                color: "black"
                height: 2
            }

            ListView {
                id: msModel

                currentIndex: selectedIndex
                width: 180; height: 400
                model: ListModel {
                    ListElement {
                        name: "Hia"
                    }

                    ListElement {
                        name: "Hia1"
                    }

                    ListElement {
                        name: "Hia2"
                    }

                    ListElement {
                        name: "Hia3"
                    }

                    ListElement {
                        name: "Hia4"
                    }

                    ListElement {
                        name: "Hia5"
                    }

                    ListElement {
                        name: "Hia6"
                    }

                    ListElement {
                        name: "Hia6"
                    }

                    ListElement {
                        name: "Hia7"
                    }

                    ListElement {
                        name: "Hia8"
                    }

                    ListElement {
                        name: "Hia9"
                    }

                    ListElement {
                        name: "Hia10"
                    }

                    ListElement {
                        name: "Hia11"
                    }
                }

                delegate: Button {
                    height: 50
                    text: model.name
                    onClicked: {
                        root.selectedIndex = index
                    }
                }

                highlight: Rectangle{
                    width: parent.width
                    visible: (selectedIndex === msModel.currentIndex)
                    color: "blue"
                }
            }
        }
        Rectangle {
            id: divider

            width: 2
            color: "black"
            Layout.fillHeight: true
        }

        Rectangle{
            id: contentRect

            width: msModel.width
            height: msModel.height
            color: "lightblue"
            Text{
                text: "Item--" + root.selectedIndex
            }
        }
    }
}

The expectation is If User selects the List Item "Hai" from the ListView in main.qml then the same element should be in highlighted state when StackView navigates the User to MePage.qml and Item1 should be visible on the leftside rectangle of MePage
Any help on the same is highly appreciated!!
Thanks in advance !!

Regard's,
Rohith.G

[dheerendra]

@AROH

What is the current issue ? If you can help with current issue faced by you, we may help. Few things added confusion for me at least.

Also model size in main page & MePage.qml are not matching. After going to second page, what would you liked to do ? MainPage will dis appear once go to next page. There is no action exist to come back.

[AROH]

@dheerendra

For example:
Suppose a user selects the “Hai2” list item on the first page. In the second page, the same “Hai2” item should appear in a highlighted state, indicated by a blue color. Although the index is correctly updated with the value selected by the user on the first page, the visual highlighting of the item is not working as expected.

[dheerendra]

@AROH

Is Index for Hai is same for the first Page & second page ?

[AROH]

@dheerendra

Yes, the ListView in the both the pages will use the same model.