Qml中ToolTip的創建

在使用qml做程序時，因爲需要toolTip，但是QtQuick除了最初的版本的所有組件都有這個元素之外，之後的版本將之刪除了，於是我們只能自己來寫toolTip，經過查找，筆者最終在Qt官網上找到了解決方法，以下分享給大家

第一種方法跟標準的toolTip很接近，其作者是Xander84。這種實現方式將toolTip的浮現和隱藏都有各自的函數實現，並且當其隱藏後可以將之註銷，代碼如下

import QtQuick 2.2

Rectangle {
 id: tooltip

property alias text: tooltipText.text
 property alias textItem: tooltipText
 property int fadeInDelay: 500
 property int fadeOutDelay: 500
 property bool autoHide: true
 property alias autoHideDelay: hideTimer.interval
 property bool destroyOnHide: true

function show() {
 state = "showing"
 if (hideTimer.running) {
 hideTimer.restart()
 }
 }

function hide() {
 if (hideTimer.running) {
 hideTimer.stop()
 }
 state = "hidden"
 }

width: tooltipText.width + 20
 height: tooltipText.height + 10
 color: "#dd000000"
 radius: 6
 opacity: 0

Text {
 id: tooltipText
 anchors.centerIn: parent
 horizontalAlignment: Text.AlignHCenter
 color: "white"
 font.pointSize: 10
 font.bold: true
 }

MouseArea {
 anchors.fill: parent
 onClicked: hide()
 }

Timer {
 id: hideTimer
 interval: 5000
 onTriggered: hide()
 }

states: [
 State {
 name: "showing"
 PropertyChanges { target: tooltip; opacity: 1 }
 onCompleted: {
 if (autoHide) {
 hideTimer.start()
 }
 }
 },
 State {
 name: "hidden"
 PropertyChanges { target: tooltip; opacity: 0 }
 onCompleted: {
 if (destroyOnHide) {
 tooltip.destroy()
 }
 }
 }
 ]

transitions: [
 Transition {
 to: "showing"
 NumberAnimation { target: tooltip; property: "opacity"; duration: fadeInDelay }
 },
 Transition {
 to: "hidden"
 NumberAnimation { target: tooltip; property: "opacity"; duration: fadeOutDelay }
 }
 ]
}

當然我們還需要相應的JavaScript方法來使toolTip的創建更容易點

var component = Qt.createComponent("Tooltip.qml");

function create(text, parent, properties) {
 if (typeof properties = "undefined") {
        properties = {
            anchors: {
                horizontalCenter: parent.horizontalCenter,
                bottom: parent.bottom,
                bottomMargin: parent.height / 8
            }
        };
    }
    properties.text = text;
    var tooltip = component.createObject(parent, properties);
    if (tooltip = null) {
 console.error("error creating tooltip: " + component.errorString());
 } else if (properties.anchors) {
 // manual anchor mapping necessary
 for (var anchor in properties.anchors) {
 tooltip.anchors[anchor] = properties.anchors[anchor];
 }
 }
 return tooltip;
}

在使用的時候，只需如下導入JavaScript文件並調用創建函數即可

import "TooltipCreator.js" as TooltipCreator
‌
TooltipCreator.create("text on the tooltip", parentItem).show()

默認情況下，toolTip將在5秒後隱藏，如果想要讓他早點隱藏，只需點擊他就可以了
在create函數中第三個參數可以用來指定toolTip的一些屬性，例如

TooltipCreator.create("absolute positioned tooltip"), rootItem, { x: 100, y: 50 }).show()

當然你也可以直接在對象外指定

var tooltip = TooltipCreator.create(qsTr("Network Error!check your network connection\nor try again later."), mainView)
tooltip.color = "#ddff0000"
tooltip.textItem.color = "white"
tooltip.show()

第二種方法就好像在鼠標停留的地方展示一個標籤，作者是shav，與第一種方法相比，這種方法可以自定義的屬性較少，但亮點是，toolTip可以跟蹤鼠標移動，代碼如下

import QtQuick 2.0
import QtQuick.Controls 1.1
import QtGraphicalEffects 1.0

Item {
 id: toolTipRoot
 width: toolTip.contentWidth
 height: toolTipContainer.height
 visible: false
 clip: false
 z: 999999999

property alias text: toolTip.text
 property alias radius: content.radius
 property alias backgroundColor: content.color
 property alias textColor: toolTip.color
 property alias font: toolTip.font
 property var target: null

function onMouseHover(x, y)
 {
 var obj = toolTipRoot.target.mapToItem(toolTipRoot.parent, x, y);
 toolTipRoot.x = obj.x;
 toolTipRoot.y = obj.y + 5;
 }

function onVisibleStatus(flag)
 {
 toolTipRoot.visible = flag;
 }

Component.onCompleted: {
 var itemParent = toolTipRoot.target;

var newObject = Qt.createQmlObject('import QtQuick 2.0; MouseArea {signal mouserHover(int x, int y); signal showChanged(bool flag); anchors.fill:parent; hoverEnabled: true; onPositionChanged: {mouserHover(mouseX, mouseY)} onEntered: {showChanged(true)} onExited:{showChanged(false)} onClicked:{parent.focus = true}}',
 itemParent, "mouseItem");
 newObject.mouserHover.connect(onMouseHover);
 newObject.showChanged.connect(onVisibleStatus);
 }

Item {
 id: toolTipContainer
 z: toolTipRoot.z + 1
 width: content.width + (2*toolTipShadow.radius)
 height: content.height + (2*toolTipShadow.radius)

Rectangle {
 id: content
 anchors.centerIn: parent
 width: toolTipRoot.width
 height: toolTip.contentHeight + 10
 radius: 3

Text {
 id: toolTip
 anchors {fill: parent; margins: 5}
 wrapMode: Text.WrapAnywhere
 }
 }
 }

DropShadow {
 id: toolTipShadow
 z: toolTipRoot.z + 1
 anchors.fill: source
 cached: true
 horizontalOffset: 4
 verticalOffset: 4
 radius: 8.0
 samples: 16
 color: "#80000000"
 smooth: true
 source: toolTipContainer
 }

Behavior on visible { NumberAnimation { duration: 200 }}
}

使用方法比較簡單，只要在你想要展示toolTip的組件裏創建一個名爲ToolTip的組件即可，如下

ToolTip {
 id: tooltip1
 width: 200
 target: id_of_component
 text: "Enter the text here."
 }

原文鏈接http://wiki.qt.io/QtQuick_ToolTip_Component