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

news2024/11/17 5:37:33

文章目录

  • 前言：
  • 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开发者可以创建出既符合功能需求又具有吸引力的用户界面。

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

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

相关文章

记录一些常用的网站

记录一些常用的网站

开发者搜索-Beta-让技术搜索更简单高效 (baidu.com)https://kaifa.baidu.com/JSON在线 | JSON解析格式化—SO JSON在线工具https://www.sojson.com/DCloud 插件市场https://ext.dcloud.net.cn/uni-app官网 (dcloud.net.cn)https://uniapp.dcloud.net.cn/在线学习书籍https://gi…
阅读更多...
C++学习第三十课：C++异常处理机制应用

C++学习第三十课：C++异常处理机制应用

一、引言 在编程过程中&#xff0c;我们经常会遇到一些无法预见或难以预料的特殊情况&#xff0c;这些情况统称为“异常”。异常可能是由用户输入错误、资源不足、硬件故障或程序逻辑错误等原因引起的。当这些异常情况发生时&#xff0c;如果程序没有适当的处理机制&#xff0…
阅读更多...
MySQL数据库表的创建DDL语句（21-25）

MySQL数据库表的创建DDL语句（21-25）

21.用户反馈表 CREATE TABLE 7_feedback (feedbackId int(11) NOT NULL AUTO_INCREMENT COMMENT ID,feedbackType int(4) NOT NULL DEFAULT 0 COMMENT 反馈类型&#xff0c;内容来自源系统基础数据表,userId int(11) DEFAULT NULL COMMENT 反馈者ID,creatTime datetime NOT NU…
阅读更多...
商场综合体能源监管平台，实现能源高效管理

商场综合体能源监管平台，实现能源高效管理

商场作为大型综合体建筑&#xff0c;其能源消耗一直是备受关注的问题。为了有效管理商场能耗&#xff0c;提高商场能源效率&#xff0c;商场综合体能源监管平台应运而生。 商场综合体能源监管平台可通过软硬件一起进行节能监管&#xff0c;硬件设备包括各种传感器、监测仪表和…
阅读更多...
ArcGIS10.2系列许可到期解决方案

ArcGIS10.2系列许可到期解决方案

本文手机码字&#xff0c;不排版了。 昨晚&#xff08;2021\12\17&#xff09;12点后&#xff0c;收到很多学员反馈 ArcGIS10.2系列软件突然崩溃。更有的&#xff0c;今天全单位崩溃。 ​ 提示许可15天内到期。之前大部分许可是到2021年1月1日的。 ​ 后续的版本许可都是永久的…
阅读更多...
哪些企业需要用OV 证书？怎么获取OV证书？看这里

哪些企业需要用OV 证书？怎么获取OV证书？看这里

OV证书相当于DV证书而言&#xff0c;其安全等级高&#xff0c;兼容性强&#xff0c;稳定性好&#xff0c;那么哪些企业适用OV证书呢&#xff1f; 1 政府与公共服务网站 政府机构及提供公共服务的网站&#xff0c;必须确保数据的隐私和安全&#xff0c;有助于增强公众对在线服务…
阅读更多...
台服dnf局域网搭建,学习用笔记

台服dnf局域网搭建,学习用笔记

台服dnf局域网搭建 前置条件虚拟机初始化上传安装脚本以及其他文件至虚拟机密钥publickey.pem客户端配置如果IP地址填写有误&#xff0c;批量修改IP地址 前置条件 安装有vmvarecentos7.6镜像&#xff1a;https://mirrors.tuna.tsinghua.edu.cn/centos-vault/7.6.1810/isos/x86…
阅读更多...
拥有蝴蝶效应的爬虫如何进行防护

拥有蝴蝶效应的爬虫如何进行防护

美国气象学家爱德华罗伦兹&#xff08;Edward N.Lorenz&#xff09;1963年在一篇提交纽约科学院的论文中分析了一个叫做蝴蝶效应的理论&#xff1a;“一个气象学家提及&#xff0c;如果这个理论被证明正确&#xff0c;一只海鸥扇动翅膀足以永远改变天气变化。”在以后的演讲和论…
阅读更多...
输出正射图时，分辨率怎么填写整幅输出？

输出正射图时，分辨率怎么填写整幅输出？

答&#xff1a;设置完输出路径、分辨率、坐标系后&#xff0c;会给图像宽高&#xff0c;根据最大值设置分幅尺寸就可以。 DasViewer是由大势智慧自主研发的免费的实景三维模型浏览器,采用多细节层次模型逐步自适应加载技术,让用户在极低的电脑配置下,也能流畅的加载较大规模实景…
阅读更多...
红龙工业设备制造有限公司亮相2024杭州数字物流技术设备展

红龙工业设备制造有限公司亮相2024杭州数字物流技术设备展

参展企业介绍 温州红龙工业设备制造有限公司成立于2015年11月。是中国先进的工业皮带设备研发制造和工业皮带整体解决方案运营服务商&#xff0c;现主营皮带接头机、皮带热压机、皮带接驳机、皮带打齿机、输送带打齿机、输送带分层级、输送带导条机、输送带裁切机、高频机等工业…
阅读更多...
前端开发指导

前端开发指导

前端开发指导 本文介绍了配置前端开发环境需要的软件、配置项等，指导如何开始进行UDM部门前端开发的全流程。本文以Windows系统下在Microsoft Virtual Studio Code中开发为基础。 一、综述 目标：零基础或者新员工依照此文档，能够完成开发环境的搭建及熟悉测试环境的搭建。…
阅读更多...
陪诊陪护小程序基于ThinkPHP + FastAdmin + 微信小程序开发（源码搭建/上线/运营/售后/更新

陪诊陪护小程序基于ThinkPHP + FastAdmin + 微信小程序开发（源码搭建/上线/运营/售后/更新

支持多运营区&#xff0c;陪护师、推广者等完整闭环功能&#xff0c;快速搭建陪护业务平台。 消息通知&#xff1a;系统可以向用户发送订单状态变更、陪诊员信息更新等通知&#xff0c;确保用户及时了解相关信息&#xff0c;提高用户体验。 订单管理&#xff1a;患者可以查看自…
阅读更多...
QT 小项目：登录注册账号和忘记密码（下一章实现远程登录）

QT 小项目：登录注册账号和忘记密码（下一章实现远程登录）

一、环境搭建 参考上一章环境 二、项目工程目录 三、主要源程序如下&#xff1a; registeraccountwindow.cpp 窗口初始化&#xff1a; void registeraccountWindow::reginit() {//去掉&#xff1f;号this->setWindowFlags(windowFlags() & ~Qt::WindowContextHelpButt…
阅读更多...
《数据结构与算法之美》学习笔记一

《数据结构与算法之美》学习笔记一

前言&#xff1a;今天开始学习极客时间的课程《数据结构与算法之美》。为撒要学习这个&#xff1f;因为做力扣题太费劲了&#xff0c;自己的基础太差了&#xff01;所以要学习学习。开一个系列记录一下学习笔记。认真学吧&#xff0c;学有所获才不负韶华&#xff01;之前就学过…
阅读更多...
【bug记录】Vue3 Vant UI 中 van-popup 不弹出

【bug记录】Vue3 Vant UI 中 van-popup 不弹出

原因&#xff1a;语法使用错误&#xff0c;使用了 Vue 2 的语法 Vue3语法&#xff1a; Vue2语法&#xff1a;
阅读更多...
JAVA IO/NIO 知识点总结

JAVA IO/NIO 知识点总结

一、常见 IO 模型简介 1. 阻塞IO模型 最传统的一种IO模型&#xff0c;即在读写数据过程中会发生阻塞现象。当用户线程发出IO请求之后&#xff0c;内核会去查看数据是否就绪&#xff0c;如果没有就绪就会等待数据就绪&#xff0c;而用户线程就会处于阻塞状态&#xff0c;用户线…
阅读更多...
企业微信创建应用(一)

企业微信创建应用(一)

登录到企业微信后台管理(https://work.weixin.qq.com/)进入自建应用(应用管理-应用-创建应用) 3.查看参数AgentId和 Secret 4.企业微信查看效果
阅读更多...
致远M3 Session 敏感信息泄露漏洞复现

致远M3 Session 敏感信息泄露漏洞复现

0x01 产品简介 M3移动办公是致远互联打造的一站式智能工作平台，提供全方位的企业移动业务管理，致力于构建以人为中心的智能化移动应用场景，促进人员工作积极性和创造力，提升企业效率和效能，是为企业量身定制的移动智慧协同平台。 0x02 漏洞概述 致远M3 server多个日志文…
阅读更多...
我国吻合器市场规模不断扩大 国产化率有所增长

我国吻合器市场规模不断扩大 国产化率有所增长

我国吻合器市场规模不断扩大 国产化率有所增长 吻合器是替代手工切除或缝合的一种医疗器械&#xff0c;其工作原理与订书机十分相似&#xff0c;可利用钛钉对组织进行离断或吻合。经过多年发展&#xff0c;吻合器种类逐渐增多&#xff0c;根据手术方式不同&#xff0c;吻合器大…
阅读更多...
uni-app（二）：本地插件使用（Android）

uni-app（二）：本地插件使用（Android）

本地插件使用 项目创建等参考1.下载并引用本地插件2.注意插件配置3.制作自定义基座4.编写调用代码5.运行 项目创建等参考 https://lprosper.blog.csdn.net/article/details/138655526 1.下载并引用本地插件 2.注意插件配置 3.制作自定义基座 4.编写调用代码 <template>…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023