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: "Open..." }

        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: chosenItemText.text//test别名，用于在mian.qml中传入text

signal comboClicked;

width: 60;

height: 30;

smooth:true;

radius:4;

color: "aliceblue"

Text {

  id:chosenItemText

anchors.centerIn: 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;

anchors.top: 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

anchors.top: parent.top;

//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"; easing.type: Easing.OutExpo; duration: 1000 }

}

}

在main.qml中使用方法：

MenuBox{

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

anchors.horizontalCenter:  parent.horizontalCenter

text:"文件"

}

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