菜单按钮 Menu
- 有两种使用方法:1)上下文的菜单,即右键单击显示的菜单 2)弹出菜单,即单击按钮后显示的菜单
- 菜单种显示一个项目,用到MenuItem:提供一种熟悉的方式来响应被触发的菜单项。它有一个触发信号triggered()。
- Menu的属性及方法大部分是Qt5.10引入的
- 属性
cascade : 保存菜单是否级联其子菜单
contentData : 保存内容数据列表
contentModel : 保存用于显示菜单项的模型
count : 保存项目数
currentIndex : 保存当前突出显示的项目的索引
delegate : 保存用于创建项目以表示操作的组件
focus : 保存弹出窗口是否需要焦点
overlap : 保存菜单水平重叠其父菜单的像素数量
title : 保存菜单的标题 - 方法:列举一部分,完整链接
Action actionAt(index): 返回index处的操作,如果index无效则返回null
void addAction(action): 将操作添加到此菜单的末尾
void addItem(item): 将项目添加到项目列表的末尾
void addMenu(menu): 将菜单作为子菜单添加到此菜单的末尾
void dismiss(): 关闭该菜单所属层次结构中的所有菜单 - 弹出式菜单的方法
void popup(parent, real x, real y, MenuItem item = null): 在弹出式坐标系中指定位置x,y处打开菜单,即相对于其父项的坐标。
void popup(parent, point pos, MenuItem item = null):在弹出式坐标系中指定位置pos处打开菜单,即相对于其父项的坐标
void popup(parent, MenuItem item = null):在具有可用鼠标光标的台式机平台上,使用鼠标光标打开菜单,否则将菜单置于其父项上方
上下文菜单
- 可以调用popup()方法打开
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
Window {
visible: true
width: 360
height: 360
title: qsTr("Image")
color: "lightyellow"
MouseArea {
anchors.fill: parent
acceptedButtons: Qt.RightButton
onClicked: {
if (mouse.button === Qt.RightButton)
contextMenu.popup()
}
}
Menu {
id: contextMenu
MenuItem { text: "打开文件" }
MenuItem { text: "保存文件" }
MenuItem { text: "另存为..." }
}
}
弹出菜单
- 设置好x, y的坐标指定好位置,调用open()打开
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
Window {
id:root
visible: true
width: 640
height: 480
title: qsTr("Test")
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..."
}
}
}
}
级联菜单
- Qt5.10开始,可以在可以在Menu内创建子菜单并声明Action对象,另一种是用MenuItem
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
Window {
id:root
visible: true
width: 640
height: 480
title: qsTr("Test")
MouseArea {
anchors.fill: parent
acceptedButtons: Qt.RightButton
onClicked: {
if (mouse.button === Qt.RightButton)
contextMenu.popup()
}
}
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" }
}
}
}
}
弹出窗口 Popup
- 不提供自身的布局,需要手动定位位置 链接
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
Window {
id: root
visible: true
width: 640
height: 480
title: qsTr("test")
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("英语") }
}
}
}
}
侧滑抽屉 Drawer
- Drawer通过两种方式打开:1)从左边缘侧滑 2)点击鼠标按钮
- 属性
dragMargin : 保存距屏幕边缘的距离,在该距离内拖动动作将打开抽屉。将该值设置为0可防止通过拖动打开抽屉
edge : 保存从中打开抽屉的窗口的边缘,分为上下左右四个边缘方向
interactive : 保存抽屉是否为交互式。非交互式抽屉不会对滑动产生反应
position : 保存抽屉相对于其最终目的地的位置 - 方法
open()
close() - 实例
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
Window {
id: root
visible: true
width: 640
height: 480
title: qsTr("test")
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 //边距为窗体的 宽度/3 表示在窗体中左侧三分之一内通过鼠标做从左至右的滑动动作时,也可以打开Drawer
Column{
Button{
width: drawer.width
text: "New file"
}
Button{
width: drawer.width
text: "save"
}
Button{
width: drawer.width
text: "save as..."
}
}
}
}