qml组合框ComboBox
ComboBox填充数据模型，数据模型通常是JavaScript数组，ListModel或者是整数，但是也⽀持其他类型的数据模型。另外，ComboBox还可以编辑
属性
acceptableInput : bool，此属性控制组合框是否包含可编辑⽂本字段中的可接受⽂本
count : int，组合框中的项⽬数
currentIndex : int，保存组合框中当前项的索引，只读
currentText : string，组合框中当前项的⽂本，只读
delegate : Component，包含⼀个委托，该委托在组合框弹出窗⼝中显⽰项⽬
displayText : string，保存组合框按钮上显⽰的⽂本
down : bool，保存组合框按钮是否在视觉上向下
editText : string，指⽰将⽂本保存在可编辑组合框的⽂本字段中
editable : bool，控制组合框是否可编辑
flat : bool，控制组合框按钮是否平坦
highlightedIndex : int，表⽰组合框弹出列表中突出显⽰项的索引，，只读
indicator : Item，包含拖放指⽰器项
inputMethodComposing : bool，表⽰可编辑组合框中是否具有部分⽂本输⼊采⽤某种输⼊⽅法
inputMethodHints : flags，为输⼊法提供有关组合框的预期内容及其操作⽅式的提⽰
model : model，控制着为组合框提供数据的模型
popup : Popup，包含弹出窗⼝
pressed : bool，代表组合框按钮是否以物理的⽅式按下
textRole : string，表⽰⽤于填充组合框的模型⾓⾊
validator : Validator，包含可编辑组合框的输⼊⽂本验证程序
⽅法
void decrementCurrentIndex()
如果弹出列表可见，则递减组合框的当前索引或突出显⽰的索引
int find(string text, flags)
返回指定⽂本的索引，如果未到匹配项，则返回 -1
void incrementCurrentIndex()
如果弹出列表可见，则增加组合框的当前索引或突出显⽰的索引
void selectAll()
选择组合框的可编辑⽂本字段中的所有⽂本
string textAt(int index)
返回指定索引的⽂本，如果索引超出范围，则返回空字符串
信号
void accepted()
在可编辑的组合框上按下 Return 或 Enter 键时会发出此信号。如果输⼊的字符串不在模型中，则将currentIndex 设置为 -1，并且currentText 将相应地更新。注意：如果组合框上设置了 validator，则只有在输⼊处于 acceptable 状态时才会发出信号。
void activated(int index)
⽤户在弹出窗⼝进⾏选择项⽬激活索引处的项⽬时，将发出此信号。
void highlighted(int index)
当弹出列表中索引处的项⽬被⽤户突出显⽰时，将发出此信号
填充整数值的ComboBox
当我们进⾏在弹出窗⼝做出选择时，会触发activated信号，相应的在信号处理函数onActivated中，输出displayText（ComboBox上显⽰的⽂本）
Window {
visible: true
width: 640
height: 480
title: qsTr("test")
color: "gray"
ComboBox{
model:[1,2,3,4,5,6,7,8,9]
onActivated: {
console.log(displayText)
}
}
}
填充ListModel的ComboBox
ComboBox为可编辑，当可编辑的组合框上按下 Return 或 Enter 键时会发出accepted()信号，所以在其信号处理函数中设置将新输⼊的数据添加进模型的末尾。
下图的【Four】【Five】是在ComboBox编辑后按【Enter】键后，在model模型末尾添加了数据
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
Window {
visible: true
width: 640
height: 480
title: qsTr("test")
color: "gray"
ComboBox {
editable: true
model: ListModel {
id: num
ListElement { text: "One" }
ListElement { text: "Two" }
ListElement { text: "Three" }
}
onAccepted: {
if (find(editText) === -1)
num.append({text: editText})
}
}
}
使⽤具有多个命名⾓⾊的模型时，为了显⽰其⽂本和代理实例，必须使⽤特定的 textRole 配置 ComboBox。 如下使⽤了2个命名⾓⾊key和value
Window {
visible: true
width: 640
height: 480
title: qsTr("test")
color: "gray"
ComboBox {
textRole: "key"
model: ListModel {
ListElement { key: "One"; value: 123 }
ListElement { key: "Two"; value: 456 }
qt listview
ListElement { key: "Three"; value: 789 }
}
}
}
⾃定义ComboBox
ComboBox可视项组成：背景项background，内容项contentitem，弹出窗⼝popup，指⽰器indicator和委托项delegate indicator⾃定义需要⽤到画布Canvas进⾏重绘⽐较复杂
Window {
visible: true
width: 640
height: 480
title: qsTr("test")
color: "gray"
ComboBox {
id: control
model: ["One", "Two", "Three"]
delegate: ItemDelegate { //呈现标准视图项以在各种控件和控件中⽤作委托              width: control.width
contentItem: Text {
text: modelData  //即model中的数据
color: "green"
font: control.font
verticalAlignment: Text.AlignVCenter
}
}
contentItem: Text { //界⾯上显⽰出来的⽂字
leftPadding: 5 //左部填充为5
text: control.displayText //表⽰ComboBox上显⽰的⽂本
font: control.font    //⽂字⼤⼩
color: control.pressed ? "orange" : "black"  //⽂字颜⾊
verticalAlignment: Text.AlignVCenter  //⽂字位置
}
background: Rectangle {  //背景项
implicitWidth: 120
implicitHeight: 40
color: "green"
border.width: 1
radius: 2
}
popup: Popup {    //弹出项
y: control.height
width: control.width
implicitHeight: contentItem.implicitHeight
padding: 1
/
/istView具有⼀个模型和⼀个委托。模型model定义了要显⽰的数据
contentItem: ListView {  //显⽰通过ListModel创建的模型中的数据
clip: true
implicitHeight: contentHeight
model: control.popup.visible ? control.delegateModel : null
}
background: Rectangle {
radius: 2
}
}
}
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。