【Qt】界面定制艺术:光标(cursor)、字体(font)、提示(toolTip)、焦点(focusPolicy)与样式表(styleSheet)的深度探索

文章目录

  • 前言:
  • 1. cursor: 设置按钮的光标
  • 2. front:设置字体
  • 3. toolTip: 鼠标悬停提示
  • 4. focusPolicy:设置控件获取到焦点的策略
  • 5. styleSheet : 样式表
  • 总结:

前言:

在现代软件开发中,用户界面(UI)的设计和实现是至关重要的一环。一个直观、美观且响应用户操作的界面可以极大地提升用户体验。Qt作为一个跨平台的C++应用程序框架,提供了丰富的工具和类库来帮助开发者创建和管理复杂的用户界面。本文将介绍Qt中的一些关键UI组件和属性,包括光标设置、字体样式、鼠标悬停提示、焦点策略和样式表的应用。通过这些知识点,开发者可以更深入地理解如何在Qt中定制和优化应用程序的外观和行为。

1. cursor: 设置按钮的光标

在这里插入图片描述
cursor()setCursor():Widget 级别的,同一个界面中,不同的控件可以设置成不同不同的光标。
QGuiApplication::setOverrideCursor(): 设置全局光标(程序内的全局,而不是系统级别的全局)

可以直接在图形化界面上改:
在这里插入图片描述
也可以通过代码来改:

#include "widget.h"
#include "ui_widget.h"

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    QCursor cursor(Qt::WaitCursor);
    ui->pushButton->setCursor(cursor); // 在按钮上生效
    this->setCursor(cursor); // 在窗口上生效
}

Widget::~Widget()
{
    delete ui;
}

这些都是 Qt 中内置的光标形状:

enum CursorShape {
    ArrowCursor,            // 普通箭头光标
    UpArrowCursor,          // 向上箭头光标
    CrossCursor,            // 十字光标
    WaitCursor,             // 等待光标
    IBeamCursor,            // 文本输入光标(竖线)
    SizeVerCursor,          // 竖直调整光标
    SizeHorCursor,          // 水平调整光标
    SizeBDiagCursor,        // 右下斜线调整光标
    SizeFDiagCursor,        // 左下斜线调整光标
    SizeAllCursor,          // 全方位调整光标
    BlankCursor,            // 空白光标
    SplitVCursor,           // 垂直拆分光标
    SplitHCursor,           // 水平拆分光标
    PointingHandCursor,     // 手指指向光标
    ForbiddenCursor,        // 禁止光标
    WhatsThisCursor,        // 帮助光标
    BusyCursor,             // 忙碌光标
    OpenHandCursor,         // 打开手掌光标
    ClosedHandCursor,       // 握紧手掌光标
    DragCopyCursor,         // 拖拽复制光标
    DragMoveCursor,         // 拖拽移动光标
    DragLinkCursor,         // 拖拽链接光标
    LastCursor = DragLinkCursor,
    BitmapCursor = 24,      // 位图光标
    CustomCursor = 25       // 自定义光标
};

Qt 允许我们通过自定义的图片来设置光标

先准备一个图片,吧图片导入到项目中(qrc管理)
在代码中访问到这个图片,基于这个图片构造出光标对象并设置。
在这里插入图片描述
QPixmap 通过这个对象就表示一个图片

#include "widget.h"
#include "ui_widget.h"

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    // 访问到图片
    QPixmap pixmap(":/gb1.jpg");
    pixmap = pixmap.scaled(50, 50); // 对图片进行缩放, 注意是副本,还要重新赋值回去

    // 构造光标对象
    QCursor cursor(pixmap, 10, 10); // 默认情况下,鼠标点击时,相当于图片的左上角在点击,
                                    // 10,10 热点, 以图片的左上角位原点,找到10,10这个位置作为鼠标真正的点击的位置了
    //ui->pushButton->setCursor(cursor); // 在按钮上生效
    this->setCursor(cursor); // 在窗口上生效
}

Widget::~Widget()
{
    delete ui;
}

图片下载:阿里巴巴矢量图标库(免费下载):
https://www.iconfont.cn/

2. front:设置字体

在这里插入图片描述
关于Qfront
在这里插入图片描述
在这里插入图片描述
改了啥属性,这边能立即显示出来
通过属性编辑这样的方式,虽然能够快速方便的修改文字相关的属性,但是还不够灵活。
如果程序运行过程中需要修改文字相关属性,就需要通过代码来操作了。

#include "widget.h"
#include "ui_widget.h"
#include <QLabel>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    QLabel* label = new QLabel(this);
    label->setText("这是一段文本");

    // 创建字体对象
    QFont font;
    font.setFamily("仿宋");
    font.setPixelSize(30);
    font.setBold(true);
    font.setItalic(true);
    font.setUnderline(true);
    font.setStrikeOut(true);

    // 把font对象设置到 label 中
    label->setFont(font);
}

Widget::~Widget()
{
    delete ui;
}

在这里插入图片描述

3. toolTip: 鼠标悬停提示

一个GUI程序,界面比较复杂,按钮啥的很多,当你把鼠标悬停到这个控件上的时候,就能弹出一个提示。
在这里插入图片描述

#include "widget.h"
#include "ui_widget.h"

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    // 设置这两个按钮的 toolTips
    ui->pushButton_Yes->setToolTip("这是一个 Yes 按钮");
    ui->pushButton_Yes->setToolTipDuration(3000); // 提示3s

    ui->pushButton_No->setToolTip("这是一个 No 按钮");
    ui->pushButton_No->setToolTipDuration(3000);
}

Widget::~Widget()
{
    delete ui;
}

在这里插入图片描述

4. focusPolicy:设置控件获取到焦点的策略

计算机中的“焦点”,对于键盘操作非常明显
界面上有一个输入框,此时必须要选中这个输入框,接下来键盘才会输入到输入框中
如果选中的是别的控件,或别的窗口,此时键盘的输入就 不会输入到这个输入框中。
在这里插入图片描述
Qt::FocusPolicy 是⼀个枚举类型. 取值如下
Qt::NoFocus :控件不会接收键盘焦点
Qt::TabFocus :控件可以通过Tab键接收焦点
Qt::ClickFocus :控件在鼠标点击时接收焦点
Qt::StrongFocus :控件可以通过Tab键和鼠标点击接收焦点 (默认值)
Qt::WheelFocus : 类似于 Qt::StrongFocus , 同时控件也通过鼠标滚轮获取到焦点 (新增
的选项, ⼀般很少使用).

一般来说,一个控件获取到焦点,主要是两种方式

  1. 鼠标点击
  2. 键盘的 tab

在这里插入图片描述

5. styleSheet : 样式表

通过CSS设置 widget 的样式。
样式:描述了界面具体是啥样子的 。
CSS 层叠样式表:在进行网页开发的时候,设置网页样式的方式
Qt 就把CSS给参考过来了,搞了一套 QSS,但是相对于CSS来说,功能上的缺失很多的,即使如此也能够帮我们完成不少的效果。
通过 styleSheet 属性进行初步演示。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
和CSS类似,QSS设置的样式也是 键值对 的格式
键和值之间使用:分隔。
键值对和键值对之间,使用; 分隔

通过代码设置样式
实现一个“夜间模式”功能

#include "widget.h"
#include "ui_widget.h"

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
}

Widget::~Widget()
{
    delete ui;
}


void Widget::on_pushButton_light_clicked()
{
    // 设置窗口的样式
    this->setStyleSheet("background-color: white;");
    // 设置输入框的样式
    ui->textEdit->setStyleSheet("background-color: white; color:black;");
    // 设置按钮的样式
    ui->pushButton_light->setStyleSheet("color:black;");
    ui->pushButton_dark->setStyleSheet("color:black;");
}

void Widget::on_pushButton_dark_clicked()
{
    // 设置窗口的样式
    this->setStyleSheet("background-color: black;");
    // 设置输入框的样式
    ui->textEdit->setStyleSheet("background-color: black; color:white;");
    // 设置按钮的样式
    ui->pushButton_light->setStyleSheet("color:white;");
    ui->pushButton_dark->setStyleSheet("color:white;");
}

在这里插入图片描述
white; CCS/QSS 中可以直接使用单词来设置颜色:white,black,red,green,blue,yellow…
颜色的种类有无数种,在计算机中,使用RGB的方式来表示颜色 。(0 - 255; 0x0 - 0xFF)
最终表示一个颜色,就是使用
1)rgb(255, 0, 255)
2) #FF00FF

Widget 的初始数值是多少数值呢?
取色器:(PS)
QQ=> 截图,内置了取色器!
在这里插入图片描述

this->setStyleSheet("background-color: rgb(240,240,240);");

总结:

本文详细介绍了Qt中用于增强用户界面交互性和美观性的五个关键属性和方法:光标(cursor)、字体(font)、工具提示(toolTip)、焦点策略(focusPolicy)和样式表(styleSheet)。通过设置光标,开发者可以改变指针的形态,以适应不同的交互场景;通过字体设置,可以定制文本的显示样式;工具提示提供了一种方便的方式来显示控件的功能描述;焦点策略决定了控件如何接收和处理焦点;而样式表则允许开发者使用类似CSS的方式来美化界面元素。
此外,文章还提供了一些实用的代码示例,展示了如何在Qt中实现自定义光标、设置字体样式、添加鼠标悬停提示、改变控件的焦点策略以及使用样式表来改变界面的视觉效果。这些示例不仅有助于理解Qt的UI定制机制,也展示了如何通过编程来动态改变UI元素的样式和行为。
最后,文章提供了一个关于如何使用阿里巴巴矢量图标库下载免费图标的链接,这对于需要图标资源的开发者来说是一个宝贵的资源。通过这些工具和技巧,Qt开发者可以创建出既符合功能需求又具有吸引力的用户界面。

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

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

相关文章

【C语言】/*操作符(上)*/

目录 一、算数操作符&#xff1a;、-、*、/、% 1.1 和 - 1.2 * 1.3 / 1.4 % 二、赋值操作符&#xff1a; 和符合赋值 2.1 连续赋值 2.2 复合赋值(自操作) 三、单目操作符&#xff1a;、--、(正号)、-(负号) 3.1 和 -- 3.1.1 前置 3.1.2 后置 3.1.3 前置-- …

Flutter实战记录-协作开发遇到的问题

一.前言 Android项目使用了混合架构&#xff0c;部分模块使用Flutter进行开发。在电脑A上开发的项目提交到git仓库&#xff0c;电脑B拉取后进行操作&#xff0c;遇到两个问题&#xff0c;特此做一下记录&#xff1b; 二.问题A Settings file ‘D:\xxx\settings.gradle’ line…

【生信技能树】数据挖掘全流程

R包的安装&#xff0c;每次做分析的时候先运行这段代码把R包都安装好了&#xff0c;这段代码不需要任何改动&#xff0c;每次分析直接运行。 options("repos""https://mirrors.ustc.edu.cn/CRAN/") if(!require("BiocManager")) install.packag…

号外!IP SSL证书申请只需十分钟!

JoySSL官网 注册码230918 IP SSL证书是一种专为IP地址设计的SSL证书&#xff0c;它使得基于IP地址的网站或服务能够实现HTTPS加密&#xff0c;确保数据在传输过程中的安全性和完整性。以下是关于IP SSL证书的一些技术性要点和申请流程概述&#xff1a; 一、IP SSL证书技术要点…

搭建Docker私服镜像仓库Harbor

1、概述 Harbor是由VMware公司开源的企业级的Docker Registry管理项目&#xff0c;它包括权限管理(RBAC)、LDAP、日志审核、管理界面、自我注册、镜像复制和中文支持等功能。 Harbor 的所有组件都在 Dcoker 中部署&#xff0c;所以 Harbor 可使用 Docker Compose 快速部署。 …

CLion 写 Rust 报Project directory `/Users/.../rsheets` does not exist.

每次打开CLion都会看到像下面这样的报错&#xff0c;Project directory /Users/.../rsheets does not exist.&#xff0c;虽然不会影响你写代码&#xff0c;但每次看到还是不舒服&#xff0c;所以研究一下怎么解决。 原因是这样的&#xff0c;每当我们创建一个 Cargo 项目&…

揭秘全网都在搜索的抖音快速涨10000粉的方法,打造真实粉丝海洋!巨量千川投流

抖音作为当下最热门的社交媒体平台之一&#xff0c;拥有数以亿计的用户。对于许多用户来说&#xff0c;快速涨粉成为了一个追逐的目标。在这篇文章中&#xff0c;我们将揭秘一些全网都在搜索的抖音快速涨粉方法&#xff0c;帮助你打造属于自己的真实粉丝海洋。巨量千川投流&…

会员卡积分收银源码系统 支持多门店系统 带完整的安装代码包以及安装搭建教程

在数字化浪潮的推动下&#xff0c;传统零售行业面临着巨大的转型压力。为了满足现代消费者多样化的需求&#xff0c;提高门店管理效率和顾客满意度&#xff0c;小编给大家分享一款会员卡积分收银源码系统——支持多门店系统&#xff0c;并附带了完整的安装代码包以及安装搭建教…

SpringBoot 集成 FFmpeg 解析音视频

文章目录 1 摘要2 核心 Maven 依赖3 核心代码3.1 FFmpeg 解析音视频工具类3.2 音视频文件信息参数3.3 音视频文件上传Controller3.4 application 配置文件 4 测试数据4.1 视频文件解析4.2 音频文件解析 5 注意事项5.1 文件必须在本地 6 推荐参考文档7 Github 源码 1 摘要 FFmp…

element-plus表单上传,唯一替换文件校验,封装方法统一管理

<el-formref"ruleFormRef":model"ruleForm":rules"rules"label-width"110px" ><el-form-item label"语言成绩材料" prop"languageList"><div class"dis-flex w100"><el-uploadref…

Elastic Stack--04-1--Kibana查数

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 Kibana查数1.查询所有记录2.匹配id字段matchterm 3.bool[复合查询]4.业务查询 Kibana查数 在ElasticSearch中支持两种检索方式 通过使用REST request URL 发送检索…

计算机网络实验1:交换机基本配置管理

实验目的和要求 安装Packer Tracer&#xff0c;了解Packer Tracer的基本操作掌握交换机基本命令集实验项目内容 认识Packet Tracer软件 交换机的基本配置与管理 交换机的端口配置与管理 交换机的端口聚合配置 交换机划分Vlan配置 实验环境 硬件&#xff1a;PC机&#x…

UML之用例图

1.用例图 用例图指参与者&#xff0c;用例&#xff0c;边界以及它们之间的关系构成的用于描述系统功能的视图。说明是谁要使用系统&#xff0c;以及可以使用该系统可以做些什么。展示了一个外部用户能够观察到的系统功能模型图 2.用例图的元素 &#xff08;1&#xff09;参与…

视频拼接融合产品的产品与架构设计(二)

视频拼接融合产品的产品与架构设计一 以上是第一期&#xff0c;以前思考的时候还是比较着急&#xff0c;现在思考的更多了&#xff0c;现实世界的拼接更加需要我们沉下心来做&#xff0c;尤其是对于更多画面&#xff0c;画面更加清晰怎么做 本篇章不在于其他功能&#xff0c;在…

【记录】Python3| 将 PDF 转换成 HTML/XML(✅⭐PyMuPDF+tqdm)

本文将会被汇总至 【记录】Python3&#xff5c;2024年 PDF 转 XML 或 HTML 的第三方库的使用方式、测评过程以及对比结果&#xff08;汇总&#xff09;&#xff0c;更多其他工具请访问该文章查看。 文章目录 PyMuPDF 使用体验与评估1 安装指南2 测试代码3 测试结果3.1 转 HTML …

谷歌地图商家采集在外贸客户开发中的作用和意义

谷歌地图商家采集在外贸客户开发中扮演着至关重要的角色&#xff0c;其主要作用和意义体现在以下几个方面&#xff1a; 精准定位目标市场&#xff1a;通过谷歌地图&#xff0c;外贸人员可以根据特定的行业关键词&#xff08;如“fabric stores”&#xff09;搜索目标国家或地区…

《十日终焉》中的定律整理-向虫队学习(举例+持续更新)

1、二八定律 二八定律&#xff0c;又称帕累托法则&#xff0c;也叫巴莱多定律。 是19世纪末20世纪初意大利经济学家巴莱多发明的。其中指出&#xff0c;约仅有20%的因素影响80%的结果。也就是说&#xff1a;所有变因中&#xff0c;最重要的仅有20%&#xff0c;虽然剩余的80%占…

基于Laravel 10 + Vue(scui) + MySQL的快速开发的后台管理系统

​ 系统介绍 ​基于Laravel 10 Vue(scui) MySQL的快速开发的后台管理系统 版权申明 禁止将本产品用于含诈骗、赌博、色情、木马、病毒等违法违规业务使用。 代码仓库 gitee地址&#xff1a; 基础版本 内置模块 用户管理&#xff1a;用于维护管理系统的用户&#xff0c…

格雷希尔GripSeal:E10系列低压信号电测试连接器,应用于新能源汽车的DCR测试和EOL测试

新能源车的电驱动、电池包等都有一些信号接口&#xff0c;从几针到几十针不等&#xff0c;而且每种接口都有独特的电性能要求&#xff0c;这些接口在电池包进DCR测试或是EOL测试时&#xff0c;为了满足这些信号接口的需求&#xff0c;我们设计了E10系列信号针快速接头&#xff…

【吃透Java手写】4-Tomcat-简易版

【吃透Java手写】Tomcat-简易版-源码解析 1 准备工作1.1 引入依赖1.2 创建一个Tomcat的启动类 2 线程池技术回顾2.1 线程池的使用流程2.2 线程池的参数2.2.1 任务队列&#xff08;workQueue&#xff09;2.2.2 线程工厂&#xff08;threadFactory&#xff09;2.2.3 拒绝策略&…