QML之Menu菜单

QML之Menu菜单

QML菜单，我使用了两种方式实现，一种是直接使用QML中的menu实现，另一种是使用的ListView实现。

1.QML有Menu属性是做菜单的。效果如下：

使用起来也方便，你需要import QtQuick.Controls 我的QT版本是5.2的，于是import QtQuick.Controls 1.1，不同版本，请参照帮助文档。

MenuBar {
    Menu {
        title: "File"
        MenuItem { text: &#" }
        MenuItem { text: "Close" }
    }


    Menu {
        title: "Edit"
        MenuItem { text: "Cut" }
        MenuItem { text: "Copy" }
        MenuItem { text: "Paste" }
    }
}

现在你的菜单栏就有了，下面是我自己的一个demo

menuBar: MenuBar {

        Menu {

            title: "&File"

            MenuItem { 	    	

		text: "Open"
                shortcut: StandardKey.Quit
                onTriggered:FILE_USER.on_actionOpen_triggered()//c++实现的打开

	    }

            MenuItem {

                text: "Close"

                shortcut: StandardKey.Quit

                onTriggered: Qt.quit()

            }

        }

}

效果：

2.ListView实现的效果如下：

这种可以自定义你的菜单，自己写。下面贴出QML做的MenuBox.qml

import QtQuick 2.0

Rectangle {

    id:chosenItem

    property variant items: ""

    property alias text: //test别名，用于在mian.qml中传入text

    signal comboClicked;

    width: 60;

    height: 30;

    smooth:true;

    radius:4;

    color: "aliceblue"

    Text {

      id:chosenItemText

      In: parent

      anchors.verticalCenter: parent.verticalCenter

      font.pointSize: 15

      font.bold:true

      fontSizeMode:Text.HorizontalFit

      style: Text.Raised

    }

    MouseArea {

        width: 60

        height: 20

        anchors.bottomMargin: 0

        anchors.fill: parent;

        onClicked: {

               chosenItem.state = chosenItem.state==="dropDown"?"":"dropDown"

        }

    }

    Rectangle {

         id:dropDown

         width:chosenItem.width;

         height:0;

         clip:true;

         radius:4;

         p: chosenItem.bottom;

         anchors.margins: 2;

         color: "aliceblue"

         ListView {

              id:listView

              height:500;

              model: chosenItem.items

              currentIndex: 0

              delegate: Item{

                      width:chosenItem.width;

                      height: chosenItem.height;

                      Text {

                          text: modelData

                          p: p;

                          //anchors.left: parent.left;

                          anchors.horizontalCenter:parent.horizontalCenter

                          anchors.margins: 5;

                      }

                      MouseArea {

                            anchors.fill: parent;

                            onClicked: {

                                    chosenItem.state = ""

                                if(Item[0])

                                    FILE_USER.on_actionNew_triggered();

                                }

                      }

             }

        }

   }

   states: State {

            name: "dropDown";

            PropertyChanges {

                target: dropDown; height:30*chosenItem.items.length

            }

   }

   transitions: Transition {

                    NumberAnimation { target: dropDown; properties: "height"; pe: Easing.OutExpo; duration: 1000 }

   }

}

在main.qml中使用方法：

MenuBox{

                items: ["新建","打开","保存"]

                anchors.horizontalCenter:  parent.horizontalCenter

                text:"文件"

}

text是你的菜单名，items是菜单中的子名。通过在main.qml中传到上面的MenuBox中。方便使用。