Qt_day4_Qt_UI设计

news2024/11/14 12:00:51

目录

Qt_UI设计

1. Designer 设计师（掌握）

2. Layout 布局（重点）

2.1 基本使用

2.2 高级用法

2.3 代码布局（了解）

3. Designer与C++的关系（熟悉）

4. 基本组件（掌握）

4.1 QWidget

4.2 QLabel 标签

4.3 QAbstractButton 按钮类

4.4 QLineEdit 单行文本输入框

4.5 QComboBox 组合框

4.6 一组与数字相关的组件

Qt_UI设计

1. Designer 设计师（掌握）

    Designer是Qt内置的一款界面设计程序，设计的界面文件为.ui格式。

    C++程序员通常不会单独启动Designer，如果要在项目中使用Designer程序，只需要在新建项目时，勾选“创建界面文件”选项。

这样的项目自带dialog.ui，双击dialog.ui可以直接使用Designer程序打开此文件。

2. Layout 布局（重点）

2.1 基本使用

    可以把布局看做是一个透明的盒子，内部放置各种组件对象，这些组件对象会按照布局预设的规则自动排序，并形成一个布局整体。

Qt中有四种布局：

    主要学习前两种，垂直/水平布局指的是布局中所有的子组件垂直/水平排成一排，常用属性如下：

    需要注意的是，最终的显示效果是多个因素综合决定的，并非一个因素完全决定。

2.2 高级用法

  • 伸展器

如果需要在布局中填充空白，可以使用伸展器组件。

  • 嵌套

布局和布局之间可以嵌套，内层布局相当于外层布局的一个组件。

  • 贴合

    选中窗口对象，点击，可以让最外层布局贴合窗口，以达到窗口大小自适应效果。

可以点击打破任何一个选中的布局，例如取消贴合效果，需要先选中窗口，然后点击此按钮。

2.3 代码布局（了解）

    也可以使用C++进行布局，仅做展示。

dialog.h

#ifndef DIALOG_H
#define DIALOG_H

#include <QDialog>
#include <QVBoxLayout>
#include <QPushButton>

class Dialog : public QDialog
{
    Q_OBJECT

public:
    Dialog(QWidget *parent = 0);
    ~Dialog();

private:
    QVBoxLayout* layout;
    QPushButton* btn1;
    QPushButton* btn2;
};

#endif // DIALOG_H

dialog.cpp

#include "dialog.h"

Dialog::Dialog(QWidget *parent)
    : QDialog(parent)
{
    resize(400,400);
    layout = new QVBoxLayout(this);
    btn1 = new QPushButton("A",this);
    btn2 = new QPushButton("B",this);
    // 把两个按钮加入到布局中
    layout->addWidget(btn1);
    layout->addWidget(btn2);
}

Dialog::~Dialog()
{
    delete layout;
    delete btn1;
    delete btn2;
}

虽然代码布局复杂，但是性能好。

3. Designer与C++的关系（熟悉）

dialog.h

#ifndef DIALOG_H
#define DIALOG_H

#include <QDialog>

namespace Ui {
class Dialog;
}

class Dialog : public QDialog
{
    Q_OBJECT

public:
    explicit Dialog(QWidget *parent = 0);
    ~Dialog();

private:
    Ui::Dialog *ui; // ui指针：界面文件的对象化
};

#endif // DIALOG_H

dialog.cpp 
#include "dialog.h"
#include "ui_dialog.h"

Dialog::Dialog(QWidget *parent) :
    QDialog(parent),
    ui(new Ui::Dialog) // 构造初始化列表
{
    // 按照ui文件设计内容在C++中创建对象并初始化
    ui->setupUi(this);
    // 可以通过ui指针+对象名称，在C++中找到ui中的对象
    ui->pushButtonA->setText("是不是？");
}

Dialog::~Dialog()
{
    // 销毁ui，一并销毁ui文件中所有的对象
    delete ui;
}

    因为Designer造成的开销相对于常用的Windows而言微不足道，因此后续界面设计都使用Designer，创建的项目要求勾选“创建界面文件”。

4. 基本组件（掌握）

4.1 QWidget

    QWidget是所有组件的基类，因此其属性被所有组件继承，在Designer中这些属性显示为淡黄色，常用属性如下：

4.2 QLabel 标签

QLabel用于显示文字或图片，此组件仅用于显示，不能交互。

常用属性如下：

Qt项目中正规使用图片的方式需要先把图片资源导入到项目中，然后再使用图片资源，不可直接使用图片文件，操作步骤如下：

1. 准备好图片文件，要求格式：png（包含透明图层）、jpg（不包含透明图层）、webp（在部分Qt版本支持）等。明明合法（英文数字组合），分辨率和文件大小不要过高。

2. 把图片文档放置到工作目录中。

3. 在Qt Creator中，选中项目名称，鼠标右键，点击“添加新文件”。

    4. 在弹出的窗口中，按照下图所示进行操作。Qt Resource File表示资源管理文件，格式.qrc，用于管理导入到项目中的资源文件。

5. 在弹出的窗口中填写qrc资源管理文件的名称，例如res

6. 项目管理界面，直接点击完成。

7. 如果需要回到资源管理文件首页，如下图所示进行操作。

8. 第一次给资源管理文件导入资源之前，需要先添加前缀，可以把前缀理解为是一个虚拟的路径。

9. 点击添加文件，可以把对应图片文件添加到当前前缀下。

10. 如果在C++代码中使用此图片，需要复制资源路径。

11. 如果在Designer中使用，需要先重新构建一次项目，点击可以构建但不运行项目。随后可以在Designer中配置资源图片的使用。

    通过C++代码对图片进行缩放的效果比Designer好一些，但是仍然建议使用专门的P图软件提前处理好。

相关函数如下：

// QPixmap的构造函数
// 参数为文件名称，即“虚拟路径”
QPixmap::​QPixmap(const QString & fileName)


// 缩放拉伸图片
// 参数1：目标宽度
// 参数2：目标高度
// 参数3：拉伸模式，三个枚举值
// 参数4：转换模式，两个枚举值，分别表示速度优先和质量优先
// 返回值：转换后的图片对象
QPixmap QPixmap::​scaled(
int width, 
int height, 
Qt::AspectRatioMode aspectRatioMode = Qt::IgnoreAspectRatio, Qt::TransformationMode transformMode = Qt::FastTransformation) const

QLabel也支持gif动图显示，需要配合QMovie类型播放动图，相关函数如下：

// 构造函数
// 参数1：文件名称，即“虚拟路径”
// 参数3是parent，因此用堆内存
QMovie::​QMovie(const QString & fileName)

// 开始播放
void QMovie::​start()                [slot]

以上练习的源代码：

通过网盘分享的文件：Day2_24072_QLabel (2).zip

链接: https://pan.baidu.com/s/1G16UlAj03skrUNsMnJviQw 提取码: gjee

--来自百度网盘超级会员v7的分享

4.3 QAbstractButton 按钮类

QAbstractButton是按钮的抽象基类，包含四种常见的派生类：

需要注意的是，QRadioButton需要分组互斥，使用QGroupBox组件进行分组。

按钮类常用属性如下：

图标是一种特殊的图片，具有以下性质：

  • 分辨率1:1
  • 包含透明图层
  • 格式通常为png和ico

可以通过专门的图标下载网站进行学习交流：

iconfont-阿里巴巴矢量图标库iconfont-国内功能很强大且图标内容很丰富的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造，设计和前端开发的便捷工具icon-default.png?t=O83Ahttps://www.iconfont.cn/

按钮类常用信号如下：

     如果按钮比较多需要很多信号槽的连接，除了可以使用多对一的连接方式以外，还可以使用QButtonGroup对按钮进行分组，可以针对一个组设置信号槽。QButtonGroup不继承QWidget，直接继承QObject，因此没有任何显示效果，只是一种逻辑分组。

相关函数如下：

// 构造函数
QButtonGroup::​QButtonGroup(QObject * parent = 0)

// 向组中添加按钮并编号
// 参数1：按钮对象
// 参数2：按钮编号，建议非重复正数
void QButtonGroup::​addButton(
                QAbstractButton * button, 
                int id = -1)

信号函数如下：

    信号函数分为四组，对应的触发效果就是之前QAbstractButton信号的四种效果，区别每组重载函数的参数不同。QAbstractButton*表示当前组中触发的组件地址，int表示当前组中触发的组件编号。

需要注意的是，QButtonGroup默认会让按钮互斥，因此需要更改exclusive : bool属性值为false。

通过网盘分享的文件：Day3_24072_QButton.zip

链接: https://pan.baidu.com/s/1iPBs-PsaZg5bLJvkiCOCqw 提取码: h8e6

--来自百度网盘超级会员v7的分享

4.4 QLineEdit 单行文本输入框

    QLineEdit可以让用户输入一个单行文本，常用属性如下：

信号函数如下：

通过网盘分享的文件：Day3_24072_QLineEdit.zip

链接: https://pan.baidu.com/s/1aGU3CMl6q1jjnFeujMzJLQ 提取码: a2a4

--来自百度网盘超级会员v7的分享

4.5 QComboBox 组合框

QComboBox可以点击出现一个下拉菜单，用户选择其中的一个选项（Item）。

常用属性如下：

信号函数如下：

通过网盘分享的文件：Day3_24072_QComboBox.zip

链接: https://pan.baidu.com/s/1T-hYrHTyXkCcd6FR6rtmZg 提取码: 5d7f

--来自百度网盘超级会员v7的分享

4.6 一组与数字相关的组件

以上组件共同的属性包括：

  • value : int

当前数值

  • maximum : int

最大值，以上组件中只有QProgressBar默认最大值为100，其他组件为99。

  • minimum : int

最小值，默认值为0。

以上组件共有的信号函数：

// 参数为新的value值
void valueChanged(int value)                 [signal]

一个属性值发生变化时发射的信号在属性文档中会出现在部分。

通过网盘分享的文件：Day3_24072_Value.zip

链接: https://pan.baidu.com/s/1I3n1cPLorXmCQsyIcVXnPA 提取码: vnkg

--来自百度网盘超级会员v7的分享

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

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

相关文章

杨中科 .Net Core 笔记 DI 依赖注入2

杨中科 .Net Core 笔记 DI 依赖注入2

ServiceCollection services new ServiceCollection();//定义一个承放服务的集合 services.AddScoped<iGetRole, GetRole>();using (ServiceProvider serviceProvider services.BuildServiceProvider()) {var list serviceProvider.GetServices(typeof(iGetRole));//获…
阅读更多...
机器学习—Additional Layer Types

机器学习—Additional Layer Types

到目前为止&#xff0c;我们使用的所有神经网络都是密集型的&#xff0c;一层中的每个神经元&#xff0c;上一层的所有激活&#xff0c;事实证明&#xff0c;仅仅使用密集层类型&#xff0c;可以建立一些非常强大的学习算法&#xff0c;并帮助你建立关于神经网络能做什么的进一…
阅读更多...
力扣 LeetCode 206. 反转链表（Day2：链表）

力扣 LeetCode 206. 反转链表（Day2：链表）

解题思路&#xff1a; pre &#xff0c;cur双指针 需要通过tmp暂存cur的下一个位置&#xff0c;以方便cur的下一步移动 class Solution {public ListNode reverseList(ListNode head) {ListNode pre null;ListNode cur head;while (cur ! null) {ListNode tmp cur.next;c…
阅读更多...
硬件---4电感---基本概念与特性

硬件---4电感---基本概念与特性

一电感是什么 1电感的概念 电感就是一根导线加一个磁性原料。生活中&#xff0c;所有由线圈组成的器件都是电感。 如下图&#xff0c;常见的电感封装&#xff0c;有裸露的也有贴片的。 二电感的基本特性 1流过电感的电流不能发生突变 注意和电容的区别&#xff0c;一个是…
阅读更多...
【软件工程】深入理解一下SOA(面向服务的架构)

【软件工程】深入理解一下SOA(面向服务的架构)

关于SOA的一些看法 概述SOA的核心特性包括&#xff1a;一、服务自治与独立性二、松耦合与标准化三、服务重用与粒度四、服务可发现与安全 五、其他核心原则SOA的应用领域非常广泛&#xff0c;包括&#xff1a;SOA的一些挑战包括&#xff1a; &#x1f680; SOA在云计算中的应用…
阅读更多...
【论文复现】ChatGPT多模态命名实体识别

【论文复现】ChatGPT多模态命名实体识别

&#x1f4dd;个人主页&#x1f339;&#xff1a;Eternity._ &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; ❀ChatGPT ChatGPT辅助细化知识增强&#xff01;1. 研究背景2. 模型结构和代码3. 任务流程第一阶段&#xff1a;辅助精炼知识启发式生成第二阶段…
阅读更多...
隆盛策略正规炒股恒生科技指数跌4.19%，中芯国际跌近8%

隆盛策略正规炒股恒生科技指数跌4.19%，中芯国际跌近8%

查查配分析11月12日,香港恒生指数收跌2.84%,恒生科技指数跌4.19%。中兴通讯跌超9%,中芯国际跌近8%,蔚来跌超6%,美团、京东集团、理想汽车均跌超5%。 11月12日,港股跌幅扩大,恒生科技指数跌超4%,恒生指数跌超3%。 隆盛策略以其专业的服务和较低的管理费用在市场中受到不少关注。…
阅读更多...
MFC图形函数学习07——画扇形函数

MFC图形函数学习07——画扇形函数

绘制扇形函数是MFC中绘图的基本函数&#xff0c;它绘制的仍是由椭圆弧与椭圆中心连线构成的椭圆扇形&#xff0c;特例是由圆弧与圆心连线构成的圆扇形。 一、绘制扇形函数 原型&#xff1a;BOOL Pie(int x1,int y1,int x2,int y2,int x3,int y3,int x4,int y4); …
阅读更多...
qt QHttpMultiPart详解

qt QHttpMultiPart详解

1. 概述 QHttpMultiPart是Qt框架中用于处理HTTP多部分请求的类。它类似于RFC 2046中描述的MIME multipart消息&#xff0c;允许在单个HTTP请求中包含多个数据部分&#xff0c;如文件、文本等。这种多部分请求在上传文件或发送带有附件的邮件等场景中非常有用。QHttpMultiPart类…
阅读更多...
SpringBoot使用TraceId日志链路追踪

SpringBoot使用TraceId日志链路追踪

项目场景&#xff1a; 有时候一个业务调用链场景&#xff0c;很长&#xff0c;调了各种各样的方法&#xff0c;看日志的时候&#xff0c;各个接口的日志穿插&#xff0c;确实让人头大。为了解决这个痛点&#xff0c;就使用了TraceId&#xff0c;根据TraceId关键字进入服务器查询…
阅读更多...
SSE (Server-Sent Events) 服务器实时推送详解

SSE (Server-Sent Events) 服务器实时推送详解

Server-Sent Events 一、什么是 SSE ?二、SSE 的工作原理三、SSE 的基本配置1.HTTP 请求和响应头设置2.SSE 字段介绍3.SSE 事件数据流示例 四、SseEmitter 的基本配置1.SseEmitter 介绍及用法2.使用 SseEmitter 示例11)编写核心 SSE Client2)编写 Controller3)前端接收与处理 …
阅读更多...
【C++】踏上C++的学习之旅（六）：深入“类和对象“世界，掌握编程的黄金法则（一）

【C++】踏上C++的学习之旅（六）：深入“类和对象“世界，掌握编程的黄金法则（一）

文章目录 前言1. "面向过程"和"面向对象"的碰撞1.1 面向过程1.2 面向对象 2. "类"的引入3. "类"的定义3.1 &#x1f349;语法展示&#xff1a;3.2 "类"的两种定义方式3.3 "类"的命名规则 4. 类的访问限定符以及封…
阅读更多...
机器学习：梯度提升树（GBDT）——基于决策树的树形模型

机器学习：梯度提升树（GBDT）——基于决策树的树形模型

梯度提升树&#xff08;Gradient Boosting Decision Trees&#xff0c;GBDT&#xff09;是一种强大的机器学习方法&#xff0c;广泛用于回归和分类任务。它通过构建一系列决策树来优化模型的预测能力&#xff0c;基于梯度提升框架&#xff0c;使得每一棵树都试图纠正前一棵树的…
阅读更多...
Spark SQL大数据分析快速上手-伪分布模式安装

Spark SQL大数据分析快速上手-伪分布模式安装

【图书介绍】《Spark SQL大数据分析快速上手》-CSDN博客 《Spark SQL大数据分析快速上手》【摘要 书评 试读】- 京东图书 大数据与数据分析_夏天又到了的博客-CSDN博客 Hadoop完全分布式环境搭建步骤-CSDN博客,前置环境安装参看此博文 伪分布模式也是在一台主机上运行&…
阅读更多...
github使用基础

github使用基础

要通过终端绑定GitHub账号并进行文件传输&#xff0c;你需要使用Git和SSH密钥来实现安全连接和操作。以下是一个基本流程&#xff1a; 设置GitHub和SSH 检查Git安装 通过终端输入以下命令查看是否安装Git&#xff1a; bash 复制代码 git --version配置Git用户名和邮箱 bash …
阅读更多...
Python OpenCV孤立点检测

Python OpenCV孤立点检测

孤立点检测 在Python中使用OpenCV进行孤立点&#xff08;异常点&#xff09;检测&#xff0c;可以通过应用统计分析或者使用OpenCV的findContours和convexHull函数来识别。以下是一个简单的例子&#xff0c;使用OpenCV的findContours和convexHull来识别并绘制孤立点。 孤立点…
阅读更多...
Vue自定义指令详解——以若依框架中封装指令为例分析

Vue自定义指令详解——以若依框架中封装指令为例分析

自定义指令 在Vue.js中&#xff0c;自定义指令提供了一种非常灵活的方式来扩展Vue的功能。以下是对Vue中自定义指令的详细解释&#xff1a; 一、自定义指令的基本概念 自定义指令允许开发者直接对DOM元素进行低层次操作&#xff0c;而无需编写大量的模板或者JavaScript代码。…
阅读更多...
云渲染：服务器机房与物理机房两者有什么区别

云渲染：服务器机房与物理机房两者有什么区别

云渲染选择服务器机房与物理机房两者主要区别在哪里呢&#xff1f; 服务器机房和物理机房作为云渲染的基础设施&#xff0c;各自扮演着不同的角色。 服务器机房的特点 服务器机房&#xff0c;通常指的是那些专门用于托管服务器的设施&#xff0c;它们可能位于云端&#xff0c…
阅读更多...
即插即用篇 | YOLOv8 引入 代理注意力 AgentAttention

即插即用篇 | YOLOv8 引入 代理注意力 AgentAttention

Transformer模型中的注意力模块是其核心组成部分。虽然全局注意力机制具有很强的表达能力，但其高昂的计算成本限制了在各种场景中的应用。本文提出了一种新的注意力范式，称为“代理注意力”（Agent Attention），以在计算效率和表示能力之间取得平衡。代理注意力使用四元组(Q…
阅读更多...
机器学习基础02

机器学习基础02

目录 1.特征工程 1.1特征工程概念 1.2特征工程的步骤 1.3特征工程-特征提取 1.3.1字典特征提取 1.3.2文本特征提取 英文文本提取 中文文本提取 1.3.3TF-IDF文本特征词的稀有程度特征提取 2.无量纲化 2.1归一化 2.2标准化 2.3fit、fit_transform、transform 3.特征…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023