c++ - QML ComboBox 项 DropDownMenu 样式

Question

我想在我的项目中使用 ComboBox 类型。是否可以更改下拉菜单的外观(颜色、形状、文本样式)，或者我是否需要使用矩形、ListView 和其他类型的组合？

以下代码应用自定义，但未对保持灰色的下拉菜单定义任何修改:

ComboBox {
    currentIndex: 2
    activeFocusOnPress: true
    style: ComboBoxStyle {
        id: comboBox
        background: Rectangle {
            id: rectCategory
            radius: 5
            border.width: 2
            color: "#fff"

            Image {
                source: "pics/corner.png"
                anchors.bottom: parent.bottom
                anchors.right: parent.right
                anchors.bottomMargin: 5
                anchors.rightMargin: 5
            }
        }
        label: Text {
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter
            font.pointSize: 15
            font.family: "Courier"
            font.capitalization: Font.SmallCaps
            color: "black"
            text: control.currentText
        }
    }

    model: ListModel {
        id: cbItems
        ListElement { text: "Banana" }
        ListElement { text: "Apple" }
        ListElement { text: "Coconut" }
    }
    width: 200
}

Answer 1

当前的公共(public) API 不允许自定义下拉菜单，如所述 here . Qt 5.4，即 Styles 1.3，刚刚引入了一些自定义字体和文本的属性(文档 here)，但仍然没有对下拉自定义的公开访问。

此外，链接中提供的示例不适用于较新版本的 Qt。这是我用 Qt 5.3、Qt 5.4 和 Qt 5.5 测试过的修改版本(记得在导入中添加 import QtQuick.Controls.Private 1.0):

ComboBox {
    id: box
    currentIndex: 2
    activeFocusOnPress: true
    style: ComboBoxStyle {
        id: comboBox
        background: Rectangle {
            id: rectCategory
            radius: 5
            border.width: 2
            color: "#fff"
        }
        label: Text {
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter
            font.pointSize: 15
            font.family: "Courier"
            font.capitalization: Font.SmallCaps
            color: "black"
            text: control.currentText
        }

        // drop-down customization here
        property Component __dropDownStyle: MenuStyle {
            __maxPopupHeight: 600
            __menuItemType: "comboboxitem"

            frame: Rectangle {              // background
                color: "#fff"
                border.width: 2
                radius: 5
            }

            itemDelegate.label:             // an item text
                Text {
                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.AlignHCenter
                font.pointSize: 15
                font.family: "Courier"
                font.capitalization: Font.SmallCaps
                color: styleData.selected ? "white" : "black"
                text: styleData.text
            }

            itemDelegate.background: Rectangle {  // selection of an item
                radius: 2
                color: styleData.selected ? "darkGray" : "transparent"
            }

            __scrollerStyle: ScrollViewStyle { }
        }

        property Component __popupStyle: Style {
            property int __maxPopupHeight: 400
            property int submenuOverlap: 0

            property Component frame: Rectangle {
                width: (parent ? parent.contentWidth : 0)
                height: (parent ? parent.contentHeight : 0) + 2
                border.color: "black"
                property real maxHeight: 500
                property int margin: 1
            }

            property Component menuItemPanel: Text {
                text: "NOT IMPLEMENTED"
                color: "red"
                font {
                    pixelSize: 14
                    bold: true
                }
            }

            property Component __scrollerStyle: null
        }
    }

    model: ListModel {
        id: cbItems
        ListElement { text: "Banana" }
        ListElement { text: "Apple" }
        ListElement { text: "Coconut" }
    }
    width: 200
}     

这里 __dropDownStyle 被分配了一个 MenuStyle类型。此类类型的某些属性经过自定义以获得所需的样式，特别是 itemDelegate(定义组合框内项目的外观)和 frame(整体背景)。有关详细信息，请参阅链接的 MenuStyle API。总体结果:

请注意，此方法在 Windows 和 Android 上完美运行，而在 OSX 上，代码完全被忽略。可以检查 Qt 安装中的 qml 样式文件(搜索像 qml/QtQuick/Controls/Styles/Desktop 这样的子路径)，看看有什么变化 w.r.t. Windows 并尝试调整提供的解决方案。这部分留给读者。