温馨提示:本文翻译自stackoverflow.com,查看原文请点击:c++ - QML ComboBox item DropDownMenu style

c++ - QML ComboBox项目DropDownMenu样式

发布于 2020-03-29 22:03:00

我想ComboBox在项目中使用该类型。是否可以更改下拉菜单的外观(颜色,形状,文本样式),还是需要组合使用矩形,ListViews和其他类型?

以下代码应用了自定义功能,但没有为灰色的下拉菜单定义任何修改:

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
}

查看更多

提问者
otashlanov
被浏览
62
BaCaRoZzo 2016-01-21 20:56

目前的公共API不允许下拉菜单的自定义为说明这里Qt 5.4,即Styles 1.3,仅介绍了一些属性来自定义字体和文本(此处为文档),但仍然没有公开访问下拉自定义的权限。

同样,链接中提供的示例不适用于更新版本的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),以查看Windows的更改并尝试调整提供的解决方案。这部分留给读者看。