C++实践之Qt学习(六):Qt设计器之常用控件、布局和样式

2023-11-17

常用控件

按钮

在这里插入图片描述
Buttons分类中包含了Qt中常用的按钮控件,其中常用的有:

普通按钮

Push Button:即常用的普通按钮,通常用来进行点击后执行某个命令。
设置按钮图片:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
还可以设置按钮的三态图:

ui->play_button->setStyleSheet(
	"QPushButton{border-image:url(:/new/icons/icons/play.png);}"
   	"QPushButton:hover{border-image: url(:/new/icons/icons/play-hover.png);}"
   	"QPushButton:pressed{border-image: url(:/new/icons/icons/play-pressed.png);}");

单选按钮

Radio Button:单选按钮,通常由2个或以上的单选按钮组成一组,同一组内的单选按钮只能有一个被选中。

单选按钮的分组规则:“同一个父窗体”或“一个button group”,这就是分组。如果没有进行分组,则默认拥有相同父窗体的radio buttons都将具有相互排他性,所以如果你想在一个窗体中表达多组radio buttons的效果,需要显式地对它们进行分组,可以使用QGroupBox或者QButtonGroup。建议使用QButtonGroup,因为它仅仅是一个容器,不会有任何视觉表现,并且对于包含在它里面的子buttons,QButtonGroup提供比QGroupBox方便的信号槽操作。

如何给单选按钮分组:

一种是通过将单选按钮放到一个Group Box中,另一种是选中要分组的单选按钮后右键,选择”指定到按钮组“,并新建按钮组(如果已经有按钮组,可以指定加入到某一个组中):
在这里插入图片描述
在这里插入图片描述
分组后,在程序中就可以按组进行单选了:
在这里插入图片描述
代码中如何判断哪个按钮被选中

对该对象调用isChecked()方法,可判断该单选按钮是否被选中

单选按钮的样式

不能直接设置单选按钮的图片,要设置的是单选按钮的指示器的图片:

ui->radioButton->setStyleSheet(
            "QRadioButton::indicator{border-image: url(:/uncheck);}"
            "QRadioButton::indicator:checked{border-image: url(:/checked);}");
多选按钮

Check Box:复选框,可以提供多个复选框进行多个选中。
在这里插入图片描述
代码中如何判断复选框是否选中

也是通过isChecked()方法来判断:

    if (ui->chkSport->isChecked())
    {
        std::cout << "运动" << std::endl;
    }
    if (ui->chkMovie->isChecked())
    {
        std::cout << "电影" << std::endl;
    }
    if (ui->chkMusic->isChecked())
    {
        std::cout << "音乐" << std::endl;
    }

其他的按钮

Tool Button:工具按钮,可以隐藏文字只显示图片,通常用在工具栏上的快捷操作。

Command Link Button:命令连接按钮,默认带一个箭头图标,通常用于进行向导之类的窗口中

Dialog Button Box:对话框按钮盒,默认包含了对话框中的确认和取消两个按钮,其中OK按钮会发射accepted信号,cancel按钮发射rejected信号。

显示控件

在这里插入图片描述
Display Widgets分类下都是和显示相关的控件,比较常用的有:

标签

Label:简单的显示控件,可以显示文字和图片,通过设置其text属性可以设置文本内容,设置其pixmap属性可以设置其中的图片,设置可以通过设计器直接设置:
在这里插入图片描述
另外scaledContents属性可以进行内容的缩放,如果设置了pixmap,则可以按控件尺寸进行图片的缩放。

相应的其实是通过调用setText(const QString &)setPixmap(const QPixmap &)函数来设置其中显示的文本和图片,但是要注意,如果同时调用这两个方法是不会同时起作用的,后调用的设置会覆盖前面的设置。
在这里插入图片描述
在这里插入图片描述
如果要设置带背景图,带文字的Label,可以通过编辑控件的样式表,使用样式中的背景图来设置。

设置文字颜色和字体:
在这里插入图片描述
其中palette是调色板,用来设置整个控件上的颜色,包括文本颜色、按钮上的文字颜色等,下方还有预览效果
在这里插入图片描述
不过直接在样式表中修改更加简单。

其他显示控件

  • Text Browser:文本显示控件,默认是只读,可以修改其”Readonly“属性使其可输入。
    TextBrowser可以支持文本的自动换行,并且超出显示范围时会自动添加滚动条支持滚动浏览。

  • Calendar Widget:日历控件,显示一个日历,同时可以使用selectedDate()方法来返回当前选中的日期,返回值是一个QDate类型的数据。

  • LCD Number:模仿 LCD 数字的显示组件,可以显示整数或浮点数,显示整数时可以不同进制显示

  • Progress Bar:进度条,一般用于显示任务进度,可用于数值的百分比显示。

输入控件

在这里插入图片描述
Qt提供了很多的输入控件,常用的有:

  • Line Edit:单行文本编辑框,可以通过设置属性使其成为密码输入框
  • Text Edit:文本编辑框,可以编辑和显示纯文本和富文本(HTML、MD),可对用户输出进行快速响应,并优化了处理大型文档的能力
  • Plain Text Edit:用来编辑和显示多行简单纯文本内容
  • Spin Box、Double Spin Box:数字调整框
  • Combo Box:组合下拉框
  • Time Edit、Date Edit、Date/Time Edit:时间、日期编辑框、日期时间编辑框
  • Dial:表盘式数值输入控件

数据项控件

在这里插入图片描述
Item Widgets继承自Item Views,功能较多,使用上要简单一些,因此建议使用。缺点是处理大数据量时性能相对较低。

Item Views类控件是MVC(Model、View、Controller)架构的一种简化,数据和展现及实现逻辑分开,数据在Model中存储和操作,View负责展现、界面操作及逻辑控制;Item Widgets则将数据、展现及控制合并在一起,开发中没有Item Views灵活,实际上Item Widgets就是在Item Views的基础上绑定了一个默认的存储并提供了相关方法。

  • List Widget:列表控件,以一列的方式展示数据
  • Tree Widget:树形控件
  • Table Widget:表格控件,以行列形式展示数据,比较常用,例如显示多名学生信息、显示公司内员工信息等

容器控件

在这里插入图片描述
容器控件是为了容纳其他控件使用的,例如Group Box进行分组,Tab Widget用来创建标签页,Scroll Area可以用来设计复杂的滚动页面(例如页面上的控件是动态添加进去的,需要自适应滚动)。

其他的控件使用较少。

布局

Qt布局介绍

当我们在界面上摆放了多个控件后,控件之间是杂乱无章的,当窗口尺寸变化时,也不会自动调整,这就需要使用布局来解决这个问题。

布局控件在设计器的Layouts分类下:
在这里插入图片描述
这里还少了一个分裂器布局,在工具栏上:
在这里插入图片描述
当我们将控件纳入到指定的布局中,控件的摆放位置以及大小都会受到布局的限制。

注意,在设置布局时,别忘了设置顶层布局,也就是窗体的布局,顶层布局的作用是确保窗口大小在调整时能正确的调整控件的大小。

Horizontal Layout:水平布局,被纳入水平布局中的控件将总是以水平方向排列

Vertical Layout:垂直布局,控件将按照垂直方向排列

Grid Layout:栅格布局,此布局以网格样式管理控件,其中每个格子的大小是相同的

From Layout:窗体布局(类似于表单),该布局以两列形式排列控件,其中左侧列的宽度将会比较少且固定,右侧列的控件大小可以改变

Spliter:分裂器是一个可以包含其他控件的控件,内部控件会被一个分割条分隔开,并且拖动分隔条可以改变内部控件的大小,通常用来配合其他的布局进行界面控件的排列控制。

示例:
在这里插入图片描述
在这里插入图片描述
PS:设定编辑区的最大高度,树形控件的最大宽度

运行效果:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

设置布局的方式

1、先拖布局,再将控件拖入到布局中

2、选中需要纳入布局的控件,之后点击工具栏上的布局快捷按钮,或者右键后选择”布局“

样式

Qt中可以通过设置控件的styleSheet属性给控件进行一些美化操作,这里的styleSheet属性可以直接设置一些现有的资源属性:
在这里插入图片描述
在这里插入图片描述
另外,还可以通过读取外部样式表的方式来设置控件样式。

Qt中的样式和HTML中的CSS样式表很像,在Qt中的外部样式表需要简历qss文件,其中编写样式属性,然后需要将qss样式表文件添加到资源文件qrc中,之后就可以读取设置了。

外部样式表

1、创建一个文本文件,并将后缀名保存为qss:
在这里插入图片描述
在这里插入图片描述
2、编写样式规则

样式规则类似于CSS样式,由选择符和属性组成,例如:

QPushButton {
color: white;
background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #88d, stop: 0.1 #99e, stop: 0.49 #77c, stop: 0.5 #66b, stop: 1 #77c);
border-width: 1px;
border-color: #339;
border-style: solid;
border-radius: 7;
padding: 3px;
font-size: 10px;
padding-left: 5px;
padding-right: 5px;
min-width: 50px;
max-width: 50px;
min-height: 13px;
max-height: 13px;
}

QPushButton:hover {
background-color: #333333;
border-color: #444444;
}

QPushButton:pressed {
background-color: #111111;
border-color: #333333;
color: yellow;
}

QPushButton:disabled {
color: #333333;
}

3、添加到qrc资源中:
在这里插入图片描述
4、应用样式

样式规则有针对某个控件的,有针对全局的,例如要对全局应用样式,则可以:

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    // 加载样式资源文件
    QFile f(":/style.qss");
    f.open(QFile::ReadOnly);
    a.setStyleSheet(f.readAll());

    MyFirstWnd w;
    w.show();
    return a.exec();
}

这样界面中所有的QPushButton都会受该样式规则的作用:
在这里插入图片描述
利用样式表文件,可以实现全局皮肤设计,制作出易于使用的界面效果。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

C++实践之Qt学习(六):Qt设计器之常用控件、布局和样式 的相关文章

  • Qt 计算和比较密码哈希

    目前正在 Qt 中为测验程序构建面向 Web 的身份验证服务 据我了解 在数据库中存储用户密码时 必须对其进行隐藏 以防落入坏人之手 流行的方法似乎是添加的过程Salt https en wikipedia org wiki Salt cr
  • qt项目如何设置安装路径

    我正在寻找与 qmake configure prefix 等效的内容 基本上 我想覆盖默认的安装 部署目录 这是如何用命令行 qmake 指定的 我还使用 QtCreator 构建了很多 gui 项目 并且我想知道如何在 QtCreato
  • 仅将非模态 QDialog 窗口放置在我的应用程序顶部,而不是所有应用程序顶部

    我有一个 QDialog 窗口 它应该始终位于我的应用程序顶部 它不是模态的 用户可以随时与对话框和主应用程序进行交互 使用窗口保持在顶部提示在某种程度上实现了这一点 但是 该对话框仍然位于所有其他正在运行的应用程序 例如记事本 chrom
  • 如何在 Qt-Embedded 中(正确)输出多语言文本?

    我的目标系统是 linux 3 3 7 Qt Embedded 开源版 4 8 Droid 字体 取自 fonts droid 20111207 git 1 all deb Debian 软件包并复制到 usr lib fonts目录 主要
  • Qt/c++ 随机字符串生成[重复]

    这个问题在这里已经有答案了 我正在创建一个应用程序 需要生成多个随机字符串 几乎就像一个由一定长度的 ASCII 字符组成的唯一 ID 这些字符混合有大写 小写 数字字符 有没有 Qt 库可以实现这一点 如果没有 在纯 C 中生成多个随机字
  • 如何在 C++ 和 QML 应用程序中使用 qrc?

    我在 Windows7 上用 c qnd Qt Creator QML 编写了 Qt Quick Desktop 应用程序 现在 我必须部署它 并且我需要隐藏 qml 文件和图像 意味着 将它们放入资源等中 我读到有一个很好的方法可以使用
  • Qt 创建者 + MITK (Linux)

    我正在尝试使用MITK 与 Qt Creator 我已经通过 ccmake 成功编译并使用了 VTK 和 ITK 我已经编译了 MITK超级建造模式 它下载 CTK VTK ITK 等 然后我就配置好了 我已经用 make 编译了 大约两个
  • Qt WinRT 应用程序无法访问文件权限被拒绝

    我需要使用 Qt 和 FFMPEG 开发 WinRT 应用程序 我根据指令构建了 WinRT 的 ffmpeghere https github com Microsoft FFmpegInterop我可以将库与我的项目链接起来 现在我需要
  • 如何在模型更改时停止ListView“跳跃”

    我需要做什么 我需要创建一个聊天窗口用一个ListView在 QML 中存储聊天消息 我设置listView positionViewAtEnd 以便跟踪最后的消息 我禁用positionViewAtEnd当我向上滚动时 我可以阅读过去的消
  • 如何使用 Qtimer 添加 1 秒延迟

    我目前有一个方法如下 void SomeMethod int a Delay for one sec timer gt start 1000 After one sec SomeOtherFunction a 这个方法实际上是一个附加到信号
  • 从布局中按名称获取小部件

    如果我想从 python Qt 的布局中获取特定的小部件 我应该如何进行 到目前为止我所做的 for i in range self ui horizontalLayout 14 count here it does fail name s
  • 在 Qt5 中,是否需要 Q_INVOKABLE 来从 QML 调用公共 QObject 函数?

    我刚刚意识到我可以调用暴露于 QML 的对象的几乎任何函数 现在我对 Q INVOKABLE 很好奇 Qt5docs http doc qt io qt 5 qtqml cppintegration exposecppattributes
  • 如何将图像显示为缩略图

    我有一个QTreeView显示硬盘驱动器和目录 我也有一个QListView显示图像文件如下 但我想将图像显示为缩略图 如下所示 My code mainWidget mainWidget QWidget parent QWidget pa
  • 为 Windows 98 编译 Qt

    我需要支持 Windows 98 Qt 文档声称这是可能的 但没有说明 Qt 4 6 的分布式二进制文件不能在 Win98 上运行 而且我采样的大多数 Qt 应用程序也不能在 Win98 上运行 对于几个确实在 98 上运行的应用程序 我询
  • 如何使QTableView类的restoreState()和saveState()正常工作?

    首先 我想说 我的问题已经在这里讨论过 并且这里是 https stackoverflow com questions 1163030 qt qtableview and horizontalheader restorestate 但答案并
  • 在 MacOS 终端上运行 ffmpeg [关闭]

    Closed 这个问题是无关 help closed questions 目前不接受答案 我对 MacOS 相当陌生 我发现使用终端来获取信息并不容易ffmpeg和我在 Window 上一样正常运行 我有 ffmpeg 二进制文件ffmpe
  • 将 gnuplot 嵌入现有 QtWidget 中

    我正在用 C 创建一个 伪 实时绘图应用程序 使用 gnuplot 作为绘图后端 我的要求之一是绘图必须位于现有窗口内 而不是有一个单独的绘图窗口 gnuplot 默认为 Gnuplot 有一个选项可以指定 Qt 小部件 ID 这似乎适合我
  • 无法在带有 QSortFilterProxyModel 的 QTreeView 的点击信号中使用 itemFromIndex

    我有一个 QTreeView 在视图和 QStandardItemModel 之间有一个 QSortFilterProxyModel 来对树进行排序 然后我想通过 clicked 信号对视图中的点击进行操作 模型 视图的设置类似于 mymo
  • 同时从多个流中捕获、最佳方法以及如何减少 CPU 使用率

    我目前正在编写一个应用程序 该应用程序将捕获大量 RTSP 流 在我的例子中为 12 个 并将其显示在 QT 小部件上 当我超过大约 6 7 个流时 问题就会出现 CPU 使用率激增并且出现明显的卡顿 我认为它不是 QT 绘制函数的原因是因
  • 从 Qt4 中的文本文件中逐字读取

    我想在 Qt4 中逐字读取一个文本文件 说实话我对它很陌生 我想在另一个文件中每行一个字写入 我可以在 C 中做到这一点 没有任何问题 但是当我尝试在 Qt4 中使用 ifstream 和 ofstream 时 我遇到了错误 这是我的 Qt

随机推荐

  • ST外设使用出错,一般排查步骤

    FMC 通信有误排查过程 1 STM32 官方设计资源 https www stmcu com cn STM32中文官网 gt 设计资源 gt 实战经验 2 Cube 库当中的官方例程 使用 everything 搜索 FMC 关键词 从而
  • 新路子!chatGPT+Python爬虫接私单怎么玩?

    就在这两天 关于ChatGPT的疾呼突然在社交平台上刷屏 很多人发现自己的号已经不在了 用户们感到前所未有的惶恐 已经有不少公司把 chatGPT引入工作流 未来已来 AI智能时代真的来了 普通人如何在智能时代谋求发展 这里提供一个思路 c
  • C++异常

    全文目录 概念 异常的抛出 在函数调用链中异常栈展开匹配原则 异常的重新抛出 异常安全 异常规范 C 标准库的异常体系 异常的优缺点 概念 C语言处理异常的方式 终止程序 返回错误码 很多系统的库函数就是使用这中方式 C 异常 异常是一种处
  • iphone原彩显示对眼睛好吗_iphonex原彩显示有必要开吗

    配置来看 iphoneX更好也2113更贵 iphone8注重5261实用 iphoneX注重装X 有钱就买iphone X 预算不足买iphone 8 4102iphone8和iphoneX的区别 1653外观设计 iPhone 8 Pl
  • 工程管理系统简介 工程管理系统源码 java工程管理系统 工程管理系统功能设计

    鸿鹄工程项目管理系统 Spring Cloud Spring Boot Mybatis Vue ElementUI 前后端分离构建工程项目管理系统 1 项目背景 一 随着公司的快速发展 企业人员和经营规模不断壮大 为了提高工程管理效率 减轻
  • caffe代码阅读7:LayerRegistry的实现细节-2016.3.18

    一 LayerRegistry的作用简介 LayerResistry的功能很简单 就是将类和对应的字符串类型放入到一个map当中去 以便灵活调用 主要就是注册类的功能 二 LayerRegistry类的详细介绍 1 构造函数和析构函数 构造
  • c-tree数据库(c-treeACE)(7):开发篇之一

    C tree提供了很多种的API 我们主要使用C 的 即c treeDB C API 主要的参考手册就是Faircom公司网站上提供的 c treeDB C API Developer s Guide 学习开发的一个最佳途径当时看看tuto
  • Python 中的自动点击器——2 种简单易行的方法

    在本教程中 我们将了解Python 中的自动答题器 我们将首先了解它的含义以及如何在 Python 中实现它 那么 事不宜迟 让我们进入正题 Auto Clicker是一种 Python 软件 允许用户以较短的时间间隔连续点击鼠标 它由用户
  • Mysql中关于NULL值的处理

    一 Mysql空值介绍 MySQL认为任何和NULL值做比较的表达式的值都为NULL 包括select null null和select null null 在对统计索引列不重复值的数量时如何对待NULL值 MySQL专门提供了一个inno
  • React 练习项目,仿简书博客写作平台

    Introduction 技术栈 react redux react router express Nginx 练习点 redux 连接 react router 路由跳转 scss 样式书写 容器组件与展示组件的设计 express 脚手
  • 【100%通过率 】【华为OD机试c++】人数最多的站点【2023 Q1

    华为OD机试 题目列表 2023Q1 点这里 2023华为OD机试 刷题指南 点这里 题目描述 关注公园园区提供小火车单向通行 从园区站点编号最小到最大通行如1 2 3 4 1 然后供员工在各个办公园区穿梭 通过对公司N个员工调研统计到每个
  • cloudflare解析域名+CDN

    cloudflare解析域名 CloudFlare 是一家全球知名的 CDN 服务商 并且提供了免费的 CDN 套餐 还不限流量 所以我们完全不需要花一分钱就能使用它的 CDN 服务 接下来我就说明如何注册并使用 CloudFlare 1
  • C/C++中的数据结构对齐,#pragma pack() 和 __attribute__

    C C 中的数据结构对齐 总览 数据结构对齐是指在计算机内存中排列和访问数据的方式 它包含三个独立但相关的问题 数据对齐 data alignment 数据结构填充 data structure padding 和打包 packing 当数
  • Servlet传送对象给Applet使用

    前日 一位朋友与我谈论Servlet与Applet共享Java对象的问题 现发表出来与大家分享 文中瑕癖 之处甚多 望各位指教 朋友谈论的需求是这样的 他想通过页面上一个Applet呼叫一个服务器Servlet 而从Servlet产生 一个
  • Anaconda3安装TensorFlow2.0.0镜像并且配置好Jupyter Notebook

    我们安装TensorFlow1 2 1但是后面又要安装Tensorflow2 0 0 那么我们就需要让Tensorflow两个版本在windows电脑下进行共存 首先 我们先下载了anacoda3和配置好了清华镜像 我们打开anaconda
  • 从零开始编译OpenWrt固件

    从零开始编译OpenWrt固件 前言 进来阅读这篇文章的相信都是对OpenWrt有一定的了解的 对于OpenWrt的介绍这里就不再赘述 可以自行查找相关百科了解 OpenWrt是适合于嵌入式设备的一个Linux发行版 可以通过其提供的相关工
  • Docker使用基础命令(记录贴)

    Docker使用基础命令 基础命令 拉取 推送镜像 docker run命令 基础操作 保存镜像并压缩 基础命令 docker images grep xxx docker ps a grep xxx 导入容器 docker load i
  • vue+antD 表格中使用input

    vue antD 表格中使用input 在这里插入代码片
  • 【编程与算法基础】数据结构——时间复杂度与空间复杂度

    文章目录 算法的时间复杂度和空间复杂度 一 前言 1 算法的效率 2 复杂度的表示方法 大O渐进表示法 3 大O渐进表示法的规则 二 时间复杂度 1 时间复杂度的概念 2 简单时间复杂度计算举例 3 复杂时间复杂度的计算举例 三 空间间复杂
  • C++实践之Qt学习(六):Qt设计器之常用控件、布局和样式

    文章目录 常用控件 按钮 普通按钮 单选按钮 多选按钮 其他的按钮 显示控件 标签 其他显示控件 输入控件 数据项控件 容器控件 布局 Qt布局介绍 设置布局的方式 样式 外部样式表 常用控件 按钮 Buttons分类中包含了Qt中常用的按