QML中工具提示的延迟消失

Posted 2023-02-16

【中文标题】QML中工具提示的延迟消失

【英文标题】：Delay of tooltip dissapear in QML

【发布时间】：2013-02-14 12:15:55

【问题描述】：

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

【参考方案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)
        
    

【参考方案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

【参考方案3】：

我不知道您的工具提示是如何实现的。如果您在 QML 代码中静态地创建它们并且只是 show 和 hide 它们，这样的事情可能会这样做：

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
        
    

【参考方案4】：

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