QML_组合框ComboBox

QML_组合框ComboBox

ComboBox的属性:
1、acceptableInput : bool，此属性控制组合框是否包含可编辑文本字段中的可接受文本
2、count : int，组合框中的项目数
3、currentIndex : int，保存组合框中当前项的索引，只读
4、currentText : string，组合框中当前项的文本，只读
5、delegate : Component，包含一个委托，该委托在组合框弹出窗口中显示项目
6、displayText : string，保存组合框按钮上显示的文本
7、down : bool，保存组合框按钮是否在视觉上向下
8、editText : string，指示将文本保存在可编辑组合框的文本字段中
9、editable : bool，控制组合框是否可编辑
10、flat : bool，控制组合框按钮是否平坦
11、highlightedIndex : int，表示组合框弹出列表中突出显示项的索引，，只读
12、indicator : Item，包含拖放指示器项
13、inputMethodComposing : bool，表示可编辑组合框中是否具有部分文本输入采用某种输入方法
14、inputMethodHints : flags，为输入法提供有关组合框的预期内容及其操作方式的提示
15、model : model，控制着为组合框提供数据的模型
16、popup : Popup，包含弹出窗口
17、pressed : bool，代表组合框按钮是否以物理的方式按下
18、textRole : string，表示用于填充组合框的模型角色
19、validator : Validator，包含可编辑组合框的输入文本验证程序
信号：
void accepted()
在可编辑的组合框上按下 Return 或 Enter 键时会发出此信号。如果输入的字符串不在模型中，则将currentIndex 设置为 -1，并且 currentText 将相应地更新。注意：如果组合框上设置了 validator，则只有在输入处于 acceptable 状态时才会发出信号。
void activated(int index)
用户在弹出窗口进行选择项目激活索引处的项目时，将发出此信号。
void highlighted(int index)
当弹出列表中索引处的项目被用户突出显示时，将发出此信号
方法：
void decrementCurrentIndex()
如果弹出列表可见，则递减组合框的当前索引或突出显示的索引
int find(string text, flags)
返回指定文本的索引，如果未找到匹配项，则返回 -1
void incrementCurrentIndex()
如果弹出列表可见，则增加组合框的当前索引或突出显示的索引
void selectAll()
选择组合框的可编辑文本字段中的所有文本
string textAt(int index)
返回指定索引的文本，如果索引超出范围，则返回空字符串

填充整数值的ComboBox
先来一个最简单的模型是整数值的Combobox

Window {
    id: window
    visible: true
    width: 800
    height: 480
    title: qsTr("Hello World")

    ComboBox {
        anchors.centerIn: parent
        model: [1, 2, 3, 4, 5, 6, 7, 8, 9]

        onActivated: {
            console.log(displayText)
        }
    }
}

填充ListModel的ComboBox
设置ComboBox为可编辑，当可编辑的组合框上按下 Return 或 Enter 键时会发出accepted()信号，所以在其信号处理函数中设置将新输入的数据添加进模型的末尾

Window {
    id: window
    visible: true
    width: 800
    height: 480
    title: qsTr("Hello World")

    ComboBox {
        editable: true  //运行自定义编辑
        anchors.centerIn: parent
        model: ListModel {
            id: num
            ListElement {
                text: "One"
            }
            ListElement {
                text: "Two"
            }
            ListElement {
                text: "Three"
            }
        }
        onAccepted: {  //当在editable: true设置为true时，可以在框中自己编辑，点击回车键后发生的事件
            if (find(editText) === -1)
                num.append({
                               "text": editText
                           })
        }

        onActivated: {  //重新选择是发生的事件
            console.log(displayText)
        }
    }
}

自定义ComboBox
ComboBox的可视化项由背景项background,内容项contentitem，弹出窗口popup，指示器indicator和委托项delegate组成。我们下面给出的例程中并未对indicator项进行定义

Window {
    id: window
    visible: true
    width: 800
    height: 480
    title: qsTr("Hello World")

    ComboBox {
        anchors.centerIn: parent
        id: control
        textRole: qsTr("")
        editable: false
        transformOrigin: Item.Center
        font.weight: Font.Normal
        model: ["One", "Two", "Three"]
        delegate: ItemDelegate {
            width: control.width
            contentItem: Text {
                text: modelData
                color: "green"
                font: control.font
                verticalAlignment: Text.AlignVCenter
            }
        }
        contentItem: Text {
            leftPadding: 5
            text: control.displayText
            font: control.font
            color: control.pressed ? "orange" : "black"
            verticalAlignment: Text.AlignVCenter
        }
        background: Rectangle {
            implicitWidth: 120
            implicitHeight: 40
            color: "green"
            border.width: 1
            radius: 5
        }
        popup: Popup {
            y: control.height
            width: control.width
            implicitHeight: contentItem.implicitHeight
            padding: 1
            contentItem: ListView {
                clip: true
                implicitHeight: contentHeight
                model: control.popup.visible ? control.delegateModel : null
            }
            background: Rectangle {
                border.color: "green"
                radius: 5
            }
        }
        onActivated: {
            console.log(displayText)
        }
    }
}