如何自動隱藏應用程序菜單欄？

Question

我想有一個ApplicationWindow有一個自動隱藏menuBar，當鼠標光標位於窗口的最上部分時顯示。這在QML中可能嗎？ PS：我正在使用Qt 5.3。

在此先感謝。

Answer 1

您可以利用內部屬性，即以「__」開頭的屬性。由於它們是內部的，即使IMO在這種情況下不太可能發生，在未來的版本中功能也可能會中斷。

通過使用內部屬性，您可以利用__contentItem（MenuBar的圖形容器）並對其屬性進行動畫處理以實現所需的結果。這是一種可能的方法;它使用Qt 5.3/QT 5.4工作/ Qt的5.5（不包括我可以在測試它）：

ApplicationWindow { 
    id: app 
    visible: true 
    width: 400 
    height: 300 

    property real hideValue: 0 
    Behavior on hideValue { 
     NumberAnimation {duration: 200} 
    } 

    menuBar: MenuBar { 
     id: menu 
     //__contentItem.scale: value      // (1) 
     //__contentItem.opacity: hideValue     // (2) 
     __contentItem.transform: Scale {yScale: hideValue} // (3) 

     Menu { 
      id: m1 
      title: "File" 
      MenuItem { text: "Open..." 
       onTriggered: { 
        hideValue = 0       // hide the bar 
       } 
      } 
      MenuItem { text: "Close" 
       onTriggered: { 
        hideValue = 0       // hide the bar 
       } 
      } 
     } 
    } 


    Button{ 
     id: b1 
     anchors.centerIn: parent 
     text: "CLICK ME!" 
     width: 100 
     height: 100 
    } 

    MouseArea { 
     id: ma1 
     anchors.top: parent.top 
     anchors.left: parent.left 
     anchors.right: parent.right 
     height: menu.__contentItem.implicitHeight 
     hoverEnabled: true 

     onEntered: { 
      hideValue = 1       // show the bar 
     } 
    } 

    MouseArea { 
     id: ma2 
     anchors.fill: parent 
     hoverEnabled: true 
     z: -1 

     onEntered: { 
      m1.__dismissMenu() 
      hideValue = 0       // hide the bar 
     } 
    } 
} 

總結代碼：

• 兩個MouseArea定義爲：ma1覆蓋MenuBar和ma2填寫ApplicationWindow。後者有一個z負面定位根據該窗口的任何其他元素，包括ma1：這種方式，它不能干涉與添加任何元素相關的事件（例如示例按鈕b1）。
• ma1設置一個屬性，稱爲hideValue到1而ma2將它帶回0。該物業用於__contentItem（參見代碼中的(1),(2)和(3)）的視覺財產以隱藏/顯示MenuBar。通過hideValue屬性的簡單Behaviour可確保轉換順暢。
• 內部函數__dismissMenu()用於確保在MenuBar失去焦點時打開的Menu已關閉。
• 當MenuItem被觸發時，hideValue屬性被直接重置以確保正確的隱藏。

Answer 2

我設法得到一些結果與此代碼：

ApplicationWindow { 
    id: app 

    MenuBar { 
     id: menu 
     Menu { 
      title: "Menu 1" 
      MenuItem { 
       text: "item 1" 
      } 
      MenuItem { 
       action: "item 2" 
      } 
     } 
    } 

    MouseArea { 
     anchors.top: parent.top 
     anchors.left: parent.left 
     anchors.right: parent.right 
     height: 20 
     hoverEnabled: true 

     onEntered: { 
      if (app.menuBar === menu) 
       app.menuBar = null; 
      else 
       app.menuBar = menu; 
     } 
    } 
} 

的變化試圖訪問null.__contentItem當欄隱藏然而時突然和QML調試報告錯誤。當然，代碼中的絕對大小可能會導致問題。