Используйте MouseArea для изменения элемента StackLayout

Как я могу использовать 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, вы меняете Tab Item

Спасибо


qml stacklayout mousearea
person jiflorido    schedule 27.08.2019    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Вам нужно будет назначить currentIndex из вашего stackLayout, поэтому я дал ему 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
    }
}
person Amfasis    schedule 27.08.2019
comment
Спасибо, ваша идея работает, но это всего лишь одна кнопка, чтобы изменить элемент на элемент. Есть ли способ связать MouseArea 1 с элементом 1 и MouseArea 2 с элементом 2?? - person jiflorido; 27.08.2019
comment
Пожалуйста, поймите, что MouseArea не является визуальной вещью, и вы привязали их, чтобы заполнить родительский объект, что делает MouseArea 1 перекрывающим MouseArea 2, который, соответственно, больше не работает. Взгляните на решение TabBar, которое я дал - person Amfasis; 27.08.2019
comment
Amdasis, Спасибо, я связал область мыши с изображением. Изображение { источник: images/MediaDestSetup_off.svg ширина: 290 высота: 50 текст { id: nameMediaDestinationText цвет: #b5d1db текст: qsTr(MEDIA DESTINATION) font.pointSize: 10 } MouseArea { id: mouseAreaMediaDestination anchors.fill: parent onClicked: { } } - person jiflorido; 27.08.2019
comment
хорошо, это тоже хорошо, совет на следующий раз: включите такую ​​​​деталь в вопрос. То, как сейчас поставлен вопрос, создает впечатление, что вы не понимаете якорь - person Amfasis; 27.08.2019

arrow_upward
0
arrow_downward

Решение заключается в использовании условного

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
  }
}
person jiflorido    schedule 27.08.2019