QML type: state state

Let's write a state converter .

1、 Define a state

The definition of a state can be declared as states: State { ... }, It can also be declared as ：states: [ State { ... } ] Two forms .

Multiple states can be declared in the following form ：

states: [ 
	State { ... },	//  state 1
	State { ... },	//  state 2
	...
]

Declaration of multiple states , In fact, it declares something like an array ,[ and ] Directly put in the array elements , This form can also be used when declaring a state , That is, the array element is a .

2、 Status name

For each state State, We need to give him a unique name （ String type ）.

3、 Bind target

For each state State, You need to define one or more PropertyChanges.

PropertyChanges Need one target, Used to bind a qml object . For example, the following example ：

states: State {
			name: "resized"; when: mouseArea.pressed
			PropertyChanges { 
				target: rect; 
				color: "blue"; 
				height: container.height 
			}
		}

Aforementioned color、height Are all rect Properties of （rect It's a Rectangle Type of id）.

When switching to the current state , Will trigger PropertyChanges Of the target control in color、height The change of （ Color turns blue 、 The height becomes consistent with the height of the container ）.

4、 Trigger state change

There are two ways to trigger a state change ：

• One is ： stay State One of them when, The current state is triggered when this event occurs . As mentioned above when: mouseArea.pressed, Trigger when clicking and pressing .

• The other is ： Active change in definition states Of controls state attribute , This attribute in Item In the definition of , So as long as the control type inherits from Item All of them have this attribute .

  This is the way . stay onExited、onPressed Take the initiative to change rootRect.state Value , Trigger the switching of the state , And then change rootRect Of opacity attribute .

  Rectangle{
      id: rootRect
      color: "transparent"
      state: "normal"
      MouseArea {
          onExited: {
              rootRect.state = "normal"
          }
          onPressed: {
              rootRect.state = "pressed"
          }
      }
      states: [
          State {
              name: "normal"
              PropertyChanges{ target: rootRect; opacity: 0.6 }
          },
          State {
              name: "pressed"
              PropertyChanges{ target: rootRect; opacity: 1 }
          }
      ]
  }
  

---

The complete implementation can search official account through wechat ：“ Shangguan Hongzhu ”, Or scan the QR code below , Pay attention to and reply to ：“State”, Get resource links . If you have any questions, you can also leave a message in official account .