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()
        }
    }
    */
}