A Toggle Button with States


The difference between a button and a toggle button in general is the toggle button has states: “on” and “off”. This states allows the toggle button to remember it’s current state and influence the appearance when a state changes.

For this toggle button we use the QML States and define an “on” and “off” state. When the state changes, the color of the button changes.

The state change is triggered by a MouseRegion click handler. The handler calls an inline JavaScript function toggle() on the container, which evaluates the current state and set’s the new state.

import Qt 4.6

Rectangle {
    width: 200; height: 200
    Rectangle {
        id: container; width: 96; height: 48; anchors.centerIn: parent
        function toggle() {
            if (state=="on") {state = "off"} else { state ="on"}
        }
        state: "on"
        states: [
            State {
                name: "on";
                PropertyChanges{ target: container; color: "green" }
            },
            State {
                name: "off";
                PropertyChanges{ target: container; color: "red" }
            }
        ]
        MouseRegion { id: region; anchors.fill: parent; onClicked: container.toggle() }
    }
}

Pretty simple or?

Let’s make the code more compact:

import Qt 4.6

Rectangle {
    width: 200; height: 200
    Rectangle {
        id: container; width: 96; height: 48; anchors.centerIn: parent
        function toggle() {
            state = state=="off" ? "" : "off"
        }
        color: "green"
        states: [
            State {
                name: "off";
                PropertyChanges{ target: container; color: "red" }
            }
        ]
        MouseRegion { id: region; anchors.fill: parent; onClicked: container.toggle() }
    }
}

We use the default state here as the “on” state and only declare the “off” state. We could better name it “toggled” now.

Also we use the ternary operator condition ? true-statement : false-statement.

Some lines saved, yeah! Sure line saving should not-affect readability. This button still needs to propagate the state change to the outside world, otherwise it’s quit useless. Let’s see.

import Qt 4.6

Rectangle {
    width: 200; height: 200
    Rectangle {
        id: container; width: 96; height: 48; anchors.centerIn: parent
        function toggle() {
            if(state == "on") { state = "off" } else { state = "on" }
        }
        property bool on: false // variable for outside world
        state: "on"
        states: [
            State { 
                name: "on"; 
                PropertyChanges{ target: container; color: "green" }
                PropertyChanges{ on: true } // change on variable
            },
            State { 
                name: "off"; 
                PropertyChanges{ target: container; color: "red" }
                PropertyChanges{ on: false } // change on variable
            }
        ]
        MouseRegion { id: region; anchors.fill: parent; onClicked: container.toggle() }
        // some fanciness
        color: Behavior { ColorAnimation { duration: 500 } }
    }
}

We added the bool property on to the toggle-button. The property is changed, during state changes. Additional we could also add a signal with a bool parameter, which can get emitted when the state changes.

I added some fanciness a the bottom. First a behavior for the color. Means any change on this color is effected by this.

Instead of a Behavior you could also use a Transition:

        transitions: Transition {
            ColorAnimation { easing: "easeInOutQuad"; duration: 500 }
        }

The transition in this form influences each state change.

1 thought on “A Toggle Button with States”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s