QT自带的Button无法满足我们的审美,和需求,为此项目开发中经常需要自定义控件,以Button控件为例
联系作者 qq 843230304
效果图(里面的按钮都是Button):还有好多呢,你只需要自定义自己的图片,很美观哦
写控件的时候,注意控件的属性,不要在内部赋值或者修改,要抛出信号供外部处理修改(否则解绑了属性)
使用举例
Button{id:myBtnanchors.verticalCenter: parent.verticalCenteranchors.left: parent.leftanchors.leftMargin: 30pressedSource: 图片按下的效果图资源路径normalSource: 图片正常的效果图资源路径text:qsTr("按钮名称")pixelSize:字体像素textRightImage:true //文本在按钮右侧(内部属性)rightMargin:50//内部属性spacing:40//内部属性horizontalAlignment: Text.AlignRightverticalAlignment: Text.AlignVCenteronClicked: {//}}
附上QML源码
import QtQuick 2.0Item {id:rootproperty string normalSource: ""property string pressedSource: ""property string disableSource: ""property bool selectEnable: falseproperty bool selectAuto: trueproperty bool selected: falseproperty string normalSelectSource: ""property string pressedSelectSource: ""//文本在图片的方位property bool textUnderImage: false //文本在图片下方property bool textOverImage: false //文本在图片上方property bool textLeftImage: false //文本在图片左方property bool textRightImage: false //文本在图片右方property color textNormalColor: "white"property color textPressedColor: "white"property color textNormalSelectColor: "white"property color textPressedSelectColor: "white"property color textDisableColor: "gray"property alias textWidth: buttonText.widthproperty alias textHeight: buttonText.heightproperty alias text: buttonText.textproperty alias elide: buttonText.elideproperty alias horizontalAlignment: buttonText.horizontalAlignmentproperty alias verticalAlignment: buttonText.verticalAlignmentproperty int textHorizontalOffset: 0property int textVerticalOffset: 0property alias pixelSize: buttonText.font.pixelSizeproperty int topMargin: 0property int bottomMargin: 0property int leftMargin: 0property int rightMargin: 0property int spacing: 0signal clickedsignal pressed(real xPosition,real yPosition)signal pressAndHoldsignal released(real xPosition,real yPosition)signal positionChanged(real xPosition,real yPosition)implicitWidth: (textLeftImage || textRightImage) ? (leftMargin + image.width + spacing + buttonText.width + rightMargin) :(leftMargin + image.width + rightMargin)implicitHeight: (textUnderImage || textOverImage) ? (topMargin + image.height + spacing + buttonText.height + bottomMargin) :(topMargin + image.height + bottomMargin)Image{id: imagevisible: truex:textLeftImage ? (leftMargin + buttonText.width + spacing): leftMarginy:textOverImage ? (topMargin + buttonText.height + spacing) : topMargin}Text {id: buttonTextx: textLeftImage ? (leftMargin) :textRightImage ? (leftMargin + image.width + spacing) :(leftMargin + image.width/2-width/2 + textHorizontalOffset)y: textOverImage ? (topMargin) :textUnderImage? (topMargin + image.height + spacing) :(topMargin + image.height/2-height/2 + textVerticalOffset)font.pixelSize: 30}state:"normal"states:[State{name:"normal"PropertyChanges {target:imagesource: normalSource}PropertyChanges {target:buttonText;color:textNormalColor}when:(enabled)&&(!selectEnable || (selectEnable && !selected)) && !imageMouseArea.pressed},State{name:"pressed"PropertyChanges {target:imagesource:pressedSource}PropertyChanges {target:buttonText;color:textPressedColor}when:(enabled)&&(!selectEnable || (selectEnable && !selected)) && imageMouseArea.pressed},State{name:"normalSelect"PropertyChanges {target:image;source: normalSelectSource}PropertyChanges {target:buttonText;color:textNormalSelectColor}when:(enabled)&&(selectEnable && selected) && !imageMouseArea.pressed},State{name:"pressedSelect"PropertyChanges {target:image;source:pressedSelectSource}PropertyChanges {target:buttonText;color:textPressedSelectColor}when:(enabled)&&(selectEnable && selected) && imageMouseArea.pressed},State{name:"disable"PropertyChanges {target:buttonText;color:textDisableColor}PropertyChanges {target:image;source:disableSource}when:!enabled}]MouseArea {id: imageMouseAreaanchors.fill: parentonPressed: {root.pressed(mouse.x,mouse.y);}onReleased: {root.released(mouse.x,mouse.y);if(selectEnable && selectAuto){selected = !selected;}}onPositionChanged:{root.positionChanged(mouse.x,mouse.y);}onClicked: {root.clicked();}onPressAndHold: {root.pressAndHold();}}}