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中常见。今天,我们就在...
  • UbuntuTouch
  • UbuntuTouch
  • 2015年08月19日 12:32
  • 1379

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
  • 1802

Qml弹出菜单

主要是对菜单项的一个自定义: MenuItem { id: menuItem1 anchors.left: par...
  • zhengtianzuo06
  • zhengtianzuo06
  • 2017年10月17日 14:57
  • 219

QML中多个RadioButton的互斥使用及Button添加下拉菜单

QML中多个RadioButton的互斥使用及Button添加下拉菜单
  • Shado_walker
  • Shado_walker
  • 2016年04月13日 12:30
  • 1836

QT Creator添加菜单栏和工具栏

  • 2016年08月13日 14:13
  • 40KB
  • 下载

QML之动态菜单配置

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

QML官方系列教程——Qt Quick Controls

附网址:http://qt-project.org/doc/qt-5/qtquickcontrols-index.html Qt Quick Controls —— Qt Quick控件 Qt Q...
  • u011348999
  • u011348999
  • 2014年06月12日 20:26
  • 5817

QML中的Menu

menu必须依附于MenuBar的存在,否则不会显示。动态添加菜单项如给id为testitem的Menu添加一个itemtestitem.additem(qsTr("item3"));动态添加的菜单绑...
  • LC900730
  • LC900730
  • 2017年09月24日 14:56
  • 170

Qt个性化菜单项例子程序

  • 2010年05月11日 21:58
  • 23KB
  • 下载

QML实现Label的文字选择与右键各操作

在QML中,原生的Label是不能够进行鼠标的选中,复制,全选等操作的,仅仅只能用于简单的展示文字,但是在实际开发中,往往我们需要给用户展示一些信息,而且要支持可以用鼠标进行选择文字,并进行复制操作,...
  • Shado_walker
  • Shado_walker
  • 2017年02月09日 18:36
  • 1210
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:QML之Menu菜单
举报原因:
原因补充:

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