qml 菜单按钮Menu 弹出窗口Popup 侧滑抽屉Drawer

菜单按钮 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..."
                }
            }
        }
}