目录

一.添加模块

import QtQuick.Controls 2.4

import QtQuick.Templates 2.4 as T

import QtGraphicalEffects 1.15

import QtQuick 2.15 as T2

二.自定义Combox

1.combox文字显示

2.设置下拉图标显示

3.下拉框中选中背景设置

4.下拉框中选中文字设置

5.下拉框设置

三.效果显示

四.代码

---

一.添加模块

import QtQuick.Controls 2.4

1. 作用: 引入Qt Quick Controls模块，提供了一组常见的UI控件（如按钮、文本框等），用于快速开发现代用户界面。

2. 性质: 这个模块包含了许多预定义的控件和样式，可以大大简化UI开发。版本号2.4表示你正在使用该模块的第2.4版。

import QtQuick.Templates 2.4 as T

1. 作用: 引入Qt Quick Templates模块，这个模块提供了一些常用的模板组件，例如Repeater、Loader等，用于动态创建和管理UI元素。
2. 性质: 通过给模块起别名T，你可以在代码中用T来引用该模块中的类型和函数。版本号2.4表示你正在使用该模块的第2.4版。

import QtGraphicalEffects 1.15

1. 作用: 引入Qt Graphical Effects模块，提供了一组图形效果类，用于为UI元素添加视觉效果，如阴影、模糊、渐变等。

2. 性质: 这个模块允许你在应用程序中实现复杂的视觉效果，提升用户体验。版本号1.15表示你正在使用该模块的第1.15版。

import QtQuick 2.15 as T2

1. 作用: 引入Qt Quick基础模块，这是Qt Quick的核心部分，提供了构建动态用户界面的基本功能和类型。

2. 性质: 通过给模块起别名T2，你可以在代码中用T2来引用该模块中的类型和函数。版本号2.15表示你正在使用该模块的第2.15版。

二.自定义Combox

1.combox文字显示

2.设置下拉图标显示

3.下拉框中选中背景设置

4.下拉框中选中文字设置

5.下拉框设置

三.效果显示

四.代码

import QtQuick                  2.11
import QtQuick.Window           2.3
import QtQuick.Controls         2.4
import QtQuick.Templates        2.4 as T
import QtGraphicalEffects       1.15
import QtQuick 2.15  as T2Window{width: 800height: 600visible: trueproperty int    inPopHeight: 0property int    inRadius: 20property int    inTextWidth: 380property bool   sizeToContents: falseproperty real   _largestTextWidth:  0property real   _popupWidth:        sizeToContents ? _largestTextWidth + itemDelegateMetrics.leftPadding + itemDelegateMetrics.rightPadding : control.widthproperty bool   _onCompleted:       falseproperty int    _fontSize:          30ComboBox {id:             controlanchors.centerIn: parentpadding:        10spacing:        10font.family:    "微软雅黑"implicitWidth: 400implicitHeight:70leftPadding:    padding + (!control.mirrored || !indicator || !indicator.visible ? 0 : indicator.width + spacing)rightPadding:   padding + (control.mirrored || !indicator || !indicator.visible ? 0 : indicator.width)TextMetrics {id:                 textMetricsfont.pixelSize:     _fontSizefont.family:        "微软雅黑"}ItemDelegate {id:             itemDelegateMetricsvisible:        falsefont.pixelSize:         _fontSizefont.family:            "微软雅黑"}function _adjustSizeToContents() {if (_onCompleted && sizeToContents && model) {_largestTextWidth = 0for (var i = 0; i < model.length; i++){textMetrics.text = model[i]_largestTextWidth = Math.max(textMetrics.width, _largestTextWidth)}}}onModelChanged: _adjustSizeToContents()Component.onCompleted: {_onCompleted = true_adjustSizeToContents()}// The items in the popupdelegate: ItemDelegate {width:  _popupWidth//height: Math.round(popupItemMetrics.height * 1.75)property string _text: control.textRole ? (Array.isArray(control.model) ? modelData[control.textRole] : model[control.textRole]) : modelDataTextMetrics {id:             popupItemMetricsfont:           control.fonttext:           _text}contentItem: Text {text:                   _textfont.pixelSize:         _fontSizefont.family:            "微软雅黑"color:                  control.currentIndex === index ? "#FFFFFF" : "#1A40FF"verticalAlignment:      Text.AlignVCenter}background: Rectangle {radius:          20gradient: T2. Gradient {orientation :Gradient.HorizontalGradientStop { position: 0; color: control.currentIndex === index ?"#1A40FF":"white" }GradientStop { position: 1; color:control.currentIndex === index ? "#5E8EFF":"white" }}}highlighted:                control.highlightedIndex === index}indicator: Image {anchors.rightMargin:    parent.width * 0.05anchors.right:          parent.rightanchors.verticalCenter: parent.verticalCentersource: control.down ? "qrc:/new/Image/TimGeneral_pressarrow.png" : "qrc:/new/Image/pullDown.png"}// The label of the buttoncontentItem: Item {implicitWidth:                  text.implicitWidthimplicitHeight:                 text.implicitHeight//QGCLabel {Label {id:                         textanchors.verticalCenter:     parent.verticalCenteranchors.left:               parent.leftanchors.leftMargin:         parent.width * 0.032text:                      control.currentTextfont.pixelSize:             _fontSizewidth: control.inTextWidthelide:Text.ElideRightcolor:                     control.down? "#1A40FF" : "#3A3A3A"}}background: Rectangle {implicitWidth:      5implicitHeight:     1.6border.color:       control.down? "#508AFF" : "#FFFFFF"border.width:       2color:              control.down? "#FFFFFF" : "#4ceaf1fb"radius:             20layer.enabled:      truelayer.effect:       DropShadow {verticalOffset: 4radius:         10samples:        17color:          "#B2C5E0"}}model: ListModel {id: modelListElement { text: "Banana" }ListElement { text: "Apple" }ListElement { text: "Coconut" }}popup: T.Popup {y:              control.heightwidth:          _popupWidthheight:         Math.min(contentItem.implicitHeight, control.Window.height - topMargin - bottomMargin)topMargin:      6bottomMargin:   6contentItem: ListView {clip:                   trueimplicitHeight:         (inPopHeight===0) ? contentHeight : inPopHeightmodel:                  control.delegateModelcurrentIndex:           control.highlightedIndexhighlightMoveDuration:  0Rectangle {z:              10radius:         20 //20width:          parent.widthheight:         parent.heightcolor:          "transparent"border.width:   2border.color:    "#508AFF"}}//下拉框背景background: Rectangle {radius:         20 //20color:          "white"}}}
}