用QML創建一個上下文菜單

Question

問題很簡單：如何用QML和javascript創建一個上下文菜單？ 我發現本手冊關於qt-project.org「菜單」組件，但相當無法使用：http://qt-project.org/doc/qt-5.1/qtquickcontrols/qml-qtquick-controls1-menu.html#details

的Qt Creator的IDE說：在我的QML文件上的字「菜單」「不明成分」。我使用Qt 5.2.1 stable。我正與Qt Quick的編碼2.

Answer 1

需要導入Qt Quick的控件使用Qt快速沿：

import QtQuick 2.0 
import QtQuick.Controls 1.1 

對於上下文菜單，你需要調用popup()這在光標位置打開的菜單。

Answer 2

我爲我的桌面應用程序創建了一個自定義的上下文菜單。這對我來說非常合適。我認爲這可能是有幫助的。

ContextMenu.qml

import QtQuick 1.1 

Rectangle { 
    id: contextMenuItem 
    signal menuSelected(int index) // index{1: Select All, 2: Remove Selected} 
    property bool isOpen: false 
    width: 150 
    height: menuHolder.height + 20 
    visible: isOpen 
    focus: isOpen 
    border { width: 1; color: "#BEC1C6" } 

    Column { 
     id: menuHolder 
     spacing: 1 
     width: parent.width 
     height: children.height * children.length 
     anchors { verticalCenter: parent.verticalCenter; left: parent.left; leftMargin: 3 } 

     ContextButton { 
      id: selectedAll 
      button_text: "Select All" 
      index: 1 
      onButtonClicked: menuSelected(index); 
     } 

     ContextButton { 
      id: removeSelected 
      button_text: "Remove Selected" 
      index: 2 
      onButtonClicked: menuSelected(index); 
     } 
    } 
} 

ContextItem.qml

import QtQuick 1.1 

Item { 
    id: contextButtonItem 
    property string button_text; 
    property bool clicked; 
    property int index; 
    property string target; 
    property bool enable: true; 
    signal buttonClicked; 
    height: 25 
    width: parent.width - 5 

    function viewButtonHovered() { 
     viewButton.state = "hovered"; 
     outerArea.z= -10; 
    } 

    function viewButtonExited() { 
     outerArea.z= 1; 
     if(clicked == false) { 
      viewButton.state = ""; 
     } else { 
      viewButton.state = "clicked" 
     } 
    } 
    Rectangle { 
     id: viewButton; 
     height: vButton.height + 4 
     width: parent.width 

     Text { 
      id: vButton 
      text: qsTr(button_text) 
      width: parent.width 
      anchors { verticalCenter: parent.verticalCenter; left: parent.left; leftMargin: 10 } 
      font { pixelSize: 14 } 
     } 
     MouseArea { 
      hoverEnabled: enable 
      anchors.fill: parent 
      enabled: enable 
      onClicked: buttonClicked(); 
      onEntered: viewButtonHovered(); 
      onExited: viewButtonExited(); 
     } 
     states: [ 
      State { 
       name: "clicked"; 
       PropertyChanges { target: vButton; color: "#286E1E"; } 
      }, 
      State { 
       name: "hovered"; 
       PropertyChanges { target: vButton; color: "#BEA1C6"; } 
      }, 
      State { 
       name: "normal"; 
       PropertyChanges { target: vButton; color: "#232323"; } 
      } 
     ] 
    } 
}