MyComboBox.qml

import QtQuick 2.12
import QtQuick.Templates 2.12 as Template1
import QtQuick.Controls 2.12
import QtQuick.Controls.impl 2.12Template1.ComboBox {id:controlproperty color themeColor: "darkCyan"  //主题颜色property color indicatorColor: "white" //按钮颜色property color textColor: "white"      //文本主颜色property int radius: 4property int showCount: 10              //最多显示的item个数property int indicatorPadding: 0       //下拉按钮边距property url indicatorSource: "qrc:/qt-project.org/imports/QtQuick/Controls.2/images/double-arrow.png"property Gradient _normalGradient: Gradient{GradientStop { position: 0.0; color: Qt.lighter(themeColor) }GradientStop { position: 0.5; color: Qt.lighter(themeColor) }GradientStop { position: 1.0; color: Qt.lighter(themeColor) }}property Gradient _downGradient: Gradient{GradientStop { position: 0.0; color: Qt.darker(themeColor) }GradientStop { position: 0.5; color: themeColor }GradientStop { position: 1.0; color: Qt.lighter(themeColor) }}property Gradient _hoverGradient: Gradient{GradientStop { position: 0.0; color: themeColor }GradientStop { position: 0.5; color: Qt.darker(themeColor) }GradientStop { position: 1.0; color: themeColor }}property Gradient _lightToNormal: Gradient{GradientStop { position: 0.0; color: Qt.lighter(themeColor) }GradientStop { position: 0.6; color: themeColor }}property Gradient _normalToDark: Gradient{GradientStop { position: 0.2; color: themeColor }GradientStop { position: 0.9; color: Qt.darker(themeColor) }}//property int _globalY: mapToGlobal(control.x,control.y).y//property int _globalHeight: Screen.desktopAvailableHeightimplicitWidth: 120implicitHeight: 30spacing: 5leftPadding: paddingrightPadding: padding + indicator.width + spacingfont{family: "SimSun"pixelSize: 16}//各itemdelegate: ItemDelegate {implicitWidth: control.implicitWidthimplicitHeight: control.implicitHeightwidth: control.widthpadding: 0contentItem: Text {text: control.textRole? (Array.isArray(control.model)? modelData[control.textRole]: model[control.textRole]): modelDatacolor: control.textColorfont: control.fontelide: Text.ElideRightrenderType: Text.NativeRenderingverticalAlignment: Text.AlignVCenter}hoverEnabled: control.hoverEnabledbackground: Rectangle{gradient: (control.highlightedIndex === index)?_normalToDark:_lightToNormal}}//下拉按钮图标indicator: Item{id: box_indicatorx: control.width - widthy: control.topPadding + (control.availableHeight - height) / 2width: box_indicator_img.width+control.indicatorPadding*2height: control.height//按钮图标ColorImage {id: box_indicator_imganchors.centerIn: parentcolor: control.textColorsource: control.indicatorSource}}//box显示itemcontentItem: Template1.TextField{leftPadding: 10rightPadding: 6text: control.editable? control.editText: control.displayTextfont: control.fontcolor: control.textColorverticalAlignment: Text.AlignVCenter//默认鼠标选取文本设置为falseselectByMouse: true//选中文本的颜色selectedTextColor: "white"//选中文本背景色selectionColor: "black"clip: truerenderType: Text.NativeRenderingenabled: control.editableautoScroll: control.editablereadOnly: control.downinputMethodHints: control.inputMethodHintsvalidator: control.validatorbackground: Rectangle {visible: control.enabled && control.editablecolor: parent && parent.activeFocus? Qt.rgba(0.6,0.6,0.6,0.6): "transparent"}Image {id: namesource: "qrc:/image/close.png"}}//box框背景background: Rectangle {implicitWidth: control.implicitWidthimplicitHeight: control.implicitHeightradius: control.radiusgradient: control.down? _downGradient: control.hovered? _hoverGradient: _normalGradient}//弹出框popup: Template1.Popup {//默认向下弹出，如果距离不够，y会自动调整（）y: control.heightwidth: control.width//根据showCount来设置最多显示item个数implicitHeight: (control.delegateModel.count<showCount?contentItem.implicitHeight:control.showCount*control.implicitHeight)+2padding: 1contentItem: ListView {clip: trueimplicitHeight: contentHeightmodel: control.popup.visible ? control.delegateModel : nullcurrentIndex: control.highlightedIndex//按行滚动SnapToItem ;像素移动SnapPositionsnapMode: ListView.SnapToItem//ScrollBar.horizontal: ScrollBar { visible: false }ScrollBar.vertical: ScrollBar { //定制滚动条id: box_barimplicitWidth: 10visible: (control.delegateModel.count>showCount)//background: Rectangle{} //这是整体的背景contentItem: Rectangle{implicitWidth:10radius: width/2color: box_bar.pressed? Qt.rgba(0.6,0.6,0.6): Qt.rgba(0.6,0.6,0.6,0.5)}}}//弹出框背景（只有border显示出来了，其余部分被delegate背景遮挡）background: Rectangle {border.width: 1border.color: themeColor//color: Qt.lighter(themeColor)radius: 4}}
}

调用：

   MyComboBox{x:13y: 30width: 160height: 25themeColor:"grey"model: ["所有数据","状态"]}