QML切換PropertyChanges onclick

我嘗試用切換功能切換我的導航。我想改變「x」的位置。QML切換PropertyChanges onclick

所以這裏是我到目前爲止。但不行。我嘗試使用切換功能來點擊點擊狀態。我設置了兩個不同的狀態，一個是導航可見，另一個是隱藏導航。

我得到這個錯誤「的ReferenceError：切換沒有定義」

Item { 
    id: toggleswitch 
    width: 200 
    height: 200 

    property bool on: false 

    function toggle() { 
     if (toggleswitch.state == "on") 
      toggleswitch.state = "off"; 
     else 
      toggleswitch.state = "on"; 
    } 

    Rectangle { 
     id: open 
     width: parent.width 
     height: 35 
     color: "#33000000" 

     Text { 
      anchors.centerIn: parent 
      text: "open" 
      color: "white" 
      font.family: "Helvetica" 
      font.pixelSize: 25 
     } 

     MouseArea { anchors.fill: parent; onClicked: toggle() } 
    } 


    states: [ 
     State { 
      name: "on" 
      PropertyChanges { target: navigation; x: 0 } 
      PropertyChanges { target: toggleswitch; on: true } 
     }, 
     State { 
      name: "off" 
      PropertyChanges { target: navigation; x: -300 } 
      PropertyChanges { target: toggleswitch; on: false } 
     } 
    ] 
}

來源

2014-10-19 Matthias

什麼'這裏navigation'？ – folibis 2014-10-19 21:53:44

導航是一個矩形。我想製作像這樣的http://api.jquery.com/slidetoggle/。矩形滑入和滑出。 – Matthias 2014-10-20 08:44:50

一些小滑塊例如：

import QtQuick 2.2 

Rectangle { 
    width: 360 
    height: 360 

    Rectangle { 
     anchors { 
      left: parent.left 
      top: parent.top 
      bottom: parent.bottom 
     } 
     id: slider 
     state: "close" 
     states: [ 
      State { 
       name: "close" 
       PropertyChanges { 
        target: slider 
        width: 50 
       } 
      }, 
      State { 
       name: "open" 
       PropertyChanges { 
        target: slider 
        width: 360 
       } 
      } 
     ] 
     transitions: [ 
      Transition { 

       NumberAnimation { 
        target: slider 
        property: "width" 
        duration: 500 
        easing.type: Easing.InOutBack 
       } 
      } 
     ] 

     color: "green" 
    } 

    MouseArea { 
     anchors.fill: parent 
     onClicked: { 
      if (slider.state == "close") 
       slider.state = "open"; 
      else 
       slider.state = "close"; 
     } 
    } 
}

轉變是可選這裏

來源

2014-10-20 10:31:34 folibis

您可以到QML說哪個對象是你的功能。

Item { 
id: toggleswitch 
width: 200 
height: 200 
state: "off"  //INIT YOUR STATE !! 
property bool on: false 

function toggle() { 
    if (toggleswitch.state == "on") 
     toggleswitch.state = "off"; 
    else 
     toggleswitch.state = "on"; 
} 

Rectangle { 
    id: open 
    width: parent.width 
    height: 35 
    color: "#33000000" 

    Text { 
     anchors.centerIn: parent 
     text: "open" 
     color: "white" 
     font.family: "Helvetica" 
     font.pixelSize: 25 
    } 

    MouseArea { anchors.fill: parent; onClicked: toggleswitch.toggle() } //here 
} 


states: [ 
    State { 
     name: "on" 
     PropertyChanges { target: navigation; x: 0 } 
     PropertyChanges { target: toggleswitch; on: true } 
    }, 
    State { 
     name: "off" 
     PropertyChanges { target: navigation; x: -300 } 
     PropertyChanges { target: toggleswitch; on: false } 
    } 
]

來源

2014-10-20 12:27:00 yekmen

我會在這裏做不直接操縱的狀態，但對房地產直接切換，和各州綁定到該屬性是什麼。

對我來說，它感覺更具可讀性，語義和減少對象與其視覺狀態之間的耦合。

這也有狀態總是與on屬性相一致，並提供更好的抽象。使用此組件時，可以以編程方式自由更改on屬性，並且組件顯示將相應更新。

這就是我可能會結了：

Item { 
id: toggleswitch 
width: 200 
height: 200 
property bool on: false 

function toggle() { 
    on = !on //simpler toggle function 
} 

Rectangle { 
    id: open 
    width: parent.width 
    height: 35 
    color: "#33000000" 

    Text { 
     anchors.centerIn: parent 
     text: "open" 
     color: "white" 
     font.family: "Helvetica" 
     font.pixelSize: 25 
    } 

    MouseArea { anchors.fill: parent; onClicked: toggleswitch.toggle() } 
} 


states: [ 
    State { 
     name: "on" 
     when: toggleswith.on 
     PropertyChanges { target: navigation; x: 0 } 
    }, 
    State { 
     name: "off" 
     when: !toggleswith.on 
     PropertyChanges { target: navigation; x: -300 } 
    } 
]

來源

2014-10-21 15:24:20 GrecKo

QML切換PropertyChanges onclick

回答

相關問題