使用 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"}
                            }
                   }
             }

这个想法是，当您单击鼠标区域时，您会更改选项卡项

谢谢

Answer 1

解决办法是使用条件式

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

Answer 2

你必须从你的 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，那么新的将与切换选项卡的重叠。

所以页面切换最好通过添加TabBar 和TabButton 来完成，这将告诉您将打开哪个页面。像这样的：

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