QML的Label实现Tooltip提示效果

来源:互联网 发布:酷士多网络云手机 编辑:程序博客网 时间:2024/05/02 04:29

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

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

import QtQuick 2.5import QtQuick.Window 2.2import QtQuick.Controls 1.4import QtQuick.Controls.Styles 1.4Window {    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()        }    }    */}


1 0
原创粉丝点击