ImageButton
1、QML 自定义控件的封装
方便自己重用一些组合控件，比如Button和image的组合，虽然Button也支持通过设置iconSource去加载图标，但是有些东西不够满足自己的需求，所以学会封装QML控件就是非常重要的。
import QtQuick 2.15
import QtQuick.Controls 2.15
Item {
id: item1
property alias imageProperty: image_Rect
property alias imageBasic: id_image
property real scale: 1.0 // 图片的缩放比例
property int imageWidth: 32 // 图片宽度
property int imageHeight: 32 // 图片高度
property string imageSource: "" // 图片资源
property int radiusSize: 5 // 圆角值
signal clicked // 点击信号
signal pressed // 按下信号
signal released // 松开信号
Rectangle {
id: image_Rect
width: item1.imageWidth
height: item1.imageHeight
radius: item1.radiusSize
border.width: 1
border.color: "gray"
/*
Image.Stretch: 将图像拉伸以填充可用空间，不保持纵横比
Image.PreserveAspectFit: 保持图像的纵横比，将图像缩放到适合可用空间内的最大尺寸
Image.PreserveAspectCrop: 保持图像的纵横比，将图像缩放到填充可用空间的最小尺寸，并裁剪超出可用区域的部分
Image.Tile: 将图像平铺以填充可用空间，不进行缩放
Image.TileVertically: 将图像垂直平铺以填充可用空间，不进行缩放
Image.TileHorizontally: 将图像水平平铺以填充可用空间，不进行缩放
*/
Image {
id: id_image
source: item1.imageSource
fillMode: Image.PreserveAspectFit
smooth: true // 使用平滑插值显示图像
asynchronous: true // 异步加载图像，不阻塞QML引擎执行其他任务
transform: Scale {
xScale: image_Rect.scale
yScale: image_Rect.scale
}
Behavior on scale {
PropertyAnimation {
duration: 200 // 动画持续时间(ms)
easing.type: Easing.InOutQuad // 插值器类型
}
}
}
MouseArea {
id: mouseArea
anchors.fill: image_Rect
// 发射信号,外部实现具体需求
onClicked: item1.clicked()
onPressed: {
item1.pressed()
image_Rect.scale = 0.95
}
onReleased: {
item1.released()
image_Rect.scale = 1.0
}
}
}
}
在上面定义了三个信号：clicked、pressed、released主要是用于，自定义控件里面不知道外部触发onClicked、onPressed、onReleased是具体应该做什么事情，所以，建立信号槽，在外部使用function自己实现。
增加缩放比例和过渡动画，使在效果的呈现上模仿Button的电机、释放、按下等操作效果。
2.QML自定义控件的使用
关于使用封装的ImageButton时，并不需要import “ImageButton”,如果你的叠层比较多，比如自定义放在了其他文件夹下面，应该就需要import "./具体的文件夹/ImageButton"此形式。
#import QtQuick 2.15
#import QtQuick.Controls 2.15
#import QtQuick.Window 2.15
Window {
id: root
width: 640
height: 480
title: qsTr("主界面测试")
function testClicked() {
console.log("clicked 信号被触发");
}
// TODO: 其他信号使用方法一样
Rectangle {
width: root.width
height: root.height
ImageButton {
id: imageButton
anchors {
top: parent.top
topMargin: 10
left: parent.left
leftMargin: 10
}
imageSource: "qrc:/pic/testImage.png"
onclicked: {
// 这里其实就是里面的on+信号名(具体根据命名而定),注意，信号名首字母大写
root.testClicked();
}
}
}
}