qt - 如何更改 MenuBar 的字体颜色？

如何更改 QML MenuBar 菜单项的文本颜色？

import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Window 2.2
import QtQuick.Dialogs 1.2
import QtQuick.Controls.Styles 1.3 as QtQuickControlStyle

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

    property color menuBackgroundColor: "#3C3C3C"
    property color menuBorderColor: "#282828"

    menuBar: MenuBar {

        style: QtQuickControlStyle.MenuBarStyle {
            padding {
                left: 8
                right: 8
                top: 3
                bottom: 3
            }
            background: Rectangle {
                border.color: menuBorderColor
                color: menuBackgroundColor
            }
            // font: // how to set font color to red?
            // textColor: "red" /* does not work - results in Cannot assign to non-existent property "textColor" */
            TextField {  // does also not work
                style: TextFieldStyle {
                    textColor: "red"
                }
            }
        }
    }
}

here 已经提出了类似的问题，但它似乎不适用于菜单项。

最佳答案

您必须为 itemDelegate 重新定义 itemDelegate.label 和 menuStyle 。前者定义 MenuBar 文本的样式，而后者定义菜单项文本的样式。

在下面的例子中，我为 MenuBar 和 Menu 定义了一个完整的样式，而不仅仅是它们的文本。 scrollIndicator 是这里唯一缺少的部分。它可以表示为 Text/Label 或 Image 。

import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Controls.Styles 1.3
import QtQuick.Window 2.2

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

    property color menuBackgroundColor: "#3C3C3C"
    property color menuBorderColor: "#282828"

    menuBar: MenuBar {

        Menu {
            title: "File"
            MenuItem { text: "Open..." }
            MenuItem { text: "Close" }
        }

        Menu {
            title: "Edit"
            MenuItem { text: "Cut"; checkable: true}
            MenuItem { text: "Copy" }
            MenuItem { text: "Paste" }
            MenuSeparator {visible: true }
            Menu {
                title: "submenu"
            }
        }

        style: MenuBarStyle {

            padding {
                left: 8
                right: 8
                top: 3
                bottom: 3
            }

            background: Rectangle {
                id: rect
                border.color: menuBorderColor
                color: menuBackgroundColor
            }

            itemDelegate: Rectangle {            // the menus
                implicitWidth: lab.contentWidth * 1.4           // adjust width the way you prefer it
                implicitHeight: lab.contentHeight               // adjust height the way you prefer it
                color: styleData.selected || styleData.open ? "red" : "transparent"
                Label {
                    id: lab
                    anchors.horizontalCenter: parent.horizontalCenter
                    color: styleData.selected  || styleData.open ? "white" : "red"
                    font.wordSpacing: 10
                    text: styleData.text
                }
            }

            menuStyle: MenuStyle {               // the menus items
                id: goreStyle

                frame: Rectangle {
                    color: menuBackgroundColor
                }

                itemDelegate {
                    background: Rectangle {
                        color:  styleData.selected || styleData.open ? "red" : menuBackgroundColor
                        radius: styleData.selected ? 3 : 0
                    }

                    label: Label {
                        color: styleData.selected ? "white" : "red"
                        text: styleData.text
                    }

                    submenuIndicator: Text {
                        text: "\u25ba"
                        font: goreStyle.font
                        color: styleData.selected  || styleData.open ? "white" : "red"
                        styleColor: Qt.lighter(color, 4)
                    }

                    shortcut: Label {
                        color: styleData.selected ? "white" : "red"
                        text: styleData.shortcut
                    }

                    checkmarkIndicator: CheckBox {          // not strinctly a Checkbox. A Rectangle is fine too
                        checked: styleData.checked

                        style: CheckBoxStyle {

                            indicator: Rectangle {
                                implicitWidth: goreStyle.font.pixelSize
                                implicitHeight: implicitWidth
                                radius: 2
                                color: control.checked ?  "red" : menuBackgroundColor
                                border.color: control.activeFocus ? menuBackgroundColor : "red"
                                border.width: 2
                                Rectangle {
                                    visible: control.checked
                                    color: "red"
                                    border.color: menuBackgroundColor
                                    border.width: 2
                                    radius: 2
                                    anchors.fill: parent
                                }
                            }
                            spacing: 10
                        }
                    }
                }

                // scrollIndicator:               // <--- could be an image

                separator: Rectangle {
                    width: parent.width
                    implicitHeight: 2
                    color: "white"
                }
            }
        }
    }
}

这是生成的 MenuBar 和 Menu s:



您还可以选择直接在 MenuStyle 中的 Menu 属性中设置 style 。像这样的东西:

Menu {
    title: "File"
    MenuItem { text: "Open..." }
    MenuItem { text: "Close" }

    style: MenuStyle {
        itemDelegate.label: Label {
        color: "blue"
        text: styleData.text

        // stuff above here
    }
}

在这最后一个示例中，只有"file"Menu 项的样式为文本的 blue 颜色。不过，人们可以争论这会有多丑陋。

关于qt - 如何更改 MenuBar 的字体颜色？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31856207/