QML项目实战:自定义Combox

news2024/11/24 20:12:57

目录

一.添加模块

import QtQuick.Controls 2.4

import QtQuick.Templates 2.4 as T

import QtGraphicalEffects 1.15

import QtQuick 2.15 as T2

二.自定义Combox

1.combox文字显示

2.设置下拉图标显示

3.下拉框中选中背景设置

4.下拉框中选中文字设置

5.下拉框设置

三.效果显示

四.代码


一.添加模块

import QtQuick.Controls 2.4

  1. 作用: 引入Qt Quick Controls模块,提供了一组常见的UI控件(如按钮、文本框等),用于快速开发现代用户界面。

  2. 性质: 这个模块包含了许多预定义的控件和样式,可以大大简化UI开发。版本号2.4表示你正在使用该模块的第2.4版。

import QtQuick.Templates 2.4 as T

  1. 作用: 引入Qt Quick Templates模块,这个模块提供了一些常用的模板组件,例如Repeater、Loader等,用于动态创建和管理UI元素。
  2. 性质: 通过给模块起别名T,你可以在代码中用T来引用该模块中的类型和函数。版本号2.4表示你正在使用该模块的第2.4版。

import QtGraphicalEffects 1.15

  1. 作用: 引入Qt Graphical Effects模块,提供了一组图形效果类,用于为UI元素添加视觉效果,如阴影、模糊、渐变等。

  2. 性质: 这个模块允许你在应用程序中实现复杂的视觉效果,提升用户体验。版本号1.15表示你正在使用该模块的第1.15版。

import QtQuick 2.15 as T2

  1. 作用: 引入Qt Quick基础模块,这是Qt Quick的核心部分,提供了构建动态用户界面的基本功能和类型。

  2. 性质: 通过给模块起别名T2,你可以在代码中用T2来引用该模块中的类型和函数。版本号2.15表示你正在使用该模块的第2.15版。

二.自定义Combox

1.combox文字显示

2.设置下拉图标显示

3.下拉框中选中背景设置

4.下拉框中选中文字设置

5.下拉框设置

三.效果显示

四.代码

import QtQuick                  2.11
import QtQuick.Window           2.3
import QtQuick.Controls         2.4
import QtQuick.Templates        2.4 as T
import QtGraphicalEffects       1.15
import QtQuick 2.15  as T2

Window{
    width: 800
    height: 600
    visible: true

    property int    inPopHeight: 0
    property int    inRadius: 20
    property int    inTextWidth: 380
    property bool   sizeToContents: false
    property real   _largestTextWidth:  0
    property real   _popupWidth:        sizeToContents ? _largestTextWidth + itemDelegateMetrics.leftPadding + itemDelegateMetrics.rightPadding : control.width
    property bool   _onCompleted:       false
    property int    _fontSize:          30

    ComboBox {
        id:             control
        anchors.centerIn: parent
        padding:        10
        spacing:        10
        font.family:    "微软雅黑"
        implicitWidth: 400
        implicitHeight:70

        leftPadding:    padding + (!control.mirrored || !indicator || !indicator.visible ? 0 : indicator.width + spacing)
        rightPadding:   padding + (control.mirrored || !indicator || !indicator.visible ? 0 : indicator.width)

        TextMetrics {
            id:                 textMetrics
            font.pixelSize:     _fontSize
            font.family:        "微软雅黑"
        }

        ItemDelegate {
            id:             itemDelegateMetrics
            visible:        false
            font.pixelSize:         _fontSize
            font.family:            "微软雅黑"
        }

        function _adjustSizeToContents() {
            if (_onCompleted && sizeToContents && model) {
                _largestTextWidth = 0
                for (var i = 0; i < model.length; i++){
                    textMetrics.text = model[i]
                    _largestTextWidth = Math.max(textMetrics.width, _largestTextWidth)
                }
            }
        }

        onModelChanged: _adjustSizeToContents()

        Component.onCompleted: {
            _onCompleted = true
            _adjustSizeToContents()
        }

        // The items in the popup
        delegate: ItemDelegate {
            width:  _popupWidth
            //height: Math.round(popupItemMetrics.height * 1.75)

            property string _text: control.textRole ? (Array.isArray(control.model) ? modelData[control.textRole] : model[control.textRole]) : modelData

            TextMetrics {
                id:             popupItemMetrics
                font:           control.font
                text:           _text
            }

            contentItem: Text {
                text:                   _text
                font.pixelSize:         _fontSize
                font.family:            "微软雅黑"
                color:                  control.currentIndex === index ? "#FFFFFF" : "#1A40FF"
                verticalAlignment:      Text.AlignVCenter
            }

            background: Rectangle {
                radius:          20
                gradient: T2. Gradient {
                    orientation :Gradient.Horizontal
                    GradientStop { position: 0; color: control.currentIndex === index ?"#1A40FF":"white" }
                    GradientStop { position: 1; color:control.currentIndex === index ? "#5E8EFF":"white" }
                }
            }

            highlighted:                control.highlightedIndex === index
        }

        indicator: Image {
            anchors.rightMargin:    parent.width * 0.05
            anchors.right:          parent.right
            anchors.verticalCenter: parent.verticalCenter
            source: control.down ? "qrc:/new/Image/TimGeneral_pressarrow.png" : "qrc:/new/Image/pullDown.png"
        }

        // The label of the button
        contentItem: Item {
            implicitWidth:                  text.implicitWidth
            implicitHeight:                 text.implicitHeight

            //QGCLabel {
            Label {
                id:                         text
                anchors.verticalCenter:     parent.verticalCenter
                anchors.left:               parent.left
                anchors.leftMargin:         parent.width * 0.032
                text:                      control.currentText
                font.pixelSize:             _fontSize
                width: control.inTextWidth
                elide:Text.ElideRight
                color:                     control.down? "#1A40FF" : "#3A3A3A"
            }
        }

        background: Rectangle {
            implicitWidth:      5
            implicitHeight:     1.6
            border.color:       control.down? "#508AFF" : "#FFFFFF"
            border.width:       2
            color:              control.down? "#FFFFFF" : "#4ceaf1fb"
            radius:             20

            layer.enabled:      true
            layer.effect:       DropShadow {
                verticalOffset: 4
                radius:         10
                samples:        17
                color:          "#B2C5E0"
            }
        }

        model: ListModel {
            id: model
            ListElement { text: "Banana" }
            ListElement { text: "Apple" }
            ListElement { text: "Coconut" }
        }

        popup: T.Popup {
            y:              control.height
            width:          _popupWidth
            height:         Math.min(contentItem.implicitHeight, control.Window.height - topMargin - bottomMargin)
            topMargin:      6
            bottomMargin:   6

            contentItem: ListView {
                clip:                   true
                implicitHeight:         (inPopHeight===0) ? contentHeight : inPopHeight

                model:                  control.delegateModel
                currentIndex:           control.highlightedIndex
                highlightMoveDuration:  0

                Rectangle {
                    z:              10
                    radius:         20 //20
                    width:          parent.width
                    height:         parent.height
                    color:          "transparent"
                    border.width:   2
                    border.color:    "#508AFF"
                }
            }

            //下拉框背景
            background: Rectangle {
                radius:         20 //20
                color:          "white"
            }
        }
    }
}

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

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

相关文章

【设计模式系列】原型模式(十一)

一、什么是原型模式 原型模式&#xff08;Prototype Pattern&#xff09;是一种创建型设计模式&#xff0c;它使得一个对象可以复制自身&#xff0c;从而创建一个与自己属性一致的新对象&#xff0c;而无需知晓对象创建的细节。这种模式允许动态地增加对象的数量&#xff0c;并…

h5web浏览器获取腾讯地图经纬度

https://lbs.qq.com/dev/console/application/mine 去腾讯地图申请key 然后前端页面引用 <script type"text/javascript" src"https://apis.map.qq.com/tools/geolocation/min?key自己的key&referertest"></script>调用代码 let geoloca…

微积分复习笔记 Calculus Volume 1 - 4.6 | Limits at Infinity and Asymptotes

4.6 Limits at Infinity and Asymptotes - Calculus Volume 1 | OpenStax

开源的flash浏览器 CelfFlashBrowser

特点 不用安装flash就可以玩flash游戏。 可播放在线和本地的swf文件 下载地址 &#xff1a;https://github.com/Mzying2001/CefFlashBrowser

游戏引擎中的颜色科学

游戏引擎中的渲染组件的作用是生成一个二维图片&#xff0c;在特定的时间从给定的视点观察的方向看到的一个三维空间的状态。他们的生成每一张图片都会被称为帧&#xff0c;他们生成的速度称为帧率。 像素 在每一帧中&#xff0c;游戏引擎的视觉输出基本上是一大堆彩色像素&a…

css中pointer-events:none属性对div里面元素的鼠标事件的影响

文章目录 前倾提要当没有设置属性pointer-events时候结果 当子元素设置了pointer-events: none修改后的代码结果如下所示 当父元素设置了pointer-events: none若两个div同级也就是兄弟级 前倾提要 在gis三维开发的地图组件上放一个背景图片&#xff0c;左右两侧的颜色渐变等&a…

中科蓝汛GPIO操作说明

概述 本篇文章介绍如何使用中科蓝汛AB5681&#xff0c;GPIO管脚使用说明。 一、第一种写法 1&#xff09;、GPIO配置输入模式 //内部上拉 GPIOBDE | BIT(4); //数字IO使能: 0为模拟IO, 1 为数字IO GPIOBDIR | BIT(4); //控制IO的方向: 0为输出, 1为输入. GPIOBFEN &…

Kotlin 协程使用及其详解

Kotlin协程&#xff0c;好用&#xff0c;但是上限挺高的&#xff0c;我一直感觉自己就处于会用&#xff0c;知其然不知其所以然的地步。 做点小总结&#xff0c;比较浅显。后面自己再继续补充吧。 一、什么是协程&#xff1f; Kotlin 协程是一种轻量级的并发编程方式&#x…

LabVIEW 离心泵机组故障诊断系统

开发了一套基于LabVIEW图形化编程语言设计的离心泵机组故障诊断系统。系统利用先进的数据采集技术和故障诊断方法&#xff0c;通过远程在线监测与分析&#xff0c;有效提升了离心泵的预测性维护能力&#xff0c;保证了石油化工生产的连续性和安全性。 项目背景及意义 离心泵作…

线程函数和线程启动的几种不同形式

线程函数和线程启动的几种不同形式 在C中&#xff0c;线程函数和线程启动可以通过多种形式实现。以下是几种常见的形式&#xff0c;并附有相应的示例代码。 1. 使用函数指针启动线程 最基本的方式是使用函数指针来启动线程。 示例代码&#xff1a; #include <iostream&g…

辐射传输方程的分解

Decomposition of the Boundary Value Problem for Radiative Transfer Equation of MODIS and MISR instruments 0.Notions Let L L L be the straming-collision operator, and S S S is scattering operator: L I Ω ⋅ ∇ I ( r , Ω ) σ ( r , Ω ) I ( r , Ω ) S…

智会智展,活动必备

智会智展 APP 各大应用市场均可下载统一链接https://m.malink.cn/s/r6nQVf

Hive操作库、操作表及数据仓库的简单介绍

数据仓库和数据库 数据库和数仓区别 数据库与数据仓库的区别实际讲的是OLTP与OLAP的区别 操作型处理(数据库)&#xff0c;叫联机事务处理OLTP&#xff08;On-Line Transaction Processing&#xff09;&#xff0c;也可以称面向用户交易的处理系统&#xff0c;它是针对具体业务…

如何选择适合小团队的项目管理工具?免费与开源软件推荐

目录 一、小团队项目管理工具的重要性 二、热门项目管理工具介绍 &#xff08;一&#xff09;禅道 &#xff08;二&#xff09;Trello &#xff08;三&#xff09;Asana &#xff08;四&#xff09;JIRA 三、免费项目管理软件推荐 &#xff08;一&#xff09;ES 管理器 …

kafka如何获取 topic 主题的列表?

大家好&#xff0c;我是锋哥。今天分享关于【kafka如何获取 topic 主题的列表&#xff1f;】面试题&#xff1f;希望对大家有帮助&#xff1b; kafka如何获取 topic 主题的列表&#xff1f; 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 在Kafka中&#xff0c;可以…

Maven详解—(详解Maven,包括Maven依赖管理以及声明周期,Maven仓库、idea集成Maven)

文章目录 Maven详解一.初始Maven1.1 概述1.2 作用 二.Maven模型2.1 概述2.2 构建生命周期/阶段2.3 项目对象模型2.4 依赖管理模型 三.Maven仓库四.Maven安装4.1 下载4.2 安装步骤 五.Idea集成Maven Maven详解 一.初始Maven 1.1 概述 Maven是Apache旗下的一个开源项目&#x…

虚拟滚动 - 从基本实现到 Angular CDK

简介 在大数据列表的处理上&#xff0c;虚拟滚动是一种优化性能的有效方式。本篇文章将详细介绍两种常见的虚拟滚动实现方式&#xff1a;使用 transform 属性和 Intersection Observer。重点讲解如何通过 transform 属性实现高效的虚拟滚动&#xff0c;并对比Angular CDK中的实…

Spring Boot 配置文件启动加载顺序

前言 Spring Boot的启动加载顺序是一个涉及多个步骤和组件的过程。Spring Boot通过一系列默认设置简化了应用程序的配置&#xff0c;使得开发者能够快速地搭建和部署应用。为了实现这一目标&#xff0c;Spring Boot采用了一种分层和优先级机制来加载配置文件。 一、Spring Bo…

C# Modbus RTU通讯回顾

涉及技术&#xff1a; 1.使用NMdbus4 库 2.ushort[]转int 记得之前刚学习的时候&#xff0c;是ushort[] → Hex字符串→byte[] → 翻转byte[] →BitConverter.ToInt32()&#xff0c;饶了一大圈&#xff1b;实际上可以直接转&#xff1b;这里也有小细节&#xff1a;使用BitCo…

HFSS学习笔记(五)金属过孔、复制模型带激励等问题(持续更新...)

HFSS学习笔记&#xff08;五&#xff09;金属过孔、复制模型带激励等问题&#xff08;持续更新…&#xff09; 一、金属过孔设计 方法一&#xff1a;用介质减去金属圆柱体&#xff0c;然后再添加金属圆柱体 方法二&#xff1a;嵌入金属圆柱 圆柱过孔选择材料为“copper” HFS…