QML之Menu菜单

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


  • 2
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值