0

私はいくつかのボタンとそれらに接続されたツールチップがあるプログラムを書いています。ツールチップが少し遅れて (数秒) 消えてほしいです。2 つの別々の qml ファイルで、独自のボタンと独自のツールチップを作成しました。ツールチップは遅れてポップアップしますが、しばらく表示されたままになり、その後消え始めることを望みます。誰かが似たようなものを作ったのかもしれません。助けてください。

4

4 に答える 4

2

IMHO、これはツールチップ コンポーネントを実装するよりクリーンな方法かもしれませんが、3 つのファイルにまたがっています。

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)
        }
    }
}
于 2013-02-15T18:29:58.487 に答える
2

プロジェクト用の簡単なツールチップ システムを作成しました。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

于 2014-02-11T10:54:34.430 に答える
1

ツールチップをフェードアウトさせたいようです。この場合、プロパティアニメーションを使用して、時間の経過とともにツールチップの不透明度を動的に調整することを参照してください。個人的には、状態が非表示に変わったときにアニメーションを実行するツールチップのトランジションを使用してこれを行います。次に、それらを非表示にするときに状態を設定します。リンク

于 2013-02-14T19:34:09.603 に答える
1

ツールチップがどのように実装されているかわかりません。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
        }
    }
}
于 2013-02-14T18:54:01.697 に答える