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