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

        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
    }
}

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

2024年美赛数学建模D题思路分析 - 大湖区水资源问题

# 1 赛题 问题D:大湖区水资源问题 背景 美国和加拿大的五大湖是世界上最大的淡水湖群。这五个湖泊和连接的水道构成了一个巨大的流域,其中包含了这两个国家的许多大城市地区,气候和局部天气条件不同。 这些湖泊的水被用于许多用途&#xff…

《Pandas 简易速速上手小册》第8章:Pandas 高级数据分析技巧(2024 最新版)

文章目录 8.1 使用 apply 和 map 函数8.1.1 基础知识8.1.2 重点案例:客户数据清洗和转换8.1.3 拓展案例一:产品评分调整8.1.4 拓展案例二:地址格式化 8.2 性能优化技巧8.2.1 基础知识8.2.2 重点案例:大型销售数据分析8.2.3 拓展案…

Python之数据分析

【案例】 某公司有2份数据文件,现在需要对其进行数据分析,计算每日的销售额并以柱状图表的形式进行展现。 数据如下: 一月份数据: 二月份数据: 需求分析 根据题目要求我们要得到每日销售额,分析文本数据可以…

一些你可能用到的头文件和函数

1. gets 函数和 fgets 函数。 两者功能相似,都是输入 char 型 字符,但是格式和稳定性有所差别。前者gets稳定性较弱,但是用法简单,格式如下: 现在一些工程都用 fgets 函数,因为它的强大的稳定性&#xff0…

玩转全新nova12系列熄屏显示,做最潮nova星人!

熄屏显示一直是大家非常喜欢的一项功能,可以让我们在不影响他人的情况下随时随时地查看消息提醒。华为nova12全系列机型均支持熄屏显示功能,且在系列上更是有重磅升级,熄屏显示不再只局限于一小块区域,整个屏幕都可以作为显示空间…

【2024美赛C题】网球大佬带你无背景压力分析解题思路!

2024美赛数学建模c题思路分享 加群可以享受定制等更多服务,或者搜索B站:数模洛凌寺 联络组织企鹅:936670395 以下是C题老师的解题思路(企鹅内还会随时更新文档): 1背景介绍 2024MCM问题C:网…

基于Python3的OneDrive多网盘挂载程序,带会员/同步等功能,附带系统搭建教程

搭建教程 虚拟主机用户&#xff0c; Apache构架的配置如下&#xff0c;Nginx的我不知道 根目录创建一个.htaccess文件&#xff0c;内容如下&#xff1a; <IfModule mod_rewrite.c> RewriteEngine on RewriteCond %{REQUEST_URI} !^public RewriteRule ^(…

Git介绍与常用命令总结

Git介绍与其常用命令总结 1、Git介绍2、Git的使用3、Git常用命令3.1 初始化仓库3.2 克隆仓库3.3 配置用户信息3.4 提交代码(Commit)3.5 推送代码(Push)3.6 拉取代码(Pull)3.7 分支(Branch)3.8 远程仓库(Remote)3.9 撤销回退本地改动3.10 更新本地仓库与远程仓库 1、Git介绍 Gi…

2024年美国大学生数学建模竞赛F题思路分析

题目 非法野生动物贸易对环境造成了负面影响&#xff0c;并威胁全球生物多样性。据估计&#xff0c;其涉及高达265亿美元的年交易额&#xff0c;被认为是全球所有非法交易中的第四大。[1] 你需要开发一个基于数据驱动的5年项目&#xff0c;旨在显著减少非法野生动物贸易。你的…

npm 和 yarn 的使用

安装 yarn npm i yarn -g查看版本 npm -v yarn --version切换 npm/yarn 的下包镜像源 // 查看当前的镜像源 npm config get registry// 切换淘宝镜像源 // 新的淘宝源&#xff0c;旧的淘宝源已于2022年05月31日零时起停止服务 npm config set registry https://registry.…

鸿蒙ArkUI日期选择组件

鸿蒙ArkUI日期选择组件&#xff0c;基于基础组件进行的二次封装的日期选择组件&#xff0c;快速实现日期选择。 /*** 日期*/ Component export default struct DiygwDate{//绑定的值Link Watch(onValue) value:string;// 隐藏值State valueField: string value;// 显示值Sta…

【靶场实战】Pikachu靶场不安全的文件下载漏洞关卡详解

Nx01 系统介绍 Pikachu是一个带有漏洞的Web应用系统&#xff0c;在这里包含了常见的web安全漏洞。 如果你是一个Web渗透测试学习人员且正发愁没有合适的靶场进行练习&#xff0c;那么Pikachu可能正合你意。 Nx02 不安全的文件下载漏洞概述 文件下载功能在很多web系统上都…

移动机器人激光SLAM导航(二):运动控制与传感器篇

参考引用 机器人工匠阿杰wpr_simulation 1. 机器人运动控制 1.1 测试环境安装 wpr_simulation 安装$ mkdir -p catkin_ws/src $ cd catkin_ws/src $ git clone https://github.com/6-robot/wpr_simulation.git $ cd wpr_simulation/scripts/ $ ./install_for_melodic.sh # 自…

Elasticsearch-内存结构

ElasticSearch的内存从大的结构可以分堆内存&#xff08;On Heap&#xff09;和堆外内存&#xff08;Off Heap&#xff09;。Off Heap部分由Lucene进行管理。On Heap部分存在可GC部分和不可GC部分&#xff0c;可GC部分通过GC回收垃圾对象&#xff0c;从而释放内存。不可GC部分不…

【项目日记(七)】第三层: 页缓存的具体实现(上)

&#x1f493;博主CSDN主页:杭电码农-NEO&#x1f493;   ⏩专栏分类:项目日记-高并发内存池⏪   &#x1f69a;代码仓库:NEO的学习日记&#x1f69a;   &#x1f339;关注我&#x1faf5;带你做项目   &#x1f51d;&#x1f51d; 开发环境: Visual Studio 2022 项目日…

three.js CSS3DRenderer、CSS3DObject渲染HTML标签

有空的老铁关注一下我的抖音&#xff1a; 效果&#xff1a; <template><div><el-container><el-main><div class"box-card-left"><div id"threejs" style"border: 1px solid red;position: relative;"><…

react 之 useInperativeHandle

useInperativeHandle是通过ref暴露子组件中的方法 1.场景说明-直接调用子组件内部的方法 import { forwardRef, useImperativeHandle, useRef } from "react"// 子组件const Son forwardRef((props, ref) > {// 实现聚焦逻辑const inputRef useRef(null)const …

【知识点】Java常用

文章目录 基础基础数据类型内部类Java IOIO多路复用重要概念 Channel **通道**重要概念 Buffer **数据缓存区**重要概念 Selector **选择器** 关键字final 元注解常用接口异常处理ErrorException JVM与虚拟机JVM内存模型本地方法栈虚拟机栈 Stack堆 Heap方法区 Method Area (JD…

npm安装报错,出现.staging

问题场景&#xff1a;同事发了一个本地的安装包&#xff0c;拿到了没仔细看&#xff0c;直接npm install&#xff0c;没有发现根目录下的package-lock.json。然后就发现安装一直不成功&#xff0c;还会卡主。并且在node_modules文件夹下还会出现.staging文件夹&#xff0c;正常…

计算机网络实验六

目录 实验6 静态路由与RIP协议配置 1、实验目的 2、实验设备 &#xff08;1&#xff09;内容一&#xff1a;&#xff08;静态路由配置&#xff09; &#xff08;2&#xff09;内容二&#xff1a;&#xff08;RIP协议配置&#xff09; 3、网络拓扑及IP地址分配 &#xff…