QML自定义ComboBox组件,支持动态筛选

news2024/10/7 18:22:15

        QtQuick.Controls提供了ComboBox组件,该组件能够满足日常的下拉选择框的需求,但当需要用户在ComboBox中通过输入关键字进行自动匹配时,原生的组件虽然提供了editable属性用于输入关键字,但是匹配内容不弹出下拉框,无法动态筛选。自定义的ComboBox组件筛选效果:

组件新增属性:

bool filterAble : 是否动态筛选,当为false时用户无法输入且不弹出筛选框
int indicatorPadding : 下拉箭头距离右边缘
int popupHeight : 下拉框高度
color popupColor : 下拉框颜色
color textColor  : 显示字体颜色

        代码较为简单,主要是实现操作逻辑过程,完整的测试Demo如下(免积分):

QML自定义ComboBox组件Demoicon-default.png?t=N7T8https://download.csdn.net/download/zjgo007/88800367组件使用方法:

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls.Material 2.3

Window {
    width: 420
    height: 260
    visible: true
    color: "#191313"
    title: qsTr("MyComboBox")

    MyComboBox{
        x:10
        y:10
        width:120
        height:40
        model:["直升机","B2","B52","F16","F22","全球鹰"]
        filterAble: true
        onCurrentTextChanged: {
            logText.text = currentText
        }
    }
    Text{
        height:40
        x:150
        y:10
        color:"ghostwhite"
        font.bold: true
        font.family: "微软雅黑"
        text:"当前选中:"
        verticalAlignment: Text.AlignVCenter
    }

    Text{
        id:logText
        x:240
        y:10
        height:40
        color:"#38d3dc"
        font.bold: true
        font.family: "微软雅黑"
        verticalAlignment: Text.AlignVCenter
    }
}

组件MyComboBox.qml代码:

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Controls.Material 2.3

ComboBox {
    id:comboBox
    width: 90
    height: 36
    leftPadding: 5
    rightPadding: 20
    property bool filterAble : false
    property int indicatorPadding:5
    property int popupHeight: 260
    property color popupColor: "#e63f3f3f"
    property color textColor : "#38d3dc"

    Material.accent: "#38d3dc"
    Material.foreground: "#38d3dc"
    Material.background: "#6638d3dc"
    font.bold: true
    font.pointSize: 9
    font.family: "微软雅黑"
    popup.font.pointSize: 9
    popup.leftPadding: 0
    popup.height: popupHeight
    popup.font.bold: true
    popup.font.family: "微软雅黑"
    popup.background: Rectangle{
        color: popupColor
    }
    contentItem: TextInput {
        id:contentText
        clip: true
        text: comboBox.displayText
        font: comboBox.font
        color: textColor
        verticalAlignment: Text.AlignVCenter
        selectByMouse: true
        readOnly: !filterAble
        onTextEdited:{
            dataFilter(text)
        }
    }
    indicator: Canvas {
        id: canvas
        x: comboBox.width - width - indicatorPadding
        y: comboBox.topPadding + (comboBox.availableHeight - height) / 2
        width: 8
        height: 6
        contextType: "2d"

        Connections {
            target: comboBox
            function onPressedChanged() { canvas.requestPaint(); }
        }

        onPaint: {
            context.reset();
            context.moveTo(0, 0);
            context.lineTo(width, 0);
            context.lineTo(width / 2, height);
            context.closePath();
            context.fillStyle = textColor;
            context.fill();
        }
    }
    onCurrentTextChanged: {
        contentText.text = currentText
    }


    Popup {
        id: popupFilter
        width: parent.width
        height: popupHeight
        y:parent.height
        background: Rectangle{
            color: popupColor
        }

        contentItem: ListView {
            id: filterListView

            anchors.fill: parent
            clip: true
            highlight: Rectangle {color: "#6638d3dc"; radius: 5 }
            delegate: Item{
                width: popupFilter.width
                height: 30
                clip: true
                Row{
                    anchors.fill: parent
                    anchors.left: parent.left
                    anchors.leftMargin: 10
                    anchors.right:parent.right
                    anchors.rightMargin: 10
                    spacing: 10
                    Text {
                        height:30
                        text: modelData
                        anchors.verticalCenter: parent.verticalCenter
                        font.family: "微软雅黑"
                        font.pixelSize: 13
                        verticalAlignment: Text.AlignVCenter
                        color: "ghostwhite"
                        font.bold: true
                    }
                }



                MouseArea{
                    anchors.fill: parent
                    hoverEnabled: true
                    onEntered: {
                        filterListView.currentIndex = index
                    }

                    onClicked: {
                        var index = comboBox.find(modelData)
                        currentIndex = index
                        popupFilter.close()
                    }
                }
            }
        }
    }

    function dataFilter(filter){
        popupFilter.open()
        var filterList = []
        for(var i in comboBox.model){
            var modelData = comboBox.model[i]
            if(String(modelData).indexOf(filter) != -1){
                filterList.push(modelData)
            }
        }
        filterListView.model = filterList
    }
}

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

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

相关文章

winform冒泡排序和快速排序实现

winform冒泡排序和快速排序实现 冒泡排序和快速排序是两种常用的排序算法,可以在Winform程序中实现以提高排序效率。冒泡排序是一种简单但效率较低的排序算法,它通过相邻元素间的比较和交换来实现排序。它的基本思想是每一轮比较相邻两个元素的大小&…

浅析Redis③:命令处理之数据返回Client(下)

写在前面 Redis作为我们日常工作中最常使用的缓存数据库,其重要性不言而喻,作为普通开发者,我们在日常开发中使用Redis,主要聚焦于Redis的基层数据结构的命令使用,很少会有人对Redis的内部实现机制进行了解&#xff0c…

YOLOv8-Segment C++

YOLOv8-Segment C https://github.com/triple-Mu/YOLOv8-TensorRT 这张图像是运行yolov8-seg程序得到的结果图,首先是检测到了person、bus及skateboard(这个是检测错误,将鞋及其影子检测成了滑板,偶尔存在错误也属正常),然后用方…

4D毫米波雷达——ADCNet 原始雷达数据 目标检测与可行驶区域分割

前言 本文介绍使用4D毫米波雷达,基于原始雷达数据,实现目标检测与可行驶区域分割,它是来自2023-12的论文。 会讲解论文整体思路、输入分析、模型框架、设计理念、损失函数等,还有结合代码进行分析。 论文地址:ADCNe…

Flink实时数仓同步:快照表实战详解

一、背景 在大数据领域,初始阶段业务数据通常被存储于关系型数据库,如MySQL。然而,为满足日常分析和报表等需求,大数据平台采用多种同步方式,以适应这些业务数据的不同存储需求。这些同步存储方式包括离线仓库和实时仓…

nvm 工具使用介绍

目录 1.背景2.nvm介绍3.下载和安装4.配置环境变量5.配置淘宝镜像5.1 方式一:直接执行命令5.2 方式二:修改配置文件 6.常用命令7.总结 下载地址: https://github.com/coreybutler/nvm-windows/releases 1.背景 在工作中,我们可能…

总分类账户和明细分类账户

目录 一. 设置二. 联系与区别三. 平行记账规则 \quad 一. 设置 \quad 根据总分类科目设置总分类账户 根据明细分类科目设置明细分类账户 \quad 二. 联系与区别 \quad \quad 三. 平行记账规则 \quad

【C++11(一)】列表初始化and右值引用

一、 统一的列表初始化 1.1 {}初始化 在C98中,标准允许 使用花括号{}对数组或者结构体元素 进行统一的列表初始值设定 C11扩大了用大括号 括起的列表(初始化列表)的使用范围 使其可用于所有的内置类型和 用户自定义的类型 使用初始化列表时…

bash脚本学习笔记

一、扫盲 脚本文件是一种文本文件,其中包含了一系列的命令和指令,可以被操作系统解释器直接解释执行。脚本文件通常被用来完成特定的任务或执行重复性的操作。 脚本文件通常以某种编程语言的语法编写,例如 Bash、Python、Perl、Ruby 等等。…

IDEA JDBC配置

一、在pom中添加依赖 <dependencies><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>8.0.33</version></dependency></dependencies> 然后同步一下 二、编写代码…

Linux 系统服务

一、CentOS 6 与 CentOS 7开机流程 1.CentOS 6 1.1.打开电源首先通过内核引导开机。 1.2.开机自检&#xff0c;加载 BIOS 硬件信息。 1.3.MBR 记录一般是在磁盘0磁道0扇区&#xff0c;共512个字节。前446个字节是 BootLoder。计算机不知道我们的系统在哪里&#xff0c;所以需…

【Java数据结构】模拟实现ArrayList

import java.util.Arrays;/*** ArrayList的模拟实现*/ class SeqList{private int[] elem;private int usedSize0;//记录当前顺序表有多少个有效数字public static final int DEFAULT_CAPACITY10;//默认大小是10public SeqList(){this.elemnew int[DEFAULT_CAPACITY];}//新增元…

基于FFT + CNN -Transformer时域、频域特征融合的电能质量扰动识别模型

目录 往期精彩内容&#xff1a; ​模型整体结构 1 快速傅里叶变换FFT原理介绍 第一步&#xff0c;导入部分数据&#xff0c;扰动信号可视化 第二步&#xff0c;扰动信号经过FFT可视化 2 电能质量扰动数据的预处理 2.1 导入数据 2.2 制作数据集 3 基于FFTCNN-Transform…

服务攻防-端口协议桌面应用QQWPS等RCEhydra口令猜解未授权检测

知识点&#xff1a; 1、端口协议-弱口令&未授权&攻击方式等 2、桌面应用-社交类&文档类&工具类等 章节点&#xff1a; 1、目标判断-端口扫描&组合判断&信息来源 2、安全问题-配置不当&CVE漏洞&弱口令爆破 3、复现对象-数据库&中间件&…

AS-V1000产品介绍:支持GA/T1400视图库标准(可通过GA/T1400接入海康、华为、大华等图传前端设备,实现图传功能)

目 录 一、概述 二、AS-V1000视频监控管理平台的特点 二、视频监控平台通过GA/T1400接入前端设备 &#xff08;一&#xff09;接入华为GA/T1400前端设备 &#xff08;二&#xff09;接入大华GA/T1400前端设备 &#xff08;三&#xff09;接入海康威视GA/…

QML ListView 列表视图

作者: 一去、二三里 个人微信号: iwaleon 微信公众号: 高效程序员 虽然 Repeater 在重复创建多个相似项的时候很方便,但是通常只适用于有限的简单元素,并且它还无法滚动浏览。而基于 Flickable 的视图组件(如 GridView、ListView、TableView、TreeView 等)则弥补了这些缺…

vue-3d-model

vue-3d-model - npm GitHub - hujiulong/vue-3d-model: &#x1f4f7; vue.js 3D model viewer component 通过该插件降低Threejs的使用难度 vue项目加载三维模型&#xff0c;我把模型放在了服务器的tomcat里面&#xff0c;需要对tomcat的fbx项目文件夹设置跨域&#xff0c;如…

Docker容器引擎(5)

目录 一.docker-compose docker-compose的三大概念&#xff1a; yaml文件格式&#xff1a; json文件格式&#xff1a; docker-compose 配置模板文件常用的字段&#xff1a; 二.Docker Compose 环境安装&#xff1a; 查看版本&#xff1a; 准备好nginx 的dockerfile的文…

微信小程序(三十一)本地同步存储API

注释很详细&#xff0c;直接上代码 上一篇 新增内容&#xff1a; 1.存储数据 2.读取数据 3.删除数据 4.清空数据 源码&#xff1a; index.wxml <!-- 列表渲染基础写法&#xff0c;不明白的看上一篇 --> <view class"students"><view class"item…

银行数据仓库体系实践(16)--数据应用之财务分析

总账系统 在所有公司中&#xff0c;财务分析的基础都是核算&#xff0c;那在银行的系统体系中&#xff0c;核算功能在业务发生时由业务系统如核心、贷款、理财中实现登记&#xff0c;各业务系统会在每天切日后统计当天各机构的核算科目的发生额与余额&#xff0c;并统一送到总账…