Combobox for QT Quick Controls 2

                                                        Properties

acceptableInput : bool

count : int //组合框中的数量

currentIndex : int //当前索引

currentText : string //当前项的文本

delegate : Component //委托

displayText : string //文本string显示在组合框中

down : bool //是否为下拉

editText : string //可编辑组合框的文本字段中的文本

editable : bool //编辑框字段是否可编辑（默认false）

flat : bool //按钮框是否为平面

highlightedIndex : int //突出显示项的索引

indicator : Item //下拉指示器项

inputMethodComposing : bool //可编辑组合框是否具有输入方法的部分文本输入

inputMethodHints : flags //为输入提供模板（预期内容）

model : model //数据模型

popup : Popup //弹出窗口

pressed : bool //是否按下按下组合框按钮

textRole : string //填充组合框模型角色

validator : Validator //可编辑组合框的输入文本验证器

import QtQuick 2.6

import QtQuick.Controls 2.1

ComboBox {

id: control

model: ["First", "Second", "Third"]

delegate: ItemDelegate {

width: control.width

contentItem: Text {

text: modelData

color: "#21be2b"

font: control.font

elide: Text.ElideRight

verticalAlignment: Text.AlignVCenter

}

highlighted: control.highlightedIndex === index

}

indicator: Canvas {

id: canvas

x: control.width - width - control.rightPadding

y: control.topPadding + (control.availableHeight - height) / 2

width: 12

height: 8

contextType: "2d"

Connections {

target: control

onPressedChanged: canvas.requestPaint()

}

onPaint: {

context.reset();

context.moveTo(0, 0);

context.lineTo(width, 0);

context.lineTo(width / 2, height);

context.closePath();

context.fillStyle = control.pressed ? "#17a81a" : "#21be2b";

context.fill();

}

}

contentItem: Text {

leftPadding: 0

rightPadding: control.indicator.width + control.spacing

text: control.displayText

font: control.font

color: control.pressed ? "#17a81a" : "#21be2b"

horizontalAlignment: Text.AlignLeft

verticalAlignment: Text.AlignVCenter

elide: Text.ElideRight

}

background: Rectangle {

implicitWidth: 120

implicitHeight: 40

border.color: control.pressed ? "#17a81a" : "#21be2b"

border.width: control.visualFocus ? 2 : 1

radius: 2

}

popup: Popup {

y: control.height - 1

width: control.width

implicitHeight: contentItem.implicitHeight

padding: 1

contentItem: ListView {

clip: true

implicitHeight: contentHeight

model: control.popup.visible ? control.delegateModel : null

currentIndex: control.highlightedIndex

ScrollIndicator.vertical: ScrollIndicator { }

}

background: Rectangle {

border.color: "#21be2b"

radius: 2

}

}

}