QML项目实战:自定义CheckBox

目录

一.添加模块

import QtQuick.Controls 1.2

import QtQuick.Controls.Styles 1.4

import QtGraphicalEffects 1.15

二.自定义CheckBox

1.CheckBox设置

2.勾选框设置

3.标签部分

4. 状态变化处理

5.文本设置

三.效果

1.当enabled为true

2.当enabled为true

3.当enabled为false


一.添加模块

import QtQuick.Controls 1.2

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

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

import QtQuick.Controls.Styles 1.4

  1. 作用: 引入Qt Quick Controls Styles模块,这个模块扩展了Qt Quick Controls模块,提供了一些额外的样式和主题支持。

  2. 性质: 通过这个模块,你可以为你的应用程序应用不同的样式和主题,从而改变控件的外观。版本号1.4表示你正在使用该模块的第1.4版。

import QtGraphicalEffects 1.15

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

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

二.自定义CheckBox

1.CheckBox设置

activeFocusOnPress:在按下时使复选框获得焦点。

enabled:设置为 true,表示复选框可以被操作。

2.勾选框设置

1.根据 enabled 状态设置矩形的颜色。

2.根据 control.checkedState 的值设置边框颜色。如果 control.checkedState 为真,边框颜色为 #2850FF;否则为白色。

3.根据 control.checkedState 的值设置矩形的不透明度。如果 control.checkedState 等于 Qt.PartiallyChecked,不透明度为 0.5;否则为 1。

4.启用图层效果。 layer.effect: DropShadow { ... } 应用阴影效果,使矩形看起来有立体感

3.标签部分

4. 状态变化处理

5.文本设置

三.效果

1.当enabled为true

没有点击checkbox时,字体为黑色,不显示文本

2.当enabled为true

点击checkbox时,字体为黑色,显示文本并且出现勾选状态

3.当enabled为false

checkbox为不可点击状态,字体为灰色,不显示文本

四.代码

import QtQuick 2.5
import QtQuick.Window 2.2
import QtQuick.Controls         1.2
import QtQuick.Controls.Styles  1.4
import QtGraphicalEffects 1.15

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("CheckBox")

    CheckBox {
        id:_checkbox
        anchors.centerIn: parent
        activeFocusOnPress: true
        enabled:false

        style: CheckBoxStyle {
            spacing:  5

            indicator:Rectangle {
                id:             indRectangle
                width:   36
                height:  36
                radius:         6
                color:          enabled ? "#D7E1F0" : "#8B99B2"
                border.width:   2
                border.color:   control.checkedState ? "#2850FF" : "white"
                opacity:        control.checkedState === Qt.PartiallyChecked ? 0.5 : 1
                Image {
                    anchors.left: parent.left
                    anchors.bottom: parent.bottom
                    anchors.leftMargin: 1
                    anchors.bottomMargin: 1
                    source:     "qrc:/new/CheckSelect.png"
                    visible:     control.checkedState === Qt.Checked ?  true : false
                    mipmap:     true
                    fillMode:   Image.PreserveAspectFit
                }
                //淡阴影
                layer.enabled:      true
                layer.effect:       DropShadow {
                    verticalOffset: 3
                    radius:         8
                    samples:        17
                    color:          "#4d000f43"
                }
            }

            label: Item {
                width:    text.width + 36 * 0.25
                height:   Math.max(text.height, 36)
                baselineOffset: text.baselineOffset

                Text {
                    id:                 text
                    text:               "CheckBox"
                    font.pixelSize:     30
                    font.bold:          enabled ? true : false
                    font.family:        "微软雅黑"
                    color:              enabled ? "black" : "#6379A5"
                }
            }
        }
        onCheckedChanged: {
            console.log("CheckBox状态" + checkedState)
            _label.visible = !_label.visible
        }
    }

    Label{
        id:_label
        anchors.top: _checkbox.bottom
        anchors.topMargin: 30
        anchors.horizontalCenter: parent.horizontalCenter
        text: "我是按钮状态显示"
        font.pixelSize: 30
        visible: false
    }
}

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

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

相关文章

天命人开店日记之门店经营调研(下)

在调研前拟定了一些想要去了解的信息,包括:月销量、净利润、用户购买的主要担忧、与电商平台的竞争差异等关键内容,然而当自己去实地考察线下门店时,确发现实际情况与自己的预期相差非常大。大大出乎预料的包括三方面:…

【昇腾】Linux系统常见命令

文章目录 查看操作系统信息查看EulerOS内核版本 查看root下的内容查看/etc目录下的内容sh: yum: command not foundValueError: zero-size array to reduction operation minimum which has no identityAttributeError: torch_npu._C._NPUDeviceProperties object has no attri…

立体视觉的核心技术:视差计算与图像校正详解

立体视觉的核心技术:视差计算与图像校正详解 在立体视觉中,通过双目相机(即左右两台相机)的不同视角捕获的图像,结合几何关系,我们可以推算出场景中物体的深度。本文将深入讲解如何基于视差(di…

11.6-11.7重大专业能力测试(换皮c++考试)全攻略(两天速通版)

relations的vector存储的就是Relation类型的数据,并不是指针,所以relations[i]访问Relation的成员就是直接用., 但是joins的JoinSql里面存的是指针,并不是实际的数据,所以应当用->来访问其中的成员 结构体当中的Sq…

Go语言结构体、方法与接口

文章目录 一、结构体构造函数Go语言中的构造函数语法 二、结构体方法和接收器无参数和返回值值类型接收者指针类型接收者方法继承方法重写 三、结构体比较结构体比较要求结构体比较符号 四、接口声明接口定义接口特点接口格式标准格式接口的实现:空接口error接口 五…

用Puppeteer点击与数据爬取:实现动态网页交互

用Puppeteer与代理IP抓取51job招聘信息:动态网页交互与数据分析 引言 在数据采集领域,传统的静态网页爬虫方式难以应对动态加载的网页内容。动态网页通常依赖JavaScript加载数据,用户需要与页面交互才能触发内容显示。因此,我们…

Sophos | 网络安全

在 SophosLabs 和 SophosAI 的威胁情报、人工智能和机器学习的支持下,Sophos 提供广泛的高级产品和服务组合,以保护用户、网络和端点免受勒索软件、恶意软件、漏洞利用、网络钓鱼和各种其他网络攻击。Sophos 提供单一的集成式基于云的管理控制台 Sophos …

盘点RPA在政务领域落地应用

数字政府是数字经济的中坚力量,以强有力的“抓手”带动着各行各业的数字化转型以及新技术的应用与普及。近两年,以RPA为代表的数字技术在政务实践中的表现受到了很高的关注,RPA数字员工在各地相关政务部门悄然上岗,有效助力政府信…

mysql5.7安装SSL报错解决(2),总结

Caused by: java.io.EOFException: SSL peer shut down incorrectly 在java里面连接mysql5.7.17数据库,报以上错误, 将数据库升级到mysql5.7.44就可以了。 这两天处理java连接mysql的问题,报了各种错误,总结一下就是openssl和mysq…

前端基础-html-注册界面

&#xff08;200粉啦&#xff0c;感谢大家的关注~ 一起加油吧~&#xff09; 浅浅分享下作业&#xff0c;大佬轻喷~ 网页最终效果&#xff1a; 详细代码&#xff1a; ​ <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"…

论文 | Teaching Algorithmic Reasoning via In-context Learning

这篇论文《通过上下文学习教授算法推理》探讨了如何通过上下文学习&#xff08;In-context Learning, ICL&#xff09;有效训练大型语言模型&#xff08;LLMs&#xff09;以进行算法推理。以下是从多个角度对这项工作的详细解读&#xff1a; 1. 问题陈述与研究动机 算法推理的…

Json 类型与多值索引 — OceanBase 4.3.2 AP 功能体验

本文来自 2024年OceanBase技术征文大赛——“让技术被看见 | OceanBase 布道师计划”的用户征文。也欢迎更多的技术爱好者参与征文&#xff0c;赢取万元大奖。和我们一起&#xff0c;用文字让代码跳动起来&#xff01; 参与2024年OceanBase技术征文大赛>> MySQL在5.7.8…

FPAGA学习~问题记录

1.Error: concurrent assignmentto a non-netstart is not permitted&#xff08;错误&#xff1a;不允许并发分配到非网络‘start’&#xff09; 原因&#xff1a;wire 或reg 类型不匹配引起的&#xff0c;assign与wrie搭配使用&#xff0c;而reg一般在always、initial语句块中…

微服务系列四:热更新措施与配置共享

目录 前言 一、基于Nacos的管理中心整体方案 二、配置共享动态维护 2.1 分析哪些配置可拆&#xff0c;需要动态提供哪些参数 2.2 在nacos 分别创建共享配置 创建jdbc相关配置文件 创建日志相关配置文件 创建接口文档配置文件 2.3 拉取本地合并配置文件 2.3.1 拉取出现…

003-Kotlin界面开发之声明式编程范式

概念本源 在界面程序开发中&#xff0c;有两个非常典型的编程范式&#xff1a;命令式编程和声明式编程。命令式编程是指通过编写一系列命令来描述程序的运行逻辑&#xff0c;而声明式编程则是通过编写一系列声明来描述程序的状态。在命令式编程中&#xff0c;程序员需要关心程…

Python作业记录

复制过来的代码的换行有问题&#xff0c;但是也不是什么大问题。 后续我会进行补充和修改。 请将如下英文短句根据单词切分成列表&#xff1a; The continent of Antarctica is rising. It is due to a geological phenomenon called post-glacial uplift 并在切分好的列表…

pdmaner连接sqlexpress

别以为sqlserver默认的端口总是1433 案例 有台sqlserver2008 express服务器&#xff0c;刚安装&#xff0c;支持混合模式登录&#xff0c;其它什么配置也没改。 先看用ADO连接 这说明&#xff1a; 案例中sqlserver端口不是1433 &#xff01;&#xff01;&#xff01;ADO连接…

轻型民用无人驾驶航空器安全操控------理论考试多旋翼部分笔记

官网&#xff1a;民用无人驾驶航空器综合管理平台 (caac.gov.cn) 说明&#xff1a;一是法规部分&#xff1b;二是多旋翼部分 本笔记全部来源于轻型民用无人驾驶航空器安全操控视频讲解平台 目录 官网&#xff1a;民用无人驾驶航空器综合管理平台 (caac.gov.cn) 一、轻型民用无人…

二叉树相关习题

题目&#xff1a;100. 相同的树 - 力扣&#xff08;LeetCode&#xff09; 给你两棵二叉树的根节点 p 和 q &#xff0c;编写一个函数来检验这两棵树是否相同。 如果两个树在结构上相同&#xff0c;并且节点具有相同的值&#xff0c;则认为它们是相同的。 示例 1&#xff1a; …

阅读笔记记录

论文作者将对话建模成一个seq2seq的映射问题&#xff0c;该seq2seq框架以对话历史数据&#xff08;通过belief tracker建模&#xff09;和数据库查询结果&#xff08;通过Database Operator得到结果&#xff09;作为支撑。 Abstract 教会机器完成与人自然交流的任务是充满挑战…