QML切换PropertyChanges onclick

Posted 2021-04-11

我尝试使用切换功能切换导航。我想改变“x”的位置。

所以这就是我到目前为止所得到的。但是不要工作。我尝试使用切换功能来点击状态。我设置两个不同的状态，导航是可见的，一个是隐藏导航。

我收到此错误“ReferenceError：toggle未定义”

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

答案

一些小滑块示例：

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

转换在这里是可选的

另一答案

您可以对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 }
    }
]

另一答案

我在这里做的不是直接操纵状态，而是直接切换属性，并将状态绑定到该属性。

对我而言，它感觉更具可读性和语义，并减少了对象与其视觉状态之间的耦合。

这也具有使状态始终与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 }
    }
]