QML的Label实现Tooltip提示效果

在用QML进行界面设计时，往往需要用到Label，但是由于界面宽度的限制，Label会显示不全，需要进行Tooltip进行提示，而QML中的Label本身还不支持Tooltip的提示功能，所以给开发带来了一定的困难，那么，遇到这种问题，该怎样解决呢？

我们可以换种思路，由于QML中的Button本身是可以支持Tooltip的，我们可以用Button对Label进行重写，然后保存为Label.qml文件，在用Label的室友进行import,这样就可在自己的项目中用到有Tooltip提示的Label了，下面是对Button进行重写实现Label的Tooltip提示鲜果：

import QtQuick 2.5
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4

Window {
id: win
width: 300
height: 300

property string btnName: "中华人民共和国万岁中华人民共和国万岁"

Button {
id: btn
anchors {
centerIn: parent
topMargin: 5
}
width: 100
height:22
tooltip: btnName
text: btnName
//onClicked: Qt.quit()

style: ButtonStyle {
background: Rectangle {
color: "red"
border.width: 0
}
label: Rectangle {
width: 100
height: 22
color: "transparent"

Label {
text: btnName

//  设置Label居中显示在Rectangle里面
anchors.centerIn: parent
width: 100
height: 12

//  超出宽度后从右边显示"..."
elide:Text.ElideRight
wrapMode:Text.Wrap
}
}
}
}

/* 以下为原生态的Button
Rectangle {
id: btn_rect
width: parent.width
height: 20
anchors.top: btn.bottom
anchors.topMargin: 10
color: "red"

//让button居中显示，外层要加Rectangle进行限制
Button {
id: btn_t
text: btnName

anchors.centerIn: parent
// width: 100  //Button设置宽度，超出后将自动截断
height: 20
tooltip: text
onClicked: Qt.quit()
}
}
*/
}