1. Encapsulation of QML custom controls
It is convenient for you to reuse some combined controls, such as the combination of Button and image. Although Button also supports loading icons by setting iconSource, some things are not enough to meet your needs, so it is very important to learn to encapsulate QML controls.
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
}
}
}
}
Three signals are defined above: clicked, pressed, and released, which are mainly used for custom controls that do not know external triggersonClicked, onPressed , onReleased is what should be done specifically, so create a signal slot and use function externally to implement it yourself.
Increase the scaling ratio and transition animation to imitate Button's motor, release, press and other operational effects in the presentation of effects.
2. Use of QML custom controls
When using the encapsulated ImageButton, you do not need to import "ImageButton". If you have many overlays, such as customization placed under other folders, you should import "./specific folder/ImageButton". form.
#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();
}
}
}
}