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.QuitonTriggered: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中。方便使用。