Custom QML control: imagebutton

effect

Let's define a ImageButton Control , namely Button Add a Image picture , both Button Click events for , At the same time, three states are added ： The normal state 、 Hover state 、 Press state .

The effect is as follows ：

normal <-> hover ：

Pressing effect ：

Realize the idea

• Define a Rectangle Inside contains a Image, Used to show pictures

  Rectangle{
      Image {
          id:bk_image
          anchors.fill: parent
      }
  }
  

  The picture fills the whole Rectangle, You can also add a pair of Rectangle Decoration of edges , This depends on the individual project .

• Define a MouseArea Used to receive mouse events

  receive ：entered、exited、pressed Three events , Change in the corresponding event Rectangle Of state value , This triggers a state transition .

• Define a states It is used to update pictures during state transition

  states For specific usage, please refer to Qml type ：State state chapter .

  In each state, we need to change two things ： One is Image Picture source , The other is Rectangle Transparency . So each of these State You need two PropertyChanges, Form the following ：

  State {
  	name: "normal"					//  Status name 
  	PropertyChanges {
  		target: bkImage				//  Target control ID
  		source: rootRect.normal_url	//  The properties of the target control that need to be changed 
  	}
  	PropertyChanges{
  		target: rootRect
  		opacity: noramlOpacity
  	}
  }
  

---

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