QML实现下拉菜单

最新推荐文章于 2025-10-13 01:34:27 发布

原创最新推荐文章于 2025-10-13 01:34:27 发布 · 7k 阅读

24 ·

CC 4.0 BY-SA版权

QML学习之路专栏收录该内容

35 篇文章

订阅专栏

本文介绍了用QML实现网页导航栏菜单效果，提到main.qml文件，还指出在QML中使用delegate时遇到样式不生效的问题，因作者是初学者对delegate机制理解较浅。同时说明了控制MenuBarItem、MenuItem等样式的相关QML文件，并给出资源下载地址。

用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 {}
    }
}

上述代码中的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
         }
     }
}

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
    }
}

控制在这里插入图片描述的样式的是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
        }
    }
}