关闭

QML之Menu菜单

标签: qml menuqml菜单
2460人阅读 评论(0) 收藏 举报
分类:

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


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:62523次
    • 积分:1121
    • 等级:
    • 排名:千里之外
    • 原创:50篇
    • 转载:40篇
    • 译文:0篇
    • 评论:1条
    文章分类
    最新评论