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

score 0 · Answer 1 · answered Aug 27 '19 at 09:24

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
    }
}

Thanks, Your idea works, but it's only one button to change Item to item. Is there any way to associate MouseArea 1 to Item 1 and MouseArea 2 to item 2 ?? — jiflorido, Aug 27 '19 at 09:45
Please understand that a `MouseArea` is not a visual thing and you have anchored them to fill there parent, which makes MouseArea 1 overlap MouseArea 2, which by extension then doesn't work anymore. Have a look at the TabBar solution I gave — Amfasis, Aug 27 '19 at 09:50
Amdasis, Thanks, I have associated the mouseArea to an image. Image { source: "images/MediaDestSetup_off.svg" width: 290 height: 50 Text { id: nameMediaDestinationText color: "#b5d1db" text: qsTr("MEDIA DESTINATION") font.pointSize: 10 } MouseArea { id: mouseAreaMediaDestination anchors.fill: parent onClicked: { } } — jiflorido, Aug 27 '19 at 09:53
ok, that's fine as well, tip for next time: include such detail in the question. The way the question is now, makes it seem you don't understand the anchor — Amfasis, Aug 27 '19 at 11:08

score 0 · Answer 2 · answered Aug 27 '19 at 10:57

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
  }
}

Use MouseArea to change StackLayout Item

2 Answers2