qt - QML 中工具提示消失的延迟

Question

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

Answer 1

恕我直言，这可能是实现工具提示组件的一种更简洁的方法，尽管它跨越三个文件。

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();
        }
    }
}

我的工具提示.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
    }
}

工具提示.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();
    }
}

工具提示区域.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

听起来您可能希望工具提示淡出。在这种情况下，您可能需要参考使用属性动画随时间动态调整工具提示的不透明度。就我个人而言，我会在您的状态更改为隐藏时执行动画的工具提示上的转换来做到这一点。然后只需在您希望它们被隐藏时设置状态。关联

Answer 4

我不知道您的工具提示是如何实现的。如果您在 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
        }
    }
}