QML实现下拉菜单

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处连接和本声明。
本文连接：https://blog.csdn.net/hp_cpp/article/details/89602337
用qml实现
http://sc.chinaz.com/jiaobendemo.aspx?downloadid=121210151632660

原来的网页的导航栏菜单是这样的，在QML中，我实现了相似的效果：

main.qml文件：

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.5

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    menuBar: MenuBar {
        Menu {
            title: qsTr("JquerySchool")
            Action {
                text: qsTr("Jquery插件")
                onTriggered: console.log("Jquery插件")
            }
            Action { text: qsTr("JQuery学堂") }
            Action { text: qsTr("学习资料库") }
            Action { text: qsTr("QQ群堂") }
           // MenuSeparator { }
            Action { text: qsTr("TAGS标签") }
            Action { text: qsTr("在线留言") }

            delegate: GreenMenuItem{}  //注意这里的delegate不能为某个Component
            background: GreenMenuBarBg{}
        }

        Menu {
            title: qsTr("Jquery学堂")
            Action { text: qsTr("Jquery插件") }
            Action { text: qsTr("Jquery学堂") }
            Action { text: qsTr("学习资料库") }
            Action { text: qsTr("QQ群堂") }
            Action { text: qsTr("TAGS标签") }
            Action { text: qsTr("在线留言") }

            delegate: GreenMenuItem{}
            background: GreenMenuBarBg{}
        }
        Menu {
            title: qsTr("&Help")
            Action { text: qsTr("&About") }

            delegate: GreenMenuItem{}
            background: GreenMenuBarBg{}
        }

        delegate: GreenMenuBar{}
        background: GreenMenuBarBg {}
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
上述代码中的delegate不能为某个Component，由于这些delegate是某个Item的，参考：
https://doc.qt.io/qt-5.12/qml-qtquick-tableview.html#delegate-prop
TableView QML Type里的delegate这样说明的：

Note: Delegates are instantiated as needed and may be destroyed at any time. They are also reused if the reuseItems property is set to true. You should therefore avoid storing state information in the delegates.

我遇到的问题就是将delegate：某个Component的Id
结果设置的样式不生效。原谅我是QML初学者，对delegate具体的机制什么的，还理解得较为浅。

控制MenuBarItem样式的，这里的MenuBarItem是指：

控制这些“JquerySchool”样式的是GreenMenuBar.qml文件，控制后面黑色长方形大小和颜色的是GreenMenuBarBg.qml文件。这两个文件的qml代码是：
GreenMenuBar.qml：

import QtQuick 2.5
import QtQuick.Controls 2.5

MenuBarItem {
     id: menuBarItem
     height: 40
     width: 120
     font: Qt.font({
                   family: "微软雅黑",
                   pointSize: 10,
                   weight: Font.Bold
                   })

     contentItem: Text {
         text: menuBarItem.text
         font: menuBarItem.font
         opacity: enabled ? 1.0 : 0.3
         color:  "#ffffff"
         horizontalAlignment: Text.AlignHCenter
         verticalAlignment: Text.AlignVCenter
         elide: Text.ElideRight
     }

     background: Rectangle {
         implicitWidth: 40
         implicitHeight: 40
         opacity: enabled ? 1 : 0.3
         color: menuBarItem.highlighted ? "#8ACE00" : "transparent"

         //左边灰白色的竖线
         Rectangle {
             color: "#808080"
             height: parent.height
             width: 1
             anchors.left: parent.left
             opacity: 0.5
         }

         //右边的竖线
         Rectangle {
             color: "#696969"
             height: parent.height
             width: 1
             anchors.right: parent.right
             opacity: 0.5
         }
     }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
GreenMenuBarBg.qml文件：

import QtQuick 2.5

Rectangle {
    implicitWidth: 150
    implicitHeight: 40
    color: "#333333"

    Rectangle {
        color: "#21be2b"
        width: parent.width
        height: 1
        anchors.bottom: parent.bottom
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
控制的样式的是MenuItem，文件为：
GreenMenuItem.qml：

import QtQuick 2.5
import QtQuick.Controls 2.5

MenuItem {
    id: menuItem
    implicitWidth: 30
    implicitHeight: 40
    font: Qt.font({
                  family: "微软雅黑",
                  pointSize: 10,
                  weight: Font.Bold
                  })
    contentItem: Text {
         //leftPadding: menuItem.indicator.width
         //rightPadding: menuItem.arrow.width
         text: menuItem.text
         font: menuItem.font
         opacity: enabled ? 1.0 : 0.3
         color: "#ffffff"
         horizontalAlignment: Text.AlignHCenter
         verticalAlignment: Text.AlignVCenter
         elide: Text.ElideRight
     }

    background: Rectangle {
        implicitWidth: 30
        implicitHeight: 40
        opacity: enabled ? 1 : 0.3
        color: menuItem.highlighted ? "#8ACE00" : "transparent"

        //上边的横线         Rectangle {             color: "#808080"             height: 1             width: parent.width             anchors.top: parent.top             opacity: 0.5         }     } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 资源下载地址：https://download.csdn.net/download/hp_cpp/11158429 ———————————————— 版权声明：本文为CSDN博主「hp_cpp」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处连接及本声明。 原文连接：https://blog.csdn.net/hp_cpp/article/details/89602337