States and transitions in Qt Quick

Traditional GUI programming often involves easy-to-write but boilerplate state machines for controls to track control and application states. For example, a button might have several states: when the mouse hovers over it, when it's pressed, and then once pressed, a separate state for on or off in the case of a checkbox or a push button. While this code isn't hard to write, it does involve some writing, and more sophisticated interfaces require more of it.

Qt Quick provides an abstraction for this through its State construct, which groups a state's name as well as the condition under which it occurs, and which properties of an object should take on new values. We first saw this in Chapter 3, Designing Your Application with Qt Designer, when we wrote our own button component, reprinted here:

import QtQuick 2.3

Rectangle {
  id: button

  width: 64
  height: 64

  property alias operation: buttonText.text
  signal clicked

  color: "green"

  Rectangle {
 ...