2014-02-13 28 views
1

我正在研究一個QML應用程序,它本質上是一個帶有一組按鈕的工具欄。當我將鼠標懸停在按鈕上時,我想顯示工具提示。但是現在,除了調用它的那個按鈕之外,每個按鈕都在繪製工具提示。這裏有一個最基本的例子說明了什麼問題QML。將工具提示放置在其他元素上的問題

Button.qml

import QtQuick 1.1 

Rectangle 
{ 
    property color buttonColor: "red" 
    property color onHoverColor: "green" 
    property color borderColor: "blue" 


    property bool needTooltip: buttonMouseArea.containsMouse 

    id: button 
    width: 65 
    height: 82 

    radius: 1 
    color: buttonColor 

    signal buttonPressed() 

    MouseArea{ 
     id: buttonMouseArea 
     anchors.fill: parent  
     onClicked: buttonPressed() 
     onPressed: button.color = borderColor 
     onReleased: button.color = onHoverColor 
     hoverEnabled: true 

     onEntered: button.color = onHoverColor 
     onExited: button.color = buttonColor 
    } 

    Rectangle { 
     id: tooltip 
     width: 75; height: 20 
     z: parent.z +10 
     visible: false 
     color: "peachpuff" 
     Text { 
      anchors.centerIn: parent 
      text: "My Tooltip" 
     } 

     states: State { 
      name: "inuse" 
      when: needTooltip 
      PropertyChanges { 
       target: tooltip 
       visible: true 
       x: buttonMouseArea.mouseX + 5 
       y: buttonMouseArea.mouseY - 25 
      } 
     } 
    } 
} 

main.qml

import QtQuick 1.1 

Rectangle { 
    width: 1500 
    height: 200 

    Row 
    { 
     height: 80 

     anchors.centerIn: parent 
     spacing: 30 

     Button{ 
      id: settingsButton; 
     } 
     Button{ 
      id: listButton; 
     } 
     Button{ 
      id: someOtherButton 
     } 

    } 
} 

我怎樣才能讓提示顯示在上面一切我程序?與按鈕的和工具提示的z軸搞亂沒有工作

回答

1

你需要拉工具提示Button.qml組件之外,或者寫一個黑客工具,將它屬於QDeclarativeScene拆卸工具提示QDeclarativeItem到駐留在QDeclarativeScene一個彈出框(一個QDeclarativeView - 即具有適當屬性的QWidget)。

+0

該解決方案看起來很不雅,但我會嘗試。是否有可能避免使用額外的QWidgets,只是將工具提示移動到單獨的.qml中(因爲我無法看清楚它是如何完成的)乍看之下 – WereWind

+0

單獨的'qml' =單獨的組件。重要的是在'Button's之前和之前在同一個組件中實例化的項目'Tooltip'。你需要提供帶有id的'Button's,這樣他們纔會知道要做什麼。移動是可能的,儘管沒有必要。 – user1095108

+0

它的工作原理!謝謝! – WereWind