QML ComboBox简介

news2024/11/26 11:43:22

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: true
    width: 500
    height: 500
    title: qsTr("Hello World")

    ComboBox {
        textRole: "text"
        valueRole: "value"
        width: 100
        displayText: currentText + 123
        model: [
            { 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: control
    model: ["First", "Second", "Third"]

    //针对model项中每一项的绘制
    delegate: ItemDelegate {
        width: control.width
        contentItem: Text {
            text: modelData
            color: index % 2 ?"red":"blue"  //设置交替色
            font: control.font
            elide: Text.ElideRight
            verticalAlignment: Text.AlignVCenter
        }
        highlighted: control.highlightedIndex === index
    }

    //指示器的绘制(上下箭头)
    indicator: Canvas {
        id: canvas
        x: control.width - width - control.rightPadding
        y: control.topPadding + (control.availableHeight - height) / 2
        width: 12
        height: 8
        contextType: "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
        rightPadding: control.indicator.width + control.spacing

        text: control.displayText
        font: control.font
        color: control.pressed ? "red" : "blue"
        verticalAlignment: Text.AlignVCenter    //居中
        elide: Text.ElideRight
    }

    //控制控件背景的绘制
    background: Rectangle {
        implicitWidth: 120
        implicitHeight: 40
        color:"yellow"
        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

        contentItem: ListView {
            clip: true
            implicitHeight: contentHeight
            model: control.popup.visible ? control.delegateModel : null
            currentIndex: control.highlightedIndex

            ScrollIndicator.vertical: ScrollIndicator { }
        }

        background: Rectangle {
            border.color: "gray"
            radius: 2
            layer.enabled: true
            layer.effect: DropShadow{//设置弹出框阴影
                verticalOffset: 3
                radius: 8
                samples: 17
                color: "#80000000"
            }
        }
    }
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/401065.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

R语言基础(四):数据类型

R语言基础(一):注释、变量 R语言基础(二):常用函数 R语言基础(三):运算 5.数据类型 5.1 基本数据类型 R语言基本数据类型大致有六种: 整数Integer、浮点数Numeric、文本(字符串)Character、逻辑(布尔)Logical、复合类型Complex、…

基于Docker快速搭建蜜罐Dionaea(30)

实验目的 1. 快速搭建Dionaea蜜罐 2. 使用Nmap扫描测试Dionaea蜜罐预备知识1. 初步认识Dionaea dionaea,中文的意思即捕蝇草,是否形容蜜罐很形象?dionaea是nepenthes(猪笼草)的发展和后续,更加容易被部署和…

华大单片机、STM32单片机如何做printf串口打印格式化输出

第一种方法:使用标准C库,但使用标准C库你必须关闭半主机模式(1)添加下面代码就是关闭半主机模式/* 告知连接器不从C库链接使用半主机的函数 */ #pragma import(__use_no_semihosting)/* 定义 _sys_exit() 以避免使用半主机模式 */…

【项目日志】电商后台管理项目日志

技巧 对脚手架框架的梳理 使用脚手架建立项目后默认初始页面非空白,可以自行设置成空白页,将app.vue中的内容和样式清空即可router中的不必要的路由设置可以清除 如何右键打开powershell? 按住shift在空白处单击右键(win10和2…

一个故事看懂CPU的SIMD技术

好久不见,我叫阿Q,是CPU一号车间的员工。我所在的CPU有8个车间,也就是8个核心,咱们每个核心都可以同时执行两个线程,就是8核16线程,那速度杠杠滴。 我所在的一号车间,除了负责执行指令的我&…

蓝牙5.4出来了,实现单个接入点与数千个终端节点双向通讯

蓝牙技术联盟最近发布了蓝牙5.4的核心规范,蓝牙5.4规范的主要改进之一就是实现了单个接入点与数千个终端节点进行双向无连接通信, 这一特性主要是针对电子货架标签市场。蓝牙5.4有哪些改进和新功能?蓝牙技术联盟最近发布了蓝牙5.4的核心规范&…

保姆级使用PyTorch训练与评估自己的EVA网络教程

文章目录前言0. 环境搭建&快速开始1. 数据集制作1.1 标签文件制作1.2 数据集划分1.3 数据集信息文件制作2. 修改参数文件3. 训练4. 评估5. 其他教程前言 项目地址:https://github.com/Fafa-DL/Awesome-Backbones 操作教程:https://www.bilibili.co…

【大数据处理与可视化】二 、Numpy科学计算库

【大数据处理与可视化】一 、大数据分析环境搭建(安装 Anaconda 3 开发环境)实验目的实验内容实验步骤1、创建一个值域范围从10到49的向量。2、创建一个 3x3 并且值从0到8的矩阵。3、创建一个 3x3 的单位矩阵。4、创建一个数组,数组的shape为…

第十四届蓝桥杯三月真题刷题训练——第 7 天

目录 第 1 题:三角回文数 问题描述 答案提交 运行限制 代码: 第 2 题:数数 问题描述 答案提交 运行限制 代码: 第 3 题:倍数问题_同余定理_分情况讨论 题目描述 输入描述 输出描述 输入输出样例 运行限…

Azure Portal 访问安全性增强

Azure Portal 访问安全性增强客户需求如何设置账号(包括Admin)定期修改密码,例如强制每90天必须修改密码如何设定账号密码的复杂性要求如何设定限制访问Azure Portal的源IP Address客户需求 为了增强访问Azure Portal的安全性,希…

JavaWeb--ListenerAjaxaxiosjson

Listener&Ajax&axios1 Listener1.1 概述1.2 分类1.3 代码演示2 Ajax2.1 概述2.1.1 作用2.1.2 同步和异步2.2 快速入门2.2.1 服务端实现2.2.2 客户端实现2.2.3 测试2.3 案例2.3.1 分析2.3.2 后端实现2.3.3 前端实现2.4 测试3 axios3.1 基本使用3.2 快速入门3.2.1 后端实…

32*4VKL128 LQFP44超低功耗/超低工作电流/抗干扰LCD液晶段码驱动IC/LCD驱动芯片(IC) 适用于激光/红外线测距仪

产品型号:VKL128产品品牌:永嘉微电/VINKA封装形式:LQFP44产品年份:新年份原厂,工程服务,技术支持!VKL128概述:VKL128是一个点阵式存储映射的LCD驱动器,可支持最大128点(3…

BSN-DDC基础网络详解(五):接入DDC网络(1)

BSN-DDC基础网络推出已经一年了,得到了行业应用方和广大开发者的高度认可。一年中BSN产品技术团队也在根据市场业务需求不断更新功能服务,我们将通过本系列文章为大家系统化介绍DDC网络的功能和使用,为感兴趣的朋友提供学习帮助。01支持DDC的…

PACS系统源码 PACS源码 三维重建PACS源码

一、系统概述: ​基于VC MSSQL开发的一套三甲医院医学影像PACS系统源码,集成3D影像后处理功能,包括三维多平面重建、三维容积重建、三维表面重建、三维虚拟内窥镜、最大/小密度投影、心脏动脉钙化分析等功能。系统功能强大,代码…

pcx文件丢失原因和三种恢复方法

你是否在使用设备过程中出现pcx文件丢失现象呢?对于丢失的pcx文件你是如何恢复的呢?您可以尝试本文推荐的三种方法。关于pcx格式文件pcx是一种图像文件格式,是由ZSOFT公司开发的经过压缩、支持256种彩色的图像文件格式,pcx是在pc机…

无线网络设置

5.在广州分公司的内网创建无线的 SSID 为 Test-GZ_XX(XX 现场提供),WLAN ID 为 1,AP-Group 为 GZ。在吉林分公司的内网中创建无线 SSID 为 Test-JL_XX(XX 现场提供),WLAN ID 为 2,AP-Group 为 JL。在北京总部内网 中创建无线的 SS…

NoneBot2,基于Python的聊天机器人

NoneBot2,基于Python的聊天机器人第一步,配置python第二步,配置[go-cqhttp](https://github.com/Mrs4s/go-cqhttp)第三步,配置[NoneBot](https://61d3d9dbcadf413fd3238e89--nonebot2.netlify.app/)NoneBot2 是一个现代、跨平台、…

日读300篇文献的技巧

感觉自己看文章很慢,有时候也抓不住重点。 如果是英文文献的话,可能还要有点难度,毕竟英语渣渣还是需要有中文-》英文的转换过程。 最近在搞毕业论文的时候,发现了一个非常好玩的东西,大大提升了我看文章搞科研&#x…

idea maven:Unable to import maven project /idea maven工程加载报错

文章目录前言一、报错截图二、设置maven三、更换maven版本前言 idea工具中导入maven工程有时候会遇到Unable to import maven project的报错,并且pom依赖中的依赖包没有加载出来,这里总结一下我遇到的问题与解决方法。 系统环境:jdk 1.8 m…

Docker的可视化界面工具

Docker的可视化界面工具1. Portainer1.1 Introduction1.1.1 Official1.2 Download And Deploy1.3 Dashboard1.3.1 Dashboard2. Shipyard2.1 Introduction2.1.1 Character2.1.2 Official2.2 Download And Deploy2.2.1 脚本下载镜像2.2.2 执行脚本2.2.2 查看下载的镜像2.3 Dashbo…