前言这一节继续为大家讲解QML中一些比较有意思的控件。这一节我们要说的控件是菜单按钮Menu、弹出窗口Popup和侧滑抽屉Drawer。菜单按钮 MenuMenu其实就是我们打来一个软件时出现的菜单项，菜单主要有两个使用方法，第一个是用作上下文菜单，比如说右键单击后显示的菜单。还有一个就是用作弹出菜单，比如说单击按钮后显示的菜单。通常，我们想要在菜单中显示一个项目，需要用到MenuItem，它提供一种熟悉的方式来响应被触发的菜单项。它有一个触发信号triggered()。Menu的属性（大部分是从Qt5.10引入的）
Menu的方法（大部分是从Qt5.10引入的）因为menu的方法函数太多了，所以我们列举部分方法函数，没提及的大家可以参考链接
弹出式菜单
Menu的使用使用Menu时需要导入控件库，另外需要注意，因为其大部分的属性和方法都是基于Qt5.10的，所以Qt的版本必须在5.10及以上，要不然很容易报错的。 上下文菜单当用作上下文菜单时，建议打开菜单的方法是调用popup()。如果没有指定位置的话，菜单将位于具有鼠标光标处，或者将位于其父项上方。我们给大家写一个小例程，在窗口范围内点击鼠标右键，会弹出菜单窗口。 MouseArea {
anchors.fill: parent
acceptedButtons: Qt.RightButton
onClicked: {
if (mouse.button === Qt.RightButton)
contextMenu.popup()
}
}
Menu {
id: contextMenu
MenuItem { text: "打开文件" }
MenuItem { text: "保存文件" }
MenuItem { text: "另存为..." }
}首先在全局窗口设置鼠标事件，指定处理的按键是鼠标右键，当点击右键时，就打开菜单选项。前面我们也说过，menu通常需要MenuItem为其填充子项，这里只是简单设置了子项的名称，如果有需要可以继续定义哦。
弹出菜单当用作弹出菜单时，需要设置弹出菜单的x和y坐标来指定位置，然后调用open()打开菜单。 Window {
id:root
visible: true
width: 640
height: 480
title: qsTr("Menu")
Button {
id: button
anchors.centerIn: parent
text: "Change"
onClicked: menu.open()
Menu {
id: menu
y: button.height/2
x: button.width/2
background: Rectangle {
implicitWidth: 200
implicitHeight: 100
color: "lightyellow"
}
MenuItem {
text: "Changecolor..."
onTriggered: {
root.color = "orange"
}
}
MenuItem {
text: "Changesize..."
onTriggered: {
root.width = root.width/2
root.height = root.height/2
}
}
MenuItem {
text: "Change..."
}
}
}
}点击按钮时，弹出菜单选项，看一下其设置，为其指定起始位置，如果未设置的话，弹出菜单的起始位置就为父项目的起始坐标；设置menu的背景大小和颜色；同样用MenuItem填充菜单项，这次为其设置后续操作，单击Changecolor时，window窗口的颜色改变，单击Changesize时，window窗口的大小改变。
级联菜单如果我们想要实现级联菜单，其实也非常简单，因为从Qt5.10开始，可以在Menu内创建子菜单并声明Action对象，除了使用MenuItem来填充Menu,还可以使用Action对象来创建菜单项。 在上下文菜单的例程中我们修改对Menu的定义： Menu {
id: contextMenu
Action { text: "Cut" }
Action { text: "Copy" }
Action { text: "Paste" }
MenuSeparator{}
Menu {
title: "Find/Replace"
Action { text: "Find Next" }
Action { text: "Find Previous" }
Action { text: "Replace" }
MenuSeparator{}
Menu{
title: "New"
Action { text: "New file" }
}
}
}其实就是一级一级的嵌套，通过设置Action对象来填充Menu的选项集，中间的MenuSeparator用于通过用一行分隔菜单项来在视觉上区分菜单项组，这样视觉效果上会清爽一些。
弹出窗口 PopupPopup是类似于弹出窗口的用户界面控件,相信大家经过Menu的学习应该能比较容易的理解这个概念，Popup不提供自身的布局，需要我们手动定位其位置，大家可以看一下官方手册中的弹出窗口的布局。
可以看到。假如我们不指定窗口大小的话，它的隐式宽度和高度都是基于背景项和内容项的隐式大小以及填充部分的大小来决定的。而这些属性如果没有设置的话，Popup是不可见的。而Popup的属性也很多很杂，篇幅原因，就不给大家一一列举了，大家可以参考链接 看一下Popup的使用方法。 Window {
id: root
visible: true
width: 640
height: 480
title: qsTr("Popup")
color:"lightgray"
Button {
text: "Open"
anchors.centerIn: parent
onClicked: popup.open()
}
Popup {
id: popup
background: Rectangle {
implicitWidth: 200
implicitHeight: 200
border.color: "green"
}
contentItem: Column {
Column {
CheckBox { text: qsTr("语文") }
CheckBox { text: qsTr("数学") }
CheckBox { text: qsTr("英语") }
}
}
}
}我们指定了背景项的隐式大小，所以Popup的大小也随之确定。Popup有两个可是可视化项，背景项和内容项，主要的显示部分放到内容项里面，这里是设置了行定位里面的三个CheckBox控件。
侧滑抽屉 DrawerDrawer提供基于滑动的侧面板，类似于在触摸界面中经常使用的侧面板。Drawer可以放置在内容项的四个边缘中的任何一个方向上。上方的抽屉靠着窗口的左边缘放置。然后通过从窗口的左边缘“拖动”抽屉来打开抽屉。属性
使用方法我们来实现一个简单的用法，Drawer通过两种方式打开，一是从左边缘侧滑，二是点击鼠标按钮打开。Drawer的打开关闭方法分别是open()和close()。 import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.3
Window {
id: root
visible: true
width: 640
height: 480
title: qsTr("Menu")
color:"lightgray"
Button{
anchors.centerIn: parent
text: "打开左侧菜单"
onClicked: {
if(drawer.visible)
{
drawer.close()
}else{
drawer.open()
}
}
}
Drawer {
id: drawer
width: 0.3 * root.width
height: root.height
dragMargin: parent.width/3
Column{
Button{
width: drawer.width
text: "New file"
}
Button{
width: drawer.width
text: "save"
}
Button{
width: drawer.width
text: "save as..."
}
}
}
}在鼠标的点击事件中，判断如果当前Drawer是不可见的话，就打开Drawer，否则就是关闭Drawer。在Drawer中设置了三个按钮选项，这很像我们之前的菜单项。在Drawer中设置边距为窗体的宽度/3，这样，我们在窗体中左侧三分之一内通过鼠标做从左至右的滑动动作时，也可以打开Drawer。
总结源码：26.zip |
