QML之Menu菜单

原创 2015年11月17日 16:36:38

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


版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

如何在QML应用中创建一个Context Menu

我们在很多的系统中看见可以在屏幕的一个地方长按,然后就可以根据当前显示的上下文弹出一个菜单。菜单中可以有一些选项,比如删除,修改该项。这种一般在ListView或GridView中常见。今天,我们就在...

QML 实现Slide Menu

/* slide menu example by av // tube42.se */ import QtQuick 1.0 Rectangle { id: gv_ wid...
  • dscyw
  • dscyw
  • 2014-01-11 16:25
  • 1658

QML之动态菜单配置

一直想要一个动态菜单,可随意配置,知道QtQuick中找到一个Views Examples。非常有用,记录如下。 界面: 点击每项,进行界面跳转,例如点击第一项跳转: LaunchList.q...

QML之窗口(无边框、透明及拖拽)

开发环境:Win7  Qt5.2.1 1.无边框      Qt Quick 2.0 中 QQuickView代替了1.0中的QDeclarativeView。 无边框窗口代码如下:...

QML设计登陆界面

QML设计登陆界面 本文博客链接:http://blog.csdn.net/jdh99,作者:jdh,转载请注明. 环境: 主机:WIN7 开发环境:Q...
  • jdh99
  • jdh99
  • 2014-04-29 14:04
  • 10394

QML编程入门

欢迎来到声明式UI语言QML的世界.在本入门教程中,我们使用QML创建一个简单的文本编辑器.阅读这个教程后,就可以使用QML和Qt C++开发应用程序了. 安装 首先需要安装包含Qt Quic...

qml学习--------------鼠标事件响应

在进行日常的桌面应用中,鼠标点击事件肯定是必不可少的。今天我们要学习的第一个例子就是鼠标点击实现窗口变色和退出的例子。import QtQuick 2.2Rectangle{ width: 32...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)