更多资讯、知识,微信公众号搜索:“上官宏竹”。
效果
我们来定义一个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”,获取资源链接。有任何疑问也可以公众号里留言咨询。
更多资讯、知识,微信公众号搜索:“上官宏竹”。