QML ComboBox简介

news/2024/11/7 23:46:19/

1.简介

ComboBox是一个组合按钮和弹出列表。它提供了一种以占用最小屏幕空间的方式向用户显示选项列表的方法。
ComboBox用数据模型填充。数据模型通常是JavaScript数组、ListModel或整数,但也支持其他类型的数据模型。

常用属性:

  • count : int:组合框中的项目数。
  • displayText : string:当前显示的文本
  • currentIndex : int:组合框中当前项目的索引。当 count 为 0 时默认值为 -1,否则默认值为 0。
  • currentText : string:当前项的文本
  • currentValue : string:当前项的值
  • delegate : Component:代理
  • editable : bool:组合框是否可编辑。默认值为false。
  • indicator : Item:指示器项
  • model : model:数据model
  • popup : Popup:弹窗
  • textRole : string:保存用于存储与模型中每个项关联的值的模型角色
  • validator : Validator:可编辑组合框的输入文本验证器。
  • valueRole : string :此属性保存用于存储与模型中每个项关联的值的模型角色

2.示例

示例1:显示基础属性,valueRole和textRole区别,设置model等。

Window {visible: truewidth: 500height: 500title: qsTr("Hello World")ComboBox {textRole: "text"valueRole: "value"width: 100displayText: currentText + 123model: [{ value: 100, text: qsTr("aaa") },{ value: 200, text: qsTr("bbb") },{ value: 300, text: qsTr("ccc") }]onCurrentTextChanged: {console.log("text: ",currentText)}onCurrentValueChanged: {console.log("value: ",currentValue)}}}

打印结果:可以明显看到valueRole和textRole区别。

 示例2:自定义combobox

ComboBox {id: controlmodel: ["First", "Second", "Third"]//针对model项中每一项的绘制delegate: ItemDelegate {width: control.widthcontentItem: Text {text: modelDatacolor: index % 2 ?"red":"blue"  //设置交替色font: control.fontelide: Text.ElideRightverticalAlignment: Text.AlignVCenter}highlighted: control.highlightedIndex === index}//指示器的绘制(上下箭头)indicator: Canvas {id: canvasx: control.width - width - control.rightPaddingy: control.topPadding + (control.availableHeight - height) / 2width: 12height: 8contextType: "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: 0rightPadding: control.indicator.width + control.spacingtext: control.displayTextfont: control.fontcolor: control.pressed ? "red" : "blue"verticalAlignment: Text.AlignVCenter    //居中elide: Text.ElideRight}//控制控件背景的绘制background: Rectangle {implicitWidth: 120implicitHeight: 40color:"yellow"border.color: control.pressed ? "#17a81a" : "#21be2b"border.width: control.visualFocus ? 2 : 1radius: 2}//弹出下拉框,绘制整个下拉控件popup: Popup {y: control.height - 1width: control.widthimplicitHeight: contentItem.implicitHeightpadding: 1contentItem: ListView {clip: trueimplicitHeight: contentHeightmodel: control.popup.visible ? control.delegateModel : nullcurrentIndex: control.highlightedIndexScrollIndicator.vertical: ScrollIndicator { }}background: Rectangle {border.color: "gray"radius: 2layer.enabled: truelayer.effect: DropShadow{//设置弹出框阴影verticalOffset: 3radius: 8samples: 17color: "#80000000"}}}
}


http://www.ppmy.cn/news/31629.html

相关文章

田长制,天空地一体化立体观测体系

目录 田长制 (二)明确田长设置和职责分工 1. 田长设置 2. 田长职责

[C/C++]_[初级]_[声明和使用字符串常量和字节常量]

场景 我们需要存储常量的字节数组,并且数组里的字节数据可以是任意数值0-255。怎么存储? 说明 任意字节数组可以使用char或者unsigned char作为数据类型。比如以下的字符串声明。这种字符串数据可以通过strlen(buf)来计算它的长度,它会遇到…

只能用初始化列表,而不能使用赋值的情况 一般有以下4种

当类中含有const、reference 成员变量&#xff1b;基类的构造函数 都需要初始化列表。 1. 类成员为const类型 2. 类成员为引用类型 复制代码 #include <iostream> using namespace std; class A { public: A(int &v) : i(v), p(v), j(v) {} …

java对象的创建与内存分配机制

文章目录对象的创建与内存分配机制对象的创建类加载检查分配内存初始化零值设置对象头指向init方法其他&#xff1a;指针压缩对象内存分配对象在栈上分配对象在Eden区中分配大对象直接分配到老年代长期存活的对象进入老年代对象动态年龄判断老年代空间分配担保机制对象的内存回…

什么是UEFI签名认证?UEFI签名有什么好处?

为了防御恶意软件攻击&#xff0c;目前市面上所有电脑设备启动时默认开启安全启动(Secure Boot)模式。安全启动(Secure Boot)是UEFI扩展协议定义的安全标准&#xff0c;可以确保设备只使用OEM厂商信任的软件启动。UEFI签名认证就是对运行在 UEFI 系统下的 efi 驱动和通过 UEFI …

每天学一点之注解、元注解

注解 1、注解概述 定义&#xff1a; 注解&#xff08;Annotation&#xff09;&#xff0c;也叫元数据。与类、接口、枚举是在同一个层次。它可以声明在包、类、字段、方法、局部变量、方法参数等的前面&#xff0c;用来对这些元素进行说明&#xff0c;注释。 作用分类&#…

Windows7,10使用:Vagrant+VirtualBox 安装 centos7

一、Vagrant&#xff0c;VirtualBox 是什么二、版本说明1、win7下建议安装版本2、win10下建议安装版本三、Windows7下安装1、安装Vagrant2、安装VirtualBox3、打开VirtualBox&#xff0c;配置虚拟机默认安装地址四、windows7下载.box文件&#xff0c;安装centos 71、下载一个.b…

Cobalt Strike---(2)

数据管理 Cobalt Strike 的团队服务器是行动期间Cobalt Strike 收集的所有信息的中间商。Cobalt Strike 解析来 自它的 Beacon payload 的输出&#xff0c;提取出目标、服务和凭据。 如果你想导出 Cobalt Strike 的数据&#xff0c;通过 Reporting → Export Data 。Cobalt Str…