ComboBox 详解：

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

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

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

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

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

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

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

例子1

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

例子2

// 使用 pragma ComponentBehavior: Bound 来声明组件的行为范围// 导入所需的 QtQuick 库和控件库
import QtQuick
import QtQuick.Controls// 定义一个 ComboBox 控件
ComboBox {id: control // 指定 id 为 controlmodel: ["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: controlfunction 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 // 左边距为 0rightPadding: 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// 弹出框的内容项为 ListViewcontentItem: 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 // 圆角半径}}
}