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";
}

<强> Tooltip.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
    }
}

ToolTip.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
        }
    }
}

如果您实例化工具提示dynamically，您可以执行以下操作：

MyToolTip {
    // [...]

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

Answer 4

听起来你可能希望工具提示淡出。在这种情况下，您可能希望使用“属性动画”来动态调整工具提示的不透明度。就个人而言，当你的状态变为隐藏状态时，我会用你的工具提示上的转换来执行动画。然后只需设置隐藏状态即可。 link

工具提示的延迟在QML中消失

4 个答案:

示例用法：

ToolTip.qml

ToolTipArea.qml