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

回答

相关问题