如何更改MenuBar的字体颜色？

Question

如何更改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"
                }
            }
        }
    }
}     

这里也提出了类似的问题,但它似乎与菜单项无关.

Answer 1

你必须重新定义itemDelegate和itemDelegate.label对menuStyle.前者定义MenuBar文本的样式,而后者定义菜单项文本的样式.

在下面的例子中,我为s MenuBar和Menus 定义了一个完整的样式,不仅仅是它们的文本.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和Menus:

您也可以选择在属性中MenuStyle直接在a内设置.像这样的东西:Menustyle

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

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

        // stuff above here
    }
}

在最后一个示例中,只有"文件" Menu项目使用blue文本颜色设置样式.不过,人们可以争辩说会有多丑.