自定义Qml控件：ImageButton

效果

我们来定义一个ImageButton控件，即Button上增加显示一个Image图片，既有Button的点击事件，也同时增加三种状态：正常状态、悬停状态、按压状态。

效果如下：

正常 <-> 悬停：

按压效果：

实现思路

• 定义一个Rectangle内部包含一个Image，用来显示图片

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

  图片填充整个Rectangle，也可以增加对Rectangle边缘的修饰，这个依个人项目而定。

• 定义一个MouseArea用来接收鼠标事件

  接收：entered、exited、pressed三种事件，在对应的事件中改变Rectangle的state值，从而触发状态转变。

• 定义一个states用来做状态转换时更新图片

  states的具体用法可以参考 Qml类型：State状态 一章。

  在每一个状态中我们需要改变两个东西：一个是Image图片源，另一个是Rectangle的透明度。那么每一个State需要两个PropertyChanges，形式如下：

  State {
  	name: "normal"					// 状态名称
  	PropertyChanges {
  		target: bkImage				// 目标控件ID
  		source: rootRect.normal_url	// 需要改变的目标控件的属性
  	}
  	PropertyChanges{
  		target: rootRect
  		opacity: noramlOpacity
  	}
  }
  

---

完整实现可以微信搜索公众号：“上官宏竹”，或者扫下面的二维码，关注并回复：“ImageButton”，获取资源链接。有任何疑问也可以公众号里留言咨询。