使用MouseArea更改StackLayout项目

Question

如何使用MouseArea更改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"}
                            }
                   }
             }

其思想是，当您单击某个mouseArea时，您可以更改选项卡项

谢谢

Answer 1

您必须从您的stackLayout分配currentIndex，所以我给它分配了一个id。然后，每次单击鼠标时，我都会递增currentIndex，直到它达到项目数(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"}
    }
}

顺便说一下，我让矩形填充它们的父元素(也就是StackLayout)，这样你就可以看到它们了，它们的默认大小是(0,0)。

我不知道你为什么要放两个MouseArea，因为第一个会被第二个完全重叠，你将永远无法进入serverSetupPage。这也涉及到您可能遇到的另一个问题，如果您不再只显示红色的黄色Rectangle (很可能是今天的;-)，而是实现了另一个MouseArea，那么这个新的and将会与切换标签的and重叠。

因此，通过添加一个带有TabButton的TabBar可以更好地完成页面切换，它将告诉您将打开哪个页面。如下所示：

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

Answer 2

解决方案是使用条件

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

下一个MouseArea..

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

其他人呢？

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