700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > QML自定义控件Button

QML自定义控件Button

时间:2020-09-06 00:53:32

相关推荐

QML自定义控件Button

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();}}}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。