在 QML 中，ComboBox 是一种常用的用户界面控件，通常用于提供一个下拉式的选择框，允许用户从预定义的选项列表中选择一个值_qml 下拉框

ComboBox 详解：

以下是 ComboBox 的一些重要属性和特性：

• model: 用于指定 ComboBox 中的选项列表，可以是一个数组、列表、模型或者其他可迭代的数据结构。

• editable: 用于指定是否允许用户编辑 ComboBox 中的文本输入框，以便输入非预定义的选项。

• currentIndex: 用于获取或设置当前选中项的索引位置。

• currentText: 用于获取或设置当前选中项的文本内容。

• onActivated: 用于定义当用户选择了下拉框中的某一项时触发的事件处理。

ComboBox 提供了一种简单而直观的方式来让用户从一组选项中进行选择，同时也支持用户自定义输入。

例子1

ComboBox {
    id: comboBox // 定义一个 ComboBox 控件，并指定 id 为 comboBox
    model: ["Apple", "Banana", "Orange"] // 设置下拉框的模型为一个字符串数组
    editable: true // 允许用户编辑输入框
    onActivated: { // 当用户选择了下拉框中的某一项时触发的事件处理
        console.log("Selected fruit:", currentText) // 打印当前选中项的文本内容
    }
}
1
2
3
4
5
6
7
8

例子2

// 使用 pragma ComponentBehavior: Bound 来声明组件的行为范围

// 导入所需的 QtQuick 库和控件库
import QtQuick
import QtQuick.Controls

// 定义一个 ComboBox 控件
ComboBox {
    id: control // 指定 id 为 control
    model: ["First", "Second", "Third"] // 设置下拉框的模型为一个包含三个选项的字符串数组

    // 定义下拉框中的每个选项的外观和行为
    delegate: ItemDelegate {
        id: delegate // 每个选项的代理

        required property var model // 必需属性，用于指定模型
        required property int index // 必需属性，用于指定索引位置

        width: control.width // 设置代理的宽度为下拉框的宽度
        contentItem: Text { // 代理的内容为文本
            text: delegate.model[control.textRole] // 设置文本内容为模型中对应位置的值
            color: "#21be2b" // 文本颜色为绿色
            font: control.font // 使用下拉框的字体
            elide: Text.ElideRight // 文本过长时显示省略号
            verticalAlignment: Text.AlignVCenter // 文本垂直居中
        }
        highlighted: control.highlightedIndex === index // 当代理被选中时高亮显示
    }

    // 自定义下拉框的指示器
    indicator: Canvas {
        id: canvas // 定义 Canvas 控件作为指示器
        x: control.width - width - control.rightPadding // 指示器的 x 坐标位置
        y: control.topPadding + (control.availableHeight - height) / 2 // 指示器的 y 坐标位置
        width: 12 // 指示器的宽度
        height: 8 // 指示器的高度
        contextType: "2d" // 指定上下文类型为 2D

        // 监听控件的按下状态变化，请求重新绘制指示器
        Connections {
            target: control
            function 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 // 左边距为 0
        rightPadding: control.indicator.width + control.spacing // 右边距包括指示器的宽度和下拉框的间距

        text: control.displayText // 显示文本为下拉框的显示文本
        font: control.font // 使用下拉框的字体
        color: control.pressed ? "#17a81a" : "#21be2b" // 按下时颜色变化
        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 // 内边距为 1

        // 弹出框的内容项为 ListView
        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 // 圆角半径
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102