QML项目实战:自定义Button

news2024/11/25 12:04:22

目录

一.添加模块

​1.QtQuick.Controls 2.1

2.QtGraphicalEffects 1.12

二.自定义Button

1.颜色背景设置

2.设置渐变色背景

3.文本设置

4.点击设置

5.阴影设置

三.效果

1.当enabled为true

2.按钮被点击时

3.当enabled为false

四.代码


一.添加模块

1.QtQuick.Controls 2.1

  • QtQuick.Controls 提供了一组预定义的 UI 控件,这些控件可以用于构建现代、响应式的用户界面。
  • 它包括按钮、标签、文本框、滑块、列表视图等常见的 UI 元素。

2.QtGraphicalEffects 1.12

  • QtGraphicalEffects 提供了一组图形效果,可以在 QML 中应用到任何可视化项目上,如图像、视频或其他 UI 元素。
  • 它包括模糊、阴影、颜色调整、光照等效果。

二.自定义Button

1.颜色背景设置

2.设置渐变色背景

3.文本设置

4.点击设置

5.阴影设置

三.效果

1.当enabled为true

正常状态下按钮为深蓝色渐变浅蓝色

2.按钮被点击时

点击按钮状态下按钮为深紫色渐变浅紫色

3.当enabled为false

按钮为不可选中状态,按钮被置成灰色

四.代码

import QtQuick 2.15
import QtQuick.Window 2.2
import QtQuick.Controls 2.5
import QtGraphicalEffects 1.12

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("自定义按钮")

    //按钮颜色
    property color normalLeftColor: "#1A40FF"
    property color normalRightColor: "#5E8EFF"
    property color pressedLeftColor: "#6200E2"
    property color pressedRightColor: "#6B7DFF"
    property color disableLeftColor: "#8B99B2"
    property color disableRightColor: "#6D7B9A"

    function getLeftColor() {
        if (control.enabled) {
            return control.pressed ? pressedLeftColor : normalLeftColor;
        } else {
            return disableLeftColor;
        }
    }

    function getRightColor() {
        if (control.enabled) {
            return control.pressed ? pressedRightColor : normalRightColor;
        } else {
            return disableRightColor;
        }
    }

    //按钮点击增加数字
    property int   index: 0

    // 文本颜色。
    property color textColor: control.enabled ? "white" : "#C8D3E6"

    Button {
        id: control
        anchors.centerIn: parent
        implicitWidth: 180 // 默认是小按钮的宽高
        implicitHeight: 70
        font.family: "微软雅黑"
        font.pixelSize: 30
        enabled:true

        contentItem: Item {
            z: control.z + 1 // 避免含有图片时受shadow的影响而不显示
            anchors.fill: parent

            Text {
                anchors.centerIn: parent
                text: index
                color: textColor
                font.family: control.font.family
                font.pixelSize: control.font.pixelSize
            }
        }

        onClicked: {
            index++
        }

        // 渐变色背景。需要左侧颜色,右侧颜色。
        background: Rectangle {
            id:_background
            radius:10

            gradient: Gradient {
                orientation: Gradient.Horizontal
                GradientStop { position :0.0; color:getLeftColor() }
                GradientStop { position :1.0; color:getRightColor() }
            }
         }

         // 淡阴影(UI左上方照射的效果)
         DropShadow {
             id:_shadow
             anchors.fill:_background
             horizontalOffset :3
             verticalOffset :2
             radius :8.0
             samples :17
             color : control.enabled ?  "#00208B" : "#C8D3E6"
             source:_background
             visible:true
         }
     }
}

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

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

相关文章

实战攻略 | ClickHouse优化之FINAL查询加速

【本文作者:擎创科技资深研发 禹鼎侯】 查询时为什么要加FINAL 我们在使用ClickHouse存储数据时,通常会有一些去重的需求,这时候我们可以使用ReplacingMergeTree引擎。这个引擎允许你存储重复数据,但是在merge的时候会根据order …

labview学习总结

labview学习总结 安装labview的特点一、图形化编程范式二、并行执行机制三、硬件集成能力四、应用领域优势五、开发效率六、系统集成能力**labview基本组成示意图****常用程序结构图解**结语 基础知识介绍界面前后面板的概念平铺式和层叠式 帧的概念结构类型顺序结构for循环whi…

Linux 服务器使用指南:从入门到登录

🌟快来参与讨论💬,点赞👍、收藏⭐、分享📤,共创活力社区。 🌟 🚩博主致力于用通俗易懂且不失专业性的文字,讲解计算机领域那些看似枯燥的知识点🚩 目录 一…

《AI 大模型:重塑软件开发新未来》

引言 在科技的璀璨星河中,AI 大模型宛如一颗耀眼的新星,正以前所未有的力量改写着软件开发的篇章。随着其技术的持续演进,软件开发流程正经历着翻天覆地的变化。从代码自动生成的神奇魔法,到智能测试的精准洞察,AI 大…

acmessl.cn提供接口API方式申请免费ssl证书

目录 一、前沿 二、API接口文档 1、证书可申请列表 简要描述 请求URL 请求方式 返回参数说明 备注 2、证书申请 简要描述 请求URL 请求方式 业务参数 返回示例 返回参数说明 备注 3、证书查询 简要描述 请求URL 请求方式 业务参数 返回参数说明 备注 4、证…

windows server2019下载docker拉取redis等镜像并运行项目

一、基本概念 1、windows server 指由微软公司开发的“Windows”系列中的“服务器”版本。这意味着它是基于Windows操作系统的,但专门设计用于服务器环境,而不是普通的桌面或个人用户使用。主要用途包括服务器功能、用户和资源管理、虚拟化等 2、dock…

Docker-- cgroups资源控制实战

上一篇:容器化和虚拟化 什么是cgroups? cgroups是Linux内核中的一项功能,最初由Google的工程师提出,后来被整合进Linux内核; 它允许用户将一系列系统任务及其子任务整合或分隔到按资源划分等级的不同组内,从而为系统…

解决ImportError: DLL load failed while importing _message: 找不到指定的程序。

C:\software\Anoconda\envs\yolov5_train\python.exe C:\Project\13_yolov5-master\train.py C:\software\Anoconda\envs\yolov5_train\lib\site-packages\torchvision\io\image.py:13: UserWarning: Failed to load image Python extension: [WinError 127] 找不到指定的程序…

超越Axure:探索新一代原型设计工具

Axure RP是一款被广泛认可的快速原型设计工具,专为专业设计师打造,用于创建高效的产品原型图,包括APP和网页的原型图、框架图和结构图等。Axure RP制作的原型图能够实现与实际APP相似的交互效果,便于向用户或客户展示,…

综合项目--博客

一。基础配置: 1.配置主机名,静态IP地址 2.开启防火墙配置 3.部分开启selinux并且配置 4.服务器之间使用同ntp.aliyun.com进行世家能同步 5.服务器之间实现SSH绵密登陆 二。业务需求 1.Sever-NFS-DNS主机配置NFS服务器,将博客网站资源…

dns欺骗

[[Ettercap]] 少不了这个 arp 毒化和流量截取的中间人工具。 dns欺骗原理 什么是 DNS 欺骗? DNS 欺骗(DNS Spoofing) 是一种网络攻击技术,攻击者通过修改 DNS 响应,将目标用户的 DNS 查询结果篡改,指向攻…

危机来临前---- 力扣: 876

危机即将来临 – 链表的中间节点 描述: 给你单链表的头结点 head ,请你找出并返回链表的中间结点。如果有两个中间结点,则返回第二个中间结点。 示例: 何解? 1、遍历找到中间节点 : 这个之在回文链表中找…

SQL Server数据库中,报错:用户名或密码不正确

1、 用户名或密码不正确 2、解决方式 可能是服务器名称不对,检查服务器名称是否是安装sqlserver数据的服务器名称。安装sqlserver数据的服务器,没有开启1433端口,需要开启端口 下一步保证:TCP/IP 状态状态为:已启用 然…

PKG_CHECK_MODULES(FUSE,fuse)

运行 ./configure 命令报错如下: ./configure: line 13934: syntax error near unexpected token FUSE,fuse ./configure: line 13934: PKG_CHECK_MODULES(FUSE,fuse)解决方案: 命令窗口运行如下命令,安装 pkg-config: sudo …

不要只知道deepl翻译,这里有10个专业好用的翻译工具等着你。

deepl翻译的优点还是有很多的,比如翻译的准确性很高,支持翻译的语言有很多,并且支持翻译文件和文本。但是现在翻译工具那么多,大家需要翻译的场景也有很多,怎么能只拥有一个翻译工具呢。所以在这里我帮助大家寻找了一波…

如何检索 LINEMOD 数据集的相机内参

简介 BOP (Benchmark for 6D Object Pose Estimation) 是一个专为6D物体姿态估计而设计的基准测试平台。它为研究人员提供了多种数据集,以帮助评估和比较物体识别和姿态估计算法的性能。官方网站是 BOP,你可以在这里找到丰富的资源和信息。 检索 LINEM…

健康生活的重要性,注重规律作息

在快节奏的现代生活中,健康已成为我们最宝贵的财富。随着生活水平的提高,人们越来越注重养生,追求身心的和谐与平衡。那么,如何在繁忙的日常中实践健康养生,为生活注入新的活力呢?以下是一些实用的建议&…

最简单方式SSH连接局域网中另一台电脑的WSL2

1、首先确认一下WSL2中的SSH服务是否开启: 先安装更新一下,再安装一下ssh服务模块,这里很多人都没有安装过。 sudo apt update sudo apt upgrade sudo apt install openssh-server 2、配置SSH服务器: 打开配置文件&#xff0c…

andrular输入框input监听值传递

效果图&#xff1a; step1: E:\projectgood\ajnine\untitled4\src\app\apple\apple.component.html <button mat-button (click)“openDialog()”>Open dialog step2: E:\projectgood\ajnine\untitled4\src\app\apple\apple.component.ts import {Component, inject}…

数据结构——二叉树(续集)

♥♥♥~~~~~~欢迎光临知星小度博客空间~~~~~~♥♥♥ ♥♥♥零星地变得优秀~也能拼凑出星河~♥♥♥ ♥♥♥我们一起努力成为更好的自己~♥♥♥ ♥♥♥如果这一篇博客对你有帮助~别忘了点赞分享哦~♥♥♥ ♥♥♥如果有什么问题可以评论区留言或者私信我哦~♥♥♥ 在上一篇博客我们…