interaction StackView / ListView

Hi EveryBody,

I created a listView that contains a custom menu, and StackView that contains the pages to load from the custom menu. next image Attachment 11643

I want when I click in 1st element in the SubMenu load the first page, 2nd element load the second page ... etc

My image :
1st element=Naissance --- load ----> Page1
2nd element=Deces --- load ----> Page2
3rd element --- load ----> Page3
etc

Code:

---

MouseArea {
                        anchors.fill: parent
                        hoverEnabled: true
 
 
                        onClicked: stack.push(view2)

---

The probleme is : All elements of SubMenu load view2, and I want each element loads a specific page

How Can I specify in MouseArea each element of submenu ???

Cheers,

Inside a list view delegate you have access to the model data for that index and the numerical index of the entry.

Cheers,
_

Thanks,

I have 2 delegates:
1 for main menu
2 for subMenu

here is my code:

Code:

---

ListView {
        width: 250
        height: root.height
        anchors.right: parent.right
 
        model: menuModel
        delegate: categoryDelegate
        boundsBehavior: Flickable.StopAtBounds
    }
 
    ListModel {
        id: menuModel
        ListElement {
            categoryName: "Acceuil"
            collapsed: true
 
            // A ListElement can't contain child elements, but it can contain
            // a list of elements. A list of ListElements can be used as a model
            // just like any other model type.
            subItems: [
                ListElement { itemName: "1" },
                ListElement { itemName: "2" },
                ListElement { itemName: "3" },
                ListElement { itemName: "4" }
            ]
        }
 
        ListElement {
            categoryName: "Compte"
            collapsed: true
            subItems: [
                ListElement { itemName: "1" },
                ListElement { itemName: "2" }
            ]
        }
 
        ListElement {
            categoryName: "Outils"
            collapsed: true
            subItems: [
                ListElement { itemName: "1" },
                ListElement { itemName: "2" },
                ListElement { itemName: "3" }
            ]
        }
 
        ListElement {
            categoryName: "Statistiques"
            collapsed: true
            subItems: [
                ListElement { itemName: "Naissances" },
                ListElement { itemName: "Deces" }
            ]
        }
        ListElement {
            categoryName: "Parametres"
            collapsed: true
            subItems: [
                ListElement { itemName: "1" },
                ListElement { itemName: "2" }
            ]
        }
    }
 
    Component {
        id: categoryDelegate
        Column {
            Rectangle {
                id: categoryItem
                color: base
                border.color: Qt.lighter(color, 1.5)
                height: 50
                width: 250
                Text {
                    anchors.centerIn: parent
                    color: "#f2f2f2"
                    font.pixelSize: 25
                    text: categoryName
                    font.family: "MS Reference Sans Serif"
                }
                Image {
                    id: fleche
                    source: "img/fleche.png"
                    sourceSize.width: 25
                    sourceSize.height: 25
                    anchors.left: parent.left
                    anchors.leftMargin: 6
                    anchors.verticalCenter: parent.verticalCenter
                }
                MouseArea {
                    anchors.fill: parent
                    hoverEnabled: true
 
                    // Toggle the 'collapsed' property
                    onClicked: {
                        console.log(menuModel.get(1).categoryName)
                        fleche.rotation+=180
                        menuModel.setProperty(index, "collapsed", !collapsed)
                    }
                    onEntered: categoryItem.color = "#0d0d0d"
                    onExited: categoryItem.color = base
                }
            }
            Loader {
                id: subItemLoader
 
                // This is a workaround for a bug/feature in the Loader element. If sourceComponent is set to null
                // the Loader element retains the same height it had when sourceComponent was set. Setting visible
                // to false makes the parent Column treat it as if it's height was 0.
                visible: !collapsed
                property variant subItemModel : subItems
                sourceComponent: collapsed ? null : subItemColumnDelegate
                onStatusChanged: if (status == Loader.Ready) item.model = subItemModel
            }
        }
    }
    Component {
        id: subItemColumnDelegate
        Column {
            property alias model : subItemRepeater.model
            Repeater {
                id: subItemRepeater
                delegate: Rectangle {
                    id: rectangle1
 
                    height: 40
                    width: 250
                    color: "#8c8c8c"
                    border.color: Qt.lighter(color)
                    //border.width: 2
 
                    Text {
                        id: subItemText
                        //anchors.centerIn: parent
                        font.pixelSize: 16
                        text: itemName
                        anchors.left: parent.left
                        anchors.leftMargin: 20
                        anchors.verticalCenter: parent.verticalCenter
                    }
                    MouseArea {
                        anchors.fill: parent
                        hoverEnabled: true
 
                        // Toggle the 'collapsed' property
                        onClicked:{
                            console.log(menuModel.get(0).categoryName)
                            stack.push(view2)}
 
                        onEntered: {
                            rectangle1.color= "#999999"
                            subItemText.color = "white"
                        }
                        onExited: {
                            rectangle1.color= "#8c8c8c"
                            subItemText.color = "black"
                        }
                    }
                }
            }
        }
    }
    StackView{

---

Can you add the modifications in the code above to solve the problem ;)

Cheers,

I am afraid I don't understand what you mean with "add the modification", you are the only one who knows what a click on such a sub item should do.

If you want different views to be push onto the stack, make the different delegates call push with different objects.

Cheers,
_

Hi anda_skoa,

I have a mainMenu (Acceuil, Compte, Statistiques, ... ) that does nothing just contain the subMenu
A subMenu that contains some elements for example : Statistiques contains : Naissances & Deces Attachment 11645

I created a ListView than contains mainMenu and subMenu :

Code:

---

ListView {
        ...
        model: menuModel
        delegate: categoryDelegate  
    }
 
    ListModel {
        id: menuModel
        ListElement {
            categoryName: "Acceuil"
            collapsed: true
 
            // A ListElement can't contain child elements, but it can contain
            // a list of elements. A list of ListElements can be used as a model
            // just like any other model type.
 
           // SubMenu :
            subItems: [
                ListElement { itemName: "1" },
                ListElement { itemName: "2" },
                ListElement { itemName: "3" },
                ListElement { itemName: "4" }
            ]
        }
 
        ListElement {
            categoryName: "Statistiques"
            collapsed: true
 
           // SubMenu :
            subItems: [
                ListElement { itemName: "Naissances" },
                ListElement { itemName: "Deces" }
            ]
        }    
    }
    Component {
        id: categoryDelegate
        Column {
            Rectangle {
                id: categoryItem
                ...
                Text {
                    text: categoryName
                }
 
                MouseArea {                
                    // Toggle the 'collapsed' property
                    onClicked: {
                        menuModel.setProperty(index, "collapsed", !collapsed)
                    }                   
                }
            }
            Loader {
                id: subItemLoader
 
                // This is a workaround for a bug/feature in the Loader element. If sourceComponent is set to null
                // the Loader element retains the same height it had when sourceComponent was set. Setting visible
                // to false makes the parent Column treat it as if it's height was 0.
                visible: !collapsed
                property variant subItemModel : subItems
                sourceComponent: collapsed ? null : subItemColumnDelegate
                onStatusChanged: if (status == Loader.Ready) item.model = subItemModel
            }
        }
    }
    Component {
        id: subItemColumnDelegate
        Column {
            property alias model : subItemRepeater.model
            Repeater {
                id: subItemRepeater
                delegate: Rectangle {
                   ...
                    Text {                       
                        text: itemName            
                    }
                    MouseArea {                   
                        // Toggle the 'collapsed' property
                        onClicked:{
                            stack.push(view2)}                  
                    }
                }
            }
        }
    }

---

When I click in any subMenu element = load view2 (exp click : Naissances -> load view2 , Deces -> load view2) = normal

Code:

---

MouseArea {                   
                        // Toggle the 'collapsed' property
                        onClicked:{
                            //
                            stack.push(view2)}                  
                    }

---

I want that each element of subMenu loads a specific view (exp click : Naissances -> load view1 , Deces -> load view2) ???

I have one MouseArea that controls all subMenu elements

How can I do to : onClicked(on Naissance -> view1)
How can I do to : onClicked(on Deces -> view2)

Code:

---

MouseArea {                   
                        // Toggle the 'collapsed' property
                        onClicked:{
                            // Naissance->stack.push(view1)
                            // Deces->stack.push(view2)}                  
                    }

---

It's simple by using buttons (each button -> load a specific view)
but with ListView :mad:

Cheers

As I said before: each instance of the delegate has access to the model data for its index and the index number.

You could either use an array of views and use model.index to get the one you want or have the correct view as property in your model data or you do switch or if/elseif on model.index

Cheers,
_

Hi,

I solved the problem in mainMenu by using :

Code:

---

MouseArea {
                       ...
                        onClicked:{
                                switch(index) {
                                case 0:
                                    stack.push(view11)
                                    break;
                                case 1:
                                    stack.push(view12)
                                    break;
                                case 2:
                                    stack.push(view13)
                                    break;
                                case 3:
                                    stack.push(view14)
                                    break;
                                case 4:
                                    stack.push(view15)
                                    break;
                                }
                            }

---

I have some problems in subMenu :

Code:

---

MouseArea {
                       ...
                        onClicked:{
                            // The first element of mainMenu contains 4 elements of subMenu 
                            if(menuModel.get(0)){
                                switch(index) {
                                case 0:
                                    stack.push(view1)
                                    break;
                                case 1:
                                    stack.push(view2)
                                    break;
                                case 2:
                                    stack.push(view3)
                                    break;
                                case 3:
                                    stack.push(view4)
                                    break;
                                }
                            }
 
                            // The 2nd element of mainMenu contains 2 elements of subMenu 
                            if(menuModel.get(1)){
                                console.log(index)
                                switch(index) {
                                case 0:
                                    stack.push(view5)
                                    break;
                                case 1:
                                    stack.push(view6)
                                    break;
                                }
                            }

---

When I clicked in 1st element [subMenu] of 1st element [mainMenu], next image Attachment 11648 --> load Page 5 however you should load Page 1, the same for 2nd element [subMenu] of 1st element [mainMenu] --> load Page 6 however you should load Page 2, because of expression in code above (e.g):

Code:

---

// The 2nd element of mainMenu contains 2 elements of subMenu 
                            if(menuModel.get(1)){
                                console.log(index)
                                switch(index) {
                                case 0:
                                    stack.push(view5)
                                    break;
                                case 1:
                                    stack.push(view6)
                                    break;

---

I think that I did some thing wrong in if condition, any idea to solve this ???

Cheers,

You are calling get() on the model, which returns a reference to the object in the model, which is always true.

What you want is to let the sub menu delegates know to which main menu item they belong.
E.g. you could store the current main menu delegete index in the sub item delegetes as part of the initialization in the loader, like you currently do for the model.

Cheers,
_

Hii,

Quote:

---

Originally Posted by anda_skoa

you could store the current main menu delegete index in the sub item delegetes as part of the initialization in the loader
_

---

How can I do it, Could you give me an example ??

Code:

---

Component {
        // main menu delegete
        id: categoryDelegate
        Column {
            Rectangle {
               ...
                MouseArea {                
 
                    onClicked: {
                        console.log(menuModel.get(index))
                    }                   
                }
            }
            Loader {
                id: subItemLoader
 
                // This is a workaround for a bug/feature in the Loader element. If sourceComponent is set to null
                // the Loader element retains the same height it had when sourceComponent was set. Setting visible
                // to false makes the parent Column treat it as if it's height was 0.
                visible: !collapsed
                property variant subItemModel : subItems
                sourceComponent: collapsed ? null : subItemColumnDelegate
                onStatusChanged: if (status == Loader.Ready) item.model = subItemModel
            }
        }
    }
    Component {
        // sub menu delegete
        id: subItemColumnDelegate
        Column {
            property alias model : subItemRepeater.model
            Repeater {
                id: subItemRepeater
                delegate: Rectangle {
                   ...
                    MouseArea {                   
                        onClicked:{
                            if(menuModel.get(index)){
                                switch(index) {
                                case 0:
                                    stack.push(view1)
                                    break;
                                case 1:
                                    stack.push(view2)
                                    break;                
                    }
                }
            }
        }
    }

---

Cheers,

Quote:

---

Originally Posted by RegMe

How can I do it, Could you give me an example ??

---

Your code already has an example of a property in the delegate that is set from the loader, no?
Just that in this case it won't be an alias to a property of a delegate child, but a normal custom property of type int.

Cheers,
_

Hello,

I have an other question :
When I 'open' an element of main menu --> I get list of elements of sub menu
I want when I 'open' an other element of main menu the, 1st must 'close' automatically . see the image : Attachment 11653

Main menu MouseArea:

Code:

---

MouseArea {
                    anchors.fill: parent
                    hoverEnabled: true
 
                    // Toggle the 'collapsed' property
                    onClicked: {
                        fleche.rotation+=180
                        menuModel.setProperty(index, "collapsed", !collapsed)
                    }
                    onEntered: categoryItem.color = "#0d0d0d"
                    onExited: categoryItem.color = base
                }

---

Cheers,

Iterate over the number of main menu items, casll setProperty with value "false" for all but the one that is "index".

Cheers,
_