Use MouseArea to change StackLayout Item

Question

How can I use a MouseArea to change the item in a StackLayout?

MouseArea {
           id: mouseAreaServerSetup
           anchors.fill: parent
           onClicked:{
                     // change Iten serverSetupPage
                     }
           }

MouseArea {
           id: mouseAreaClientSetup
           anchors.fill: parent
           onClicked: {
                      // change Iten clientSetupPage
                      }
           }

StackLayout {
             anchors.fill: parent
             currentIndex: menuConfig.currentIndex
             Item {
                  id: serverSetupPage
                  Rectangle {
                            color: "red"
                            }
                  }
             Item {
                  id: clientSetupPage
                  Rectangle {
                            color: "yellow"}
                            }
                   }
             }

The idea is that when you click on a mouseArea you change Tab Item

Thanks

Answer 1

The solution is use a condicional

MouseArea {
  id: mouseAreaServer
  anchors.fill: parent
  hoverEnabled: true
  onClicked: {
   if(stackLayoutMain.currentIndex!=0){
       stackLayoutMain.currentIndex = 0
    }
 }
}

The next MouseArea..

onClicked: {
if(stackLayoutMain.currentIndex!=1){
       stackLayoutMain.currentIndex = 1
  }
}

And the others

onClicked: {
if(stackLayoutMain.currentIndex!=n){
       stackLayoutMain.currentIndex = n
  }
}

Answer 2

You will have to assign the currentIndex from you stackLayout, so I gave it an id. Then each mouse click I increment the currentIndex untill it reaches the number of items (count).

MouseArea {
    id: mouseAreaClientSetup
    anchors.fill: parent
    onClicked: {
        stackLayoutMain.currentIndex = (stackLayoutMain.currentIndex + 1) % stackLayoutMain.count
    }
}

StackLayout {
    id: stackLayoutMain
    anchors.fill: parent
    currentIndex: 0

    Item {
        id: serverSetupPage
        Rectangle {
            anchors.fill: parent
            color: "red"
        }
    }
    Item {
        id: clientSetupPage
        Rectangle {
            anchors.fill: parent
            color: "yellow"}
    }
}

Btw, I made the Rectangles fill their parent (which is the StackLayout) so you will be able to see them actually, they default to a size of (0,0).

I'm not sure why you have put two MouseArea, since the first will be overlapped by the second completely and you will never be able to go to serverSetupPage. This also touches another problem you might get, if you ever grow away from only displaying a red of yellow Rectangle (most probably today ;-) ) and implement another MouseArea, that new one will overlap the one to switch tabs.

So page switching is better done by adding a TabBar with TabButton which will tell what page will be opened. Something like this:

TabBar {
    TabButton {
        text: "server"
        onClicked: stackLayoutMain.currentIndex = 0
    }
    TabButton {
        text: "client"
        onClicked: stackLayoutMain.currentIndex = 1
    }
}