ComboBox 详解：
以下是 ComboBox 的一些重要属性和特性：
-
model: 用于指定 ComboBox 中的选项列表，可以是一个数组、列表、模型或者其他可迭代的数据结构。
-
editable: 用于指定是否允许用户编辑 ComboBox 中的文本输入框，以便输入非预定义的选项。
-
currentIndex: 用于获取或设置当前选中项的索引位置。
-
currentText: 用于获取或设置当前选中项的文本内容。
-
onActivated: 用于定义当用户选择了下拉框中的某一项时触发的事件处理。文章来源：https://www.toymoban.com/news/detail-852539.html
ComboBox 提供了一种简单而直观的方式来让用户从一组选项中进行选择，同时也支持用户自定义输入。文章来源地址https://www.toymoban.com/news/detail-852539.html
例子1
ComboBox {
id: comboBox // 定义一个 ComboBox 控件，并指定 id 为 comboBox
model: ["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 为 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 // 圆角半径
}
}
}
到了这里，关于在 QML 中，ComboBox 是一种常用的用户界面控件，通常用于提供一个下拉式的选择框，允许用户从预定义的选项列表中选择一个值的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
