QML中显示工具提示延迟

Question

我正在编写一个程序，其中会有一些按钮和工具提示与它们相连。我希望工具提示在延迟（几秒钟）后消失。我在两个独立的qml文件中制作了自己的按钮和工具提示。工具提示会延迟弹出，但我希望它在一段时间内保持可见，然后开始消失。也许有人做了类似的东西。所以请帮帮我。

Answer 1

IMHO，这可能是实现工具提示组件的一种更干净的方式，尽管它跨越了三个文件。

TooltipCreator.js

var tool = Qt.createComponent("MyTooltip.qml");
var tooltip;
var fadeInDelay;
var fadeOutDelay;
var tip;
function show() {
    tooltip = tool.createObject(mainWindow);
    tooltip.text = tip;
    tooltip.fadeInDelay = fadeInDelay;
    tooltip.fadeOutDelay = fadeOutDelay;
    tooltip.state = "poppedUp";
}
function close() {
    tooltip.state = "poppedDown";
}

工具提示.qml

import QtQuick 1.1
import "TooltipCreator.js" as Tooltip
Rectangle {
    width: 360
    height: 360
    id: mainWindow
    Text {
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 20
        anchors.horizontalCenter: parent.horizontalCenter
        text: "Hover me to bring tooltip!!"
    }
    MouseArea {
        anchors.fill: parent
        hoverEnabled: true
        onEntered: {
            Tooltip.fadeInDelay = 500;
            Tooltip.fadeOutDelay = 700;
            Tooltip.tip = "This is tooltip!";
            Tooltip.show();
        }
        onExited: {
            Tooltip.close();
        }
    }
}

MyToolTip.qml

// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5
import QtQuick 1.1
Rectangle {
    id: tooltip
    width: parent.width - 20
    height: tooltipText.height + 10
    property int fadeInDelay
    property int fadeOutDelay
    property alias text: tooltipText.text
    color: "black"
    radius: 6
    anchors.centerIn: parent
    state: ""
    // The object travels from an empty state(on creation) to 'poppedUp' state and then to 'poppedDown' state
    states: [
        State {
            name: "poppedUp"
            PropertyChanges { target: tooltip; opacity: 1 }
        },
        State {
            name: "poppedDown"
            PropertyChanges { target: tooltip; opacity: 0 }
        }
    ]
    transitions: [
        Transition {
            from: ""
            to: "poppedUp"
            PropertyAnimation { target: tooltip; property: "opacity"; duration: tooltip.fadeInDelay; }
        },
        Transition {
            from: "poppedUp"
            to: "poppedDown"
            PropertyAnimation { target: tooltip; property: "opacity"; duration: tooltip.fadeOutDelay; }
        }
    ]

    Text {
        id: tooltipText
        font.bold: true
        font.pixelSize: 16
        color: "white"
        anchors.centerIn: parent
    }
    onStateChanged: {
        if (tooltip.state == "poppedDown") {
            console.debug("Destroyed!");
            tooltip.destroy(tooltip.fadeOutDelay);
            // If you think that the above line is ugly then, you can destroy the element in onOpacityChanged: if (opacity == 0)
        }
    }
}

Answer 2

我刚刚为我的项目创建了一个简单的工具提示系统。它分为两个文件。工具提示将在延迟后开始淡入，当鼠标离开工具时，提示在延迟后消失。与您的问题最相关的部分在ToolTipArea.qml 中

示例用法：

Rectangle{
    width: 50
    height: 50
    color: "#ffaaaa"
    ToolTipArea{
        text: "I am a tool tip"
        hideDelay: 2000 //2s delay before playing fade animation
    }
}

工具Tip.qml

import QtQuick 2.0
Rectangle {
    id:tooltip
    property alias text: textContainer.text
    property int verticalPadding: 1
    property int horizontalPadding: 5
    width: textContainer.width + horizontalPadding * 2
    height: textContainer.height + verticalPadding * 2
    color: "#aa999999"
    Text {
        anchors.centerIn: parent
        id:textContainer
        text: "Gering geding ding ding!"
    }
    NumberAnimation {
        id: fadein
        target: tooltip
        property: "opacity"
        easing.type: Easing.InOutQuad
        duration: 300
        from: 0
        to: 1
    }
    NumberAnimation {
        id: fadeout
        target: tooltip
        property: "opacity"
        easing.type: Easing.InOutQuad
        from: 1
        to: 0
        onStopped: visible = false;
    }
    visible:false
    onVisibleChanged: if(visible)fadein.start();
    function show(){
        visible = true;
        fadein.start();
    }
    function hide(){
        fadeout.start();
    }
}

ToolTipArea.qml

import QtQuick 2.0
MouseArea {
    property alias tip: tip
    property alias text: tip.text
    property alias hideDelay: hideTimer.interval //this makes it easy to have custom hide delays
                                                 //for different tools
    property alias showDelay: showTimer.interval
    id: mouseArea
    anchors.fill: parent
    hoverEnabled: true
    Timer {
        id:showTimer
        interval: 1000
        running: (mouseArea.containsMouse && !tip.visible)
        onTriggered: tip.show();
    }
    //this is the important part!
    Timer {
        id:hideTimer
        interval: 100 //ms before the tip is hidden
        running: !mouseArea.containsMouse && tip.visible
        onTriggered: tip.hide(); //this is the js code that hides the tip.
                                 //you could also use visible=false; if you
                                 //don't need animations
    }
    ToolTip{
        id:tip
    }
}

我在github上创建了一个小回购：https://github.com/bobbaluba/qmltooltip

Answer 3

我不知道工具提示是如何实现的。如果你在QML代码中静态地创建它们，并且只显示和隐藏，那么像这样的东西可能会做到：

MyToolTip {
    // [...]
    function show() {
        parent.visible = true // show tooltip
        hidingTimer.start()   // start timer when tooltip is shown
    }
    Timer {
        id: hidingTimer
        interval: 5000  // hide after 5s
        onTriggered: {
            parent.visible = false  // make tooltip invisible
            stop()                  // stop timer
        }
    }
}

如果你动态实例化工具提示，你可以这样做：

MyToolTip {
    // [...]
    Timer {  // timer is started when object is created
        interval: 5000; running: true
        onTriggered: {
            parent.destroy()  // automatically destroy tooltip object
        }
    }
}

Answer 4

听起来您可能希望工具提示淡出。在这种情况下，您可能希望参考使用"特性动画"随时间动态调整工具提示的不透明度。就我个人而言，我会在你的工具提示上进行转换，当你的状态变为隐藏时，这些转换会执行动画。然后只需设置要隐藏它们的状态。链接