当前位置: 代码迷 >> 综合 >> qml自定义界面定制(二)从左到右,icon加文本按钮
  详细解决方案

qml自定义界面定制(二)从左到右,icon加文本按钮

热度:28   发布时间:2024-01-26 10:16:26.0
/*
从左到右,icon +文字的按钮
*/
import QtQuick 2.0

 
Rectangle {
height: 50;
width: parent.width
signal iconClicked();
signal iconEntered();
signal iconExited();
property alias iconSrc: icon.source
property alias iconText: iconLabel.text
Image {
id: icon
anchors.left: parent.left
anchors.leftMargin: 10
anchors.verticalCenter: parent.verticalCenter
}
Text {
id: iconLabel
color: "#3B3E50"
font.pixelSize: 16
elide: Text.ElideRight
width: parent.width-icon.width +60
anchors.left: icon.right
anchors.leftMargin: 10
anchors.verticalCenter: parent.verticalCenter
}

 
MouseArea {
anchors.fill: parent
hoverEnabled: true
acceptedButtons: Qt.LeftButton
onClicked:{
iconClicked();
}
onEntered: {
iconLabel.color = "#4E84F3"
iconEntered();
}
onExited: {
iconLabel.color = "#3B3E50";
iconExited();
}
}
}

  相关解决方案