[Qt] 常用控件 | QWidget | “表白程序2.0”

目录

一、控件概述

控件体系的发展阶段:

二、QWidget 核心属性

核心属性概览:

1、enabled

2、Geometry

实例 1: 控制按钮的位置

实例 2: 表白 程序

i、Window Frame 的影响

ii、API 设计理念

iii、Geometry 和 FrameGeometry 的区别

(1) 在按钮的 slot 函数中编写代码 & 在构造函数中也添加同样的代码

(2)执行程序


一、控件概述

  • Widget:Qt 中的核心概念,指图形化界面的基本构成元素(如按钮、列表视图等),即“控件”。
  • Qt 的优势:内置大量常用控件,并支持自定义控件,便于快速开发符合需求的界面。

像上述示例中的按钮列表视图树形视图单行输入框多行输入框滚动条下拉框都可以称为控件”。

  • Qt 作为一个成熟的 GUI 开发框架,内置了大量的常用控件。
  • 这一点在 Qt Designer 中就可以看出来,并且 Qt 也提供了 “自定义控件” 的能力,可以让我们在现有控件不能满足需求的时候,对现有控件做出扩展,或者手搓出新的控件。

所以,学习 Qt 其中一个很重要的任务就是熟悉并掌握 Qt 内置的常用控件,这些控件对于我们快速开发出符合需求的界面是至关重要的。


控件体系的发展阶段:
  1. 无控件阶段完全没有控件。此时需要通过一些绘图 API 手动的绘制出按钮或者输入框等内容,代码编写繁琐。

(例如文曲星的 Lava 平台开发)

  1. 粗略控件阶段提供基本控件,如按钮和输入框,简化了GUI开发。

(例如 html 的原生控件)

  1. 成熟控件体系更完整的控件体系,基本可以覆盖到 GUI 开发中的大部分场景。(例如早期的 MFC、VB、C++ Builder、Qt、Delphi、后来的 Android SDK、Java FX、前端的各种 UI 库等)

上图是前端中的 Element-ui 中的控件概览,无论是丰富程度还是颜值,都比 Qt 自带的控件更胜一筹


二、QWidget 核心属性

  • 在 Qt 中,使用 QWidget 类表示 “控件”,像按钮、视图、输入框、滚动条等具体的控件类,都是继承自 QWidget。QWidget 中包含了 Qt 整个控件体系中通用的部分。
  • 在 Qt Designer 中,随便拖一个控件过来,选中该控件,即可在右下方可以看到 QWidget 中的属性。

这些属性既可以通过 QtDesigner 直接修改,也可以通过代码的方式修改。这些属性的具体含义在 Qt Assistant 中均有详细介绍。

Qt Assistant 中搜索 QWidget,即可找到对应的文档说明(或者在 Qt Creator 代码中选中 QWidget,按 F1(+Fn) 也可)


核心属性概览:

QWidget 属性及其作用:

属性

作⽤

enabled

设置控件是否可使用。true 表示可用,false 表示禁用。

geometry

控制控件的位置和尺寸,包含 x, y, width, height 四个部分。坐标是以父元素为参考进行设置的。

windowTitle

设置 widget 的标题。

windowIcon

设置 widget 的图标。

windowOpacity

设置 widget 的透明度。

cursor

设置鼠标悬停时显示的图标形状,如普通箭头、沙漏或十字等。可通过 Qt Designer 查看选项。

font

控制字体相关属性,包括字体家族、大小、粗体、斜体、下划线等样式。

toolTip

当鼠标悬停在 widget 上时,在状态栏中显示的提示信息。

toolTipDuration

toolTip 显示的持续时间。

statusTip

当 widget 状态发生改变时(如按钮被按下)显示的提示信息。

whatsThis

当鼠标悬停并按下 Alt+F1 时,显示的帮助信息(显示在一个弹出窗口中)。

styleSheet

允许使用 CSS 来设置 widget 中的样式,支持丰富的样式,便于前端开发者上手。

focusPolicy

定义 widget 如何获取焦点:NoFocus, TabFocus, ClickFocus, StrongFocus, WheelFocus

contextMenuPolicy

设置上下文菜单的显示策略:DefaultContextMenu, NoContextMenu, PreventContextMenu, ActionsContextMenu, CustomContextMenu

locale

设置语言和国家地区。

acceptDrops

设置该部件是否接受拖放操作。true 表示可以接收来自其他部件的拖放操作;false 则表示不接收任何拖放操作。

minimumSize

控件的最小尺寸,包含最小宽度和最小高度。

maximumSize

控件的最大尺寸,包含最大宽度和最大高度。

sizePolicy

设置控件在布局管理器中的缩放方式。

windowModality

指定窗口是否具有 "模态" 行为。

sizeIncrement

拖动窗口大小时的增量单位。

baseSize

窗口的基础大小,用于配合 sizeIncrement 调整组件尺寸。

palette

设置 widget 的颜色风格。

mouseTracking

是否跟踪鼠标移动事件。true 表示需要跟踪;false 表示不需要跟踪。

tabletTracking

是否跟踪触摸屏的移动事件,类似于 mouseTracking。Qt 5.9 引入的新属性。

layoutDirection

设置布局方向:LeftToRight, RightToLeft, LayoutDirectionAuto

autoFillBackground

是否自动填充背景颜色。

windowFilePath

将 widget 和一个本地文件路径关联起来。

accessibleName

设置 widget 的可访问名称,辅助技术(如屏幕阅读器)可以获取到这个名称。

accessibleDescription

设置 widget 的详细描述,作用同 accessibleName

inputMethodHints

针对输入框有效,用来提示用户当前能输入的合法数据格式,如只能输入数字、只能输入日期等。

下面我会介绍上面列出的其中一些比较重要和常用的属性。


1、enabled

  • 所谓 “禁用” 指的是该控件不能接收任何用户的输入事件,并且外观上往往是灰色的。
  • 如果一个 widget 被禁用,则该 widget 的子元素也被禁用。

使用代码创建一个禁用状态的按钮:

运行程序,可以看到按钮处于灰色状态,无法被点击:


通过按钮 2 切换按钮 1 的禁用状态

(1)使用 Qt Designer 拖两个按钮到 Widget 中

  • 两个按钮的 objectName 分别为 pushButton 和 pushButton_2。

QObject 的 objectName 属性介绍:

  • QObject 是 QWidget 的父类,里面最主要的属性就是 objectName。在一个 Qt 程序中,objectName 相当于对象的身份标识,彼此之间不能重复。
  • 在使用 Qt Designer 时,尤其是界面上存在多个 widget 的时候,可以通过 objectName 获取到指定的 widget 对象。
  • Qt Designer 生成的 ui 文件,本身是 xml 格式的,qmake 会把这个 xml 文件转换成 C++ 的 .h 文件(这个文件生成在 build 目录中),构成一个 ui_widget 类。
  • 每个 widget 的 objectName 最终就会成为 ui_widget 类的属性名字。最终这个类的实例就是:Ui::Widget *ui,因此就可以通过形如 ui->pushButton 或者 ui->pushButton_2 这样的代码获取到界面上的 widget 对象了。
  • 当前自动生成的 objectName 是有规律的:控件的类型 + 下划线 + 数字。很明显,以数字的方式命名并不是一个好的编程习惯,这里我将它修改为如下所示:

(2)生成两个按钮的 slot 函数

  • 使用 isEnabled 获取当前按钮的可用状态。
  • 使用 setEnabled 修改按钮的可用状态,此处是直接针对原来的可用状态进行取反后设置。

运行程序可以看到:初始情况下,上面的按钮是可用状态。接着点击下方按钮,即可使上方按钮被禁用~

在 Qt Designer 中创建按钮的时候可以设置按钮的初始状态是 “可用” 还是 “禁用”。如果把 enabled 这一列的对钩去掉,则按钮的初始状态就是 “禁用” 状态。


2、Geometry

位置和尺寸是四个属性的统称:

  • x 横坐标
  • y 纵坐标
  • width 宽度
  • height 高度

在实际开发中,我们通常不会直接使用这四个属性来获取或修改控件的位置和大小。

Qt 提供了一系列封装的方法,这些方法更方便操作,并且考虑到了 Qt 的左手坐标系——其中原点位于父元素的左上角。

实例 1: 控制按钮的位置

创建界面布局:

  • 在界面上拖拽五个按钮,分别命名为 pushButton_target(目标按钮)、pushButton_up(向上移动按钮)、pushButton_down(向下移动按钮)、pushButton_left(向左移动按钮)和 pushButton_right(向右移动按钮)。这些按钮的初始位置和大小可以随意设置。

编写槽函数:

    • widget.cpp 文件中为每个方向的按钮添加槽函数,用于改变 pushButton_target 的位置。当点击相应的方向按钮时,会调整目标按钮的 x 和 y 坐标,从而实现位置变化。
    • 注意,这样做会导致按钮的整个矩形区域发生位移,而不仅仅是其左上角

优化移动逻辑:

    • 如果希望按钮只移动而不改变尺寸,应该避免直接修改 QRect 对象中的 x 和 y 值。
    • 相反,可以通过 setGeometry() 方法的第二个版本来重新设定按钮的位置,保持宽度和高度不变。

上述代码使用 move 方法也是可以的。

运行,发现设置成功~

实例 2: 表白 程序

设计界面:

    • 向界面上添加两个按钮(接受 pushButton_accept 和拒绝 pushButton_reject)以及一个标签 label,用来显示文本信息。

实现交互逻辑:

    • widget.cpp 中定义槽函数,使得当用户点击 "Sorry.." 拒绝按钮时,触发按钮逃跑的行为。
    • 此行为可以通过监听 clicked 事件(即鼠标点击后释放)实现。

运行程序可以看到:当点击 "Sorry.." 时,按钮就跑了。

上述代码使用的是 clicked(一下一上是点击),如果使用 pressed(鼠标按下事件)。

如果使用 mouseMoveEvent,会更狠一些, 只要鼠标移动过来,按钮就跑了

对应的代码更麻烦⼀些,需要使用到 Qt 的使用机制(需要自定义类继承自 QPushButton,重写 mouseMoveEvent 方法)这里就暂时不展开了。


i、Window Frame 的影响

widget 作为一个窗口时(例如带有标题栏等),计算尺寸和坐标有两种算法:

  • 包含 window frame 的方式(如 x(), y(), frameGeometry(), pos(), move()
  • 不包含 window frame 的方式(如 geometry(), width(), height(), rect(), size()

对于非窗口的 widget,这两种计算方式的结果是一致的。

ii、API 设计理念

API

说明

x()

获取横坐标。计算时包含 window frame。

y()

获取纵坐标。计算时包含 window frame。

pos()

返回 QPoint 对象,包含 x()y() 的值及设置方法。计算时包含 window frame。

frameSize()

返回 QSize 对象,包含 width()height() 及其设置方法。计算时包含 window frame。

frameGeometry()

返回 QRect 对象,相当于 QPointQSize 的结合体,可以获取 x, y, width, size。计算时包含 window frame 对象。

width()

获取宽度。计算时不包含 window frame。

height()

获取高度。计算时不包含 window frame。

size()

返回 QSize 对象,包含 width()height() 及其设置方法。计算时不包含 window frame。

rect()

返回 QRect 对象,可以获取并设置 x, y, width, size。计算时不包含 window frame 对象。

geometry()

返回 QRect 对象,可以获取 x, y, width, size。计算时不包含 window frame 对象。

setGeometry()

设置窗口的位置和尺寸,可以设置 x, y, width, height 或 QRect 对象。计算时不包含 window frame 对象。

认真观察上面的表格,可以看到,其实这里的 API 有 frameGeometry 和 geometry 两个就足够完成所有的需求了。

为什么要提供这么多功能重复的 API 呢?

这涉及到 Qt API 的设计理念:尽量符合人的直觉。例如,Qt 的 QVector 提供了多种尾插元素的方法:

  • push_back
  • append
  • +=
  • <<

上述方法的效果都是等价的,即使不翻阅文档,单纯的凭借直觉就能把代码写对。减少了记忆负担,使编程变得更加直观和友好。


iii、Geometry 和 FrameGeometry 的区别
(1) 在按钮的 slot 函数中编写代码 & 在构造函数中也添加同样的代码

(2)执行程序
  • 可以看到:在构造函数中打印出的 geometry 和 frameGeometry 是相同的。
  • 但是在点击按钮时,打印的 geometry 和 frameGeometry 则存在差异。

注意:

  • 在构造方法中,Widget 刚刚创建出来,还没有加入到对象树中,此时也就不具备 Window frame。
  • 在按钮的 slot 函数中,由于用户点击的时候,对象树已经构造好了,此时 Widget 已经具备了 Window frame,因此在位置和尺寸上均出现了差异。
  • 如果把上述代码修改成打印 pushButton 的 geometry 和 frameGeometry,结果就是完全相同的。因为 pushButton 并非是一个窗口。

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

laravel部署到云服务器上,除了首页之外,区域页面找不到路由

laravel部署到云服务器上&#xff0c;除了首页之外&#xff0c;区域页面找不到路由&#xff0c;都是报404错误 解决方法&#xff1a; &#xff08;注&#xff1a;本人服务器使用宝塔面板&#xff09; 打开宝塔面板&#xff0c;找到该站点->配置文件 在下方增加如下代码 …

git注意事项

提交代码的备注 feat : 开发 新增功能 fix: 修复 git相关 1. git安装及全局用户设置 Git安装 npm install git -ggit修改用户名邮箱密码 git config --global --replace-all user.name "要修改的用户名" git config --global --replace-all user.email"要修改…

Agent系列:AppAgent v2-屏幕智能Agent(详解版)

引言 简介 方法 Agent 框架 Agent 交互 探索阶段 部署阶段 文档生成 高级功能 实验结果 总结 局限性 未来工作 1. 引言 大语言模型&#xff08;LLM&#xff09;如 ChatGPT 和 GPT-4 显著提升了自然语言处理能力&#xff0c;并且推动了智能体在自主决策中的应用。…

flink cdc oceanbase

接上文&#xff1a;一文说清flink从编码到部署上线 环境&#xff1a;①操作系统&#xff1a;阿里龙蜥 7.9&#xff08;平替CentOS7.9&#xff09;&#xff1b;②CPU&#xff1a;x86&#xff1b;③用户&#xff1a;root。 预研初衷&#xff1a;现在很多项目有国产化的要求&#…

Docker 安装与配置 Nginx

摘要 1、本文全面介绍了如何在 Docker 环境中安装和配置 Nginx 容器。 2、文中详细解释了如何设置 HTTPS 安全连接及配置 Nginx 以实现前后端分离的代理服务。 2、同时&#xff0c;探讨了通过 IP 和域名两种方式访问 Nginx 服务的具体配置方法 3、此外&#xff0c;文章还涵…

C语言格式输出

1.转换字符说明&#xff1a; 2.常用的打印格式&#xff1a; 在 C 语言中&#xff0c;格式输出主要依靠 printf 函数来实现。以下是一些 C 语言格式输出的代码举例及相关说明。 printf("%2d"&#xff0c;123)&#xff0c;因为输出的部分有三位数&#xff0c;但是要求…

yolov5核查数据标注漏报和误报

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、误报二、漏报三、源码总结 前言 本文主要用于记录数据标注和模型预测之间的漏报和误报思想及其源码 提示&#xff1a;以下是本篇文章正文内容&#xff0c;…

Word如何插入图片并移动到某个位置

Word如何插入图片并移动到某一个位置 新建word→插入→图片 选择合适的位置→选择图片→打开 点击图片→布局选项→选择文字环绕下的任意一个→固定在页面上 点击图片就可以将图片移动到任意位置

【prometheus】【blackbox_exporter】grafna导入blackbox_exporter看板配置

1、进入到grafana看板&#xff0c;选择合适的看板模版 地址&#xff1a;https://grafana.com/grafana/dashboards/ 在搜索框中输入 blackbox_exporter,找到合适的模版&#xff0c;如下图所示&#xff1a; 2、点击并下载对应看板JSON数据 3、在grafana的页面进行导入操作 3.1…

微服务面试题:分布式事务和服务监控

&#x1f9d1; 博主简介&#xff1a;CSDN博客专家&#xff0c;历代文学网&#xff08;PC端可以访问&#xff1a;https://literature.sinhy.com/#/?__c1000&#xff0c;移动端可微信小程序搜索“历代文学”&#xff09;总架构师&#xff0c;15年工作经验&#xff0c;精通Java编…

wx015基于springboot+vue+uniapp的经济新闻资讯的设计与实现

开发语言&#xff1a;Java框架&#xff1a;springbootuniappJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#…

获取用户详细信息-ThreadLocal优化

Thread全局接口可用&#xff0c;不用再重复编写。所以为了代码的复用&#xff0c;使用Thread。把之前的内容&#xff08;函数的参数和map与username&#xff09;注释掉&#xff0c;换为Thread传过来的内容&#xff08;map与username&#xff09;。 因为Thread需要在拦截器里面…

【论文阅读笔记】IceNet算法与代码 | 低照度图像增强 | IEEE | 2021.12.25

目录 1 导言 2 相关工作 A 传统方法 B 基于CNN的方法 C 交互方式 3 算法 A 交互对比度增强 1)Gamma estimation 2)颜色恢复 3)个性化初始η B 损失函数 1)交互式亮度控制损失 2)熵损失 3)平滑损失 4)总损失 C 实现细节 4 实验 5 IceNet环境配置和运行 1 下载…

git环境配置用户与秘钥

git环境配置用户与秘钥 git环境配置git配置用户名与邮箱git配置秘钥 git环境配置 已经安装git后环境配置 git配置用户名与邮箱 查看git版本 git -v查看git配置环境 git config --global --list第一次未配置时会报无法找到配置文件 全局配置git用户名 git config --glob…

logback日志框架源码分析

目录 (一)入口:slf4j选择日志框架 (二)日志框架初始化 (1)logback的3种配置方式 a、BasicConfigurator默认配置 b、SPI方式配置的Configurator实现类 c、通过配置文件初始化 (2)xml配置文件初始化 (三)Logger的创建 (四)打印日志 本文源码基于:logback版…

SpringBoot整合篇 05、Springboot整合Redission

文章目录 前言Redission详细配置步骤pom依赖application.yaml配置类CacheConfigEnvironmentContext RedissionController单测 前言 本篇博客是SpringBoot整合Redission&#xff0c;若文章中出现相关问题&#xff0c;请指出&#xff01; 所有博客文件目录索引&#xff1a;博客…

从0入门自主空中机器人-4-【PX4与Gazebo入门】

前言: 从上一篇的文章 从0入门自主空中机器人-3-【环境与常用软件安装】 | MGodmonkeyの世界 中我们的机载电脑已经安装了系统和常用的软件&#xff0c;这一篇文章中我们入门一下无人机常用的开源飞控PX4&#xff0c;以及ROS中无人机的仿真 1. PX4的安装 1.1 PX4固件代码的下载…

支持最新 mysql9的workbench8.0.39 中文汉化教程来了

之前在 B 站上发布了 mysql8 workbench 汉化教程&#xff0c;一年多来帮助很多初学者解决了不熟悉英文的烦恼。 汉化视频可以访问&#xff1a; 2024最新版mysql8.0.39中文版mysql workbench汉化 中文升级 旧版汉化报错解决_哔哩哔哩_bilibili MySql Workbench汉化_哔哩哔哩_…

RC充电电路仿真与分析

RC充电原理 下图是一个常见的RC充电电路&#xff1a;&#xff08;假设R10K&#xff0c;C100nF&#xff09; SW断开时&#xff0c;这个电路处于断路状态&#xff0c;C既没有充电也没有放电&#xff1b;SW闭合时&#xff0c;直流电源5V为电容C充电&#xff1b; 充电时电容两端…

(二)编译原生SDK以及配置交叉编译链

文章目录 编译原生SDKLinuxSDK的安装第一步解压LinuxSDK第二步安装依赖软件第三步解压Buildroot的dl文件 Linux系统镜像编译、生成第一步 配置编译环境第二步 编译 LinuxSDK编译上面配置好的 环境配置编译 LinuxSDK配置内核选项配置 Buildroot编译 Qt 库 编译生成 Linux 系统镜…