在实际需求中,Qt自带的控件显得十分“原始”,因此,想要做出更加好看的样式,常常需要用到自定义控件。下面是一个自定义的带图标的按钮控件,实现方式十分简单。
效果图
环境
ubuntu16.04 + Qt5.7.1
代码部分
这里主要自定义写了一个控件,方便复用。文件IconButton.qml代码如下:
import QtQuick 2.7//不同Qt版本使用的QtQuick版本可能不同,需修改
Rectangle {
//自定义属性
property string btMesg: ""//按钮按下时发出的字符串
property string btText: ""//按钮文字
property color textColor: "#ff000000"
property string pressedTextColor: textColor
property string releaseTextColor: textColor
property real fontSize: 20
property string buttonColor: "#00000000"
property string pressedColor: buttonColor
property string releaseColor: buttonColor
property string btIcon: ""
property string pressedIcon: btIcon
property string releaseIcon: btIcon
property string borderColor: textColor
property string pressdBorderColor: pressedTextColor
property alias wrapMode: textId.wrapMode
property alias elide: textId.elide
width: 80; height: 60
color: mouseArea.pressed?pressedColor:releaseColor
border.width: 0
border.color: mouseArea.pressed?pressdBorderColor:borderColor
focus : true
signal clicked()
signal clickedWithMesg(string mesg)
signal pressed()
signal release()
Image {
id: image
anchors.horizontalCenter: parent.horizontalCenter
anchors.top: parent.top
anchors.topMargin: (parent.height - height - textId.height - 5) / 2
source: mouseArea.pressed?pressedIcon:releaseIcon
}
Text {
id: textId
anchors.top: image.bottom
anchors.horizontalCenter: parent.horizontalCenter
horizontalAlignment: Text.AlignHCenter
wrapMode: Text.WordWrap
width: parent.width
text: btText
color: mouseArea.pressed?pressedTextColor:releaseTextColor
font.pixelSize: fontSize
}
MouseArea{
id : mouseArea
hoverEnabled: true
anchors.fill: parent
onClicked: {
parent.clicked()
parent.clickedWithMesg(btMesg)
}
onPressed: {
parent.pressed(btMesg)
}
onReleased: {
parent.release()
}
}
}
实现其实十分简单明了,即在pressed时改变按钮颜色而released时则恢复按钮颜色,便可以出现点击效果。