UI--基本组件

news2024/11/25 13:12:04

目录

1. Designer 设计师

2. Layout 布局

3. 基本组件

3.1 QWidget

3.2 ui指针

3.3 QLabel 标签（掌握）

示例代码：

dialog.h

dialog.cpp

3.4 QAbstractButton 按钮类（掌握）

示例代码：

dialog.ui

dialog.h

dialog.cpp

运行结果：

示例代码：

dialog.ui

dialog.h

dialog.cpp

运行结果：

3.5 QLineEdit 单行文本输入框（掌握）

示例代码：

dialog.ui

 dialog.h

dialog.cpp

运行结果:

3.6 QComboBox 组合框

示例代码：

dialog.ui

 dialog.h

dialog.cpp

运行结果：

3.7 一组与数值相关的组件

示例代码：

dialog.ui 

dialog.h

dialog.cpp

运行结果：

1. Designer 设计师

Designer是一款独立的用于设计Qt界面的应用程序。

Designer程序保存的文件格式为.ui，这是Qt中的界面文件格式，可以非常快速的开发用户界面。

当使用Qt Creator新建项目时，如果在第五步，选中了创建界面的选项，这样的项目会自带一个.ui界面文件。

在Qt Creator中双击界面文件，可以直接通过内置的Designer程序打开。

Designer程序的区域划分如下图所示。

2. Layout 布局

可以把布局看做是一个“透明的盒子”，盒子内部存放的组件对象会按照这个盒子的规则自动排布，也可以把整个布局看做为一个复合组件。

布局有以下类型：

QVBoxLayout的特点是内部所有组件按照线性垂直排序，QHBoxLayout与QVBoxLayout几乎相同，只有方向不同，是水平方向的。

  当窗口中有一个布局时，可以选中窗口对象，点击工具栏任意一个布局按钮，此时可以让内部的布局贴合窗口，当窗口改变大小时，布局会在内测贴合窗口大小。选中贴合的窗口后，点击打破布局可以取消布局和窗口的贴合状态。

水平布局和垂直布局的常用属性如下：

布局支持嵌套使用，可以把一个布局看做另一个布局的子组件。

可以使用伸展器组件填充布局的空白。

3. 基本组件

3.1 QWidget

QWidget常用属性如下所示。

以上属性都可以继承给其派生类，每个属性的getter和setter详见文档，不再赘述。

3.2 ui指针

当项目中使用了界面文件时，可以在Dialog类中发现多了一个成员变量：

这个ui指针就是.ui界面文件与C++代码的桥梁，以下是ui指针的工作原理。

3.3 QLabel 标签（掌握）

QLabel组件用于显示文本或图片，常用属性如下。

如果要在项目中使用图片素材，需要先把图片导入到Qt项目中，图片格式建议使用jpg、png与bmp，图片命名建议使用全英文+数字+下划线的组合，且英文不得包含大写，数字不得开头。

图片导入项目的操作步骤如下：

1. 把图片放置到工作目录中。

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

3. 在弹出的窗口中，按照下图所示进行操作。

4. 在弹出的窗口中给资源文件命名后，点击“下一步”。

5. 在项目管理界面，直接点击“完成”。可以看到项目中多了一个.qrc资源文件。

6. 选中资源文件，点击 添加 --- 添加前缀

。

7. 再次选中资源文件，点击 添加 -- 添加文件

，在弹出的对话框中选择要导入的图片文件即可。可以看到图片被添加到资源文件中了。

8. 后续在代码中使用图片只需要选中资源文件中的图片文件，鼠标右键，点击“复制资源路径到剪切板”即可。如果要在Designer中使用，则需要再次构建一次项目

。

虽然Qt有图形处理的功能，但是尽量在Qt之外先处理好图片的效果，这样可以提升程序的执行效率，也能降低程序的体积。

另外，过大的图片（文件体积过大 或 分辨率过大）不要导入到Qt中，因为会明显地增加资源占用，甚至导致程序无法正常运行。

示例代码：

dialog.h

#ifndef DIALOG_H
#define DIALOG_H

#include <QDialog>
// 头文件
#include <QColor> // 颜色
#include <QPalette> // 调色板
#include <QPixmap> // 图片
#include <QSize> // 大小

namespace Ui {
class Dialog;
}

class Dialog : public QDialog
{
    Q_OBJECT

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

private:
    Ui::Dialog *ui;
};

#endif // DIALOG_H

dialog.cpp

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

Dialog::Dialog(QWidget *parent) :
    QDialog(parent),
    ui(new Ui::Dialog)
{
    ui->setupUi(this);
    //以下用的是栈内存对象 用完自动销毁
    // 创建颜色对象
    // 可以使用三个十进制0-255的RGB数值
    // 也可以使用十六进制#字符串的方式
    QColor color("#340A55");
    QPalette pa; // 调色板对象
    // 调制颜色
    // 参数1：颜色角色
    // 参数2：颜色对象
    pa.setColor(QPalette::WindowText,color);
    // 访问到组件对象，设置调色板
    ui->labelText->setPalette(pa);


    // 创建一个大小对象  通过getter方法设置大小
    QSize size(ui->labelImg->width(),ui->labelImg->height());
    // 创建一个图片对象，参数是资源路径
    QPixmap pic(":/new/prefix1/duanwujie.jpg");
    // 缩放图片为目标尺寸
    // 参数1：尺寸对象
    // 参数2：缩放模式  共有三种模式
    // 返回值：缩放后的图片对象
    pic = pic.scaled(size,Qt::IgnoreAspectRatio);
    // 设置显示
    ui->labelImg->setPixmap(pic);
}

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

3.4 QAbstractButton 按钮类（掌握）

QAbstractButton是四种按钮的基类，内部规定按钮的基础功能，在四个派生类中功能的展示不尽相同。这个四个派生类分别是：

  • QPushButton     点击式的命令按钮
  • QRadioButton    单选按钮，单选按钮会对同一个布局中的其它按钮增加互斥性。
  • QCheckBox       多选按钮
  • QToolButton      工具按钮

QAbstractButton的常用属性如下所示。

图标并不是普通的图片，图标具有以下特点：

  • 宽高比为1:1
  • 包含透明图层，通常使用png格式
  • 一个软件的图标应该保持同一种风格

图标可以通过阿里巴巴矢量图标库下载。

按钮类的信号函数如下所示。

示例代码：

dialog.ui

dialog.h

#ifndef DIALOG_H
#define DIALOG_H

#include <QDialog>
#include <QDebug>

namespace Ui {
class Dialog;
}

class Dialog : public QDialog
{
    Q_OBJECT

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

private:
    Ui::Dialog *ui;

private slots:
    void btnImgPressedSlot(); // 按钮按压
    void btnImgReleasedSlot(); // 按钮释放
    void checkBoxQtToggledSlot(bool); // 选中状态改变
};

#endif // DIALOG_H

dialog.cpp

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

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

    connect(ui->btnImg,SIGNAL(pressed()),
            this,SLOT(btnImgPressedSlot()));
    connect(ui->btnImg,SIGNAL(released()),
            this,SLOT(btnImgReleasedSlot()));
    connect(ui->checkBoxQt,SIGNAL(toggled(bool)),
            this,SLOT(checkBoxQtToggledSlot(bool)));
}

void Dialog::btnImgPressedSlot()
{
    qDebug() << "按下去了！";
}

void Dialog::btnImgReleasedSlot()
{
    qDebug() << "抬起来了！";
}

void Dialog::checkBoxQtToggledSlot(bool checked)
{
    if(checked)
        qDebug() << "今晚复习Qt！";
    else
        qDebug() << "今晚不复习Qt！";
}

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

运行结果：

当界面中按钮对象较多时，为每个按钮设置信号槽连接比较繁琐。此时可以使用QButtonGroup类同时管理多个按钮对象。

QButtonGroup不继承QWidget类，直接继承QObject类，因此没有任何视觉效果，只是一种逻辑上的分组，因此也不属于ui指针，需要手动管理堆内存对象的生命周期。

QButtonGroup的信号函数如下。

每种信号提供了两种参数格式，分别是接收按钮对象本身或按钮对象的编号。

示例代码：

dialog.ui

dialog.h

#ifndef DIALOG_H
#define DIALOG_H

#include <QDialog>
//头文件
#include<QButtonGroup>
#include<QDebug>
namespace Ui {
class Dialog;
}

class Dialog : public QDialog
{
    Q_OBJECT

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

private:
    Ui::Dialog *ui;
    QButtonGroup *group;//按钮组对象
private slots:
    //信号:void	buttonToggled(int id, bool checked)
    void btnsToggledSlot(int,bool);
};

#endif // DIALOG_H

dialog.cpp

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

Dialog::Dialog(QWidget *parent) :
    QDialog(parent),
    ui(new Ui::Dialog)
{
    ui->setupUi(this);
    group=new QButtonGroup(this);//Fn+F1-->Public Functions
    //给按钮组添加按钮对象
    //参数1：要添加的按钮对象
    //参数2：按钮组内编号 使用不重复的正整数
    group->addButton(ui->checkBoxCHN,1);
    group->addButton(ui->checkBoxUSA,2);
    group->addButton(ui->checkBoxJAN,3);
    //解除同组互斥性
    group->setExclusive(false);
    //连接槽函数
    connect(group,SIGNAL(buttonToggled(int,bool)),
            this,SLOT(btnsToggledSlot(int,bool)));

}
void Dialog::btnsToggledSlot(int id,bool checked)
{
    if(id == 1)
       qDebug()<<"中国:"<<checked;
    else if(id==2)
       qDebug()<<"美国:"<<checked;
    else if(id==3)
       qDebug()<<"日本:"<<checked;
}

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

运行结果：

3.5 QLineEdit 单行文本输入框（掌握）

QLineEdit用于录入用户的整行文本输入。

常用属性如下。

信号函数如下。

示例代码：

dialog.ui

 dialog.h

#ifndef DIALOG_H
#define DIALOG_H

#include <QDialog>
#include<QDebug>

namespace Ui {
class Dialog;
}

class Dialog : public QDialog
{
    Q_OBJECT

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

private:
    Ui::Dialog *ui;
private slots:
    void btnClickedSlot();//点击按钮的槽函数
    void textEditedSlot(QString);//编辑的槽函数
};

#endif // DIALOG_H

dialog.cpp

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

Dialog::Dialog(QWidget *parent) :
    QDialog(parent),
    ui(new Ui::Dialog)
{
    ui->setupUi(this);
    connect(ui->pushButton,SIGNAL(clicked()),
            this,SLOT(btnClickedSlot()));
    connect(ui->lineEditPwd,SIGNAL(textEdited(QString)),
            this,SLOT(textEditedSlot(QString)));

}
void Dialog::btnClickedSlot()
{
    //获取用户名的输入内容输出
    QString user=ui->lineEditUser->text();
    qDebug()<<user;
}
void Dialog::textEditedSlot(QString text)
 {
    qDebug()<<text;
    if(text.size()==0)
    {
        ui->lineEditPwd->setText("ABC");
    }
 }

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

运行结果:

3.6 QComboBox 组合框

QComboBox在某种程度上可以代替QRadioButton，它是一个下拉选项框。

在Qt Creator中，有两个词都被翻译为“项目”：Project、Item

Project指的是一个工程项目，Item指的是一个条目。

QComboBox的常用属性如下所示。

信号函数如下所示。

示例代码：

dialog.ui

 dialog.h

#ifndef DIALOG_H
#define DIALOG_H

#include <QDialog>
#include<QDebug>

namespace Ui {
class Dialog;
}

class Dialog : public QDialog
{
    Q_OBJECT

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

private:
    Ui::Dialog *ui;
private slots:
    //高光悬停
    void highlightedSlot(QString text);
};

#endif // DIALOG_H

dialog.cpp

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

Dialog::Dialog(QWidget *parent) :
    QDialog(parent),
    ui(new Ui::Dialog)
{
    ui->setupUi(this);
    connect(ui->comboBox,SIGNAL(highlighted(QString)),
            this,SLOT(highlightedSlot(QString)));
}
void Dialog::highlightedSlot(QString text)
{
    qDebug()<<text;
}

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

运行结果：

3.7 一组与数值相关的组件

以下组件的核心功能都是与数字相关。

以上组件具有一些相同的属性（浅灰色为部分组件有效的属性）：

以上组件最常用的信号函数：

// value值发生变化时发射
void	valueChanged(int value) [signal]

示例代码：

dialog.ui 

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;
private slots:
    //QDial的value值变化时发射信号连接的槽函数
    void valueChangedSlot(int);
};

#endif // DIALOG_H

dialog.cpp

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

Dialog::Dialog(QWidget *parent) :
    QDialog(parent),
    ui(new Ui::Dialog)
{
    ui->setupUi(this);
    connect(ui->dial,SIGNAL(valueChanged(int)),
            this,SLOT(valueChangedSlot(int)));
}
void Dialog::valueChangedSlot(int value)
{
    //同步给其他组件对象
    ui->spinBox->setValue(value);
    ui->progressBar->setValue(value);
    ui->horizontalScrollBar->setValue(value);
    ui->horizontalSlider->setValue(value);
    ui->verticalScrollBar->setValue(value);
    //ui->verticalSlider->setValue(value);//默认从下向上滑动
    ui->verticalSlider->setValue(100-value);//从上向下滑动
}

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

运行结果：

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

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

相关文章

【MyBaits】SpringBoot整合MyBatis之动态SQL

【MyBaits】SpringBoot整合MyBatis之动态SQL

目录 一、背景 二、if标签 三、trim标签 四、where标签 五、set标签 六、foreach标签 一、背景 如果我们要执行的SQL语句中不确定有哪些参数&#xff0c;此时我们如果使用传统的就必须列举所有的可能通过判断分支来解决这种问题&#xff0c;显示这是十分繁琐的。在Spring…
阅读更多...
linux查看服务端口号、查看端口（netstat、lsof）以及PID对应服务

linux查看服务端口号、查看端口（netstat、lsof）以及PID对应服务

linux查看服务端口号、查看端口&#xff08;netstat、lsof&#xff09; netstat - atulnp会显示所有端口和所有对应的程序&#xff0c;用grep管道可以过滤出想要的字段 -a &#xff1a;all&#xff0c;表示列出所有的连接&#xff0c;服务监听&#xff0c;Socket资料 -t &…
阅读更多...
说服审稿人，只需牢记这 8 大返修套路！

说服审稿人，只需牢记这 8 大返修套路！

本文作者&#xff1a;雁门飞雪 如果说科研是一场修炼&#xff0c;那么学术界就是江湖&#xff0c;投稿就是作者与审稿人或编辑之间的高手博弈。 在这一轮轮的对决中&#xff0c;有时靠的是实力&#xff0c;有时靠的是技巧&#xff0c;然而只有实力和技巧双加持的作者才能长久立…
阅读更多...
Qt--项目打包

Qt--项目打包

项目打包 一款正常的软件产品应该在任何的计算机中运行&#xff0c;不需要单独安装Qt的开发环境&#xff0c;因此需要把之前的项目打包成一个安装包。 1. 设置应用图标 设置应用程序图标的操作步骤如下所示。 1. 下载一个图标图片&#xff0c;格式要求png。&#xff08;png包含…
阅读更多...
学习Python的day.13

学习Python的day.13

输入和输出 一、输入 标准输入&#xff1a;从键盘输入 input(promptNone) # prompt: 输入的提示符,可以为空 Read a string from standard input --- 译为&#xff1a;从标准输入读入一个字符串&#xff0c;输入读取的一定是字符串&#xff0c;返回值就是一个字符串 那我们…
阅读更多...
基于知识图谱的个性化学习资源推荐系统的设计与实现(论文+源码)_kaic

基于知识图谱的个性化学习资源推荐系统的设计与实现(论文+源码)_kaic

摘 要 最近几年来&#xff0c;伴随着教育信息化、个性化教育和K12之类的新观念提出,一如既往的教育方法向信息化智能化的转变&#xff0c;学生群体都对这种不受时间和地点约束的学习方式有浓厚的兴趣。而现在市面上存在的推荐系统给学生推荐资料时不符合学生个人对知识获取的…
阅读更多...
多态与虚函数

多态与虚函数

多态与虚函数 多态的引入多态与虚函数多态编译时多态运行时多态 多态的原理静态联编和动态联编 多态的引入 学过C继承的话应该都知道在继承中存在一种菱形继承&#xff0c;假设存在一个类&#xff08;person&#xff09;&#xff0c;其派生出两个子类&#xff0c;分别是studen…
阅读更多...
Template Method模式

Template Method模式

文章目录 &#x1f4a1;前言分类优点 &#x1f4a1;问题引入&#x1f4a1;概念&#x1f4a1;例子&#x1f4a1;总结 &#x1f4a1;前言 此文是第一篇讲解设计模式的文章&#xff0c;而笔者我又不想另起一篇来概述设计模式的分类&#xff0c;作用&#xff0c;以及优点&#xff…
阅读更多...
MySQL笔记（四） 函数、变量、存储过程、游标、索引、存储引擎、数据库维护、指定字符集、锁机制

MySQL笔记（四） 函数、变量、存储过程、游标、索引、存储引擎、数据库维护、指定字符集、锁机制

MySQL笔记&#xff08;四&#xff09; 文章目录 MySQL笔记&#xff08;四&#xff09;函数文本处理函数日期和时间处理函数数值处理函数类型转换函数流程控制函数自定义函数基本语法 局部变量全局变量聚集函数 aggregate functionDISTINCT 存储过程为什么要使用使用创建 删除建…
阅读更多...
调用api实现ChatGPT接口余额查询

调用api实现ChatGPT接口余额查询

先打个广告&#xff1a; 推荐一款不用科学上网就可以使用的ChatGPT工具&#xff1a;智能聊天助手 体验版入口&#xff1a;智能聊天助手体验版 在ChatGPT官网可以查询接口使用额度&#xff0c;但是官方并没有提供相应的API给开发者调用。但是可以通过破解的方式找到它的API。方法…
阅读更多...
人生在世皆有过错，来一起看看Java中的异常吧！！！

人生在世皆有过错，来一起看看Java中的异常吧！！！

Java中的异常问题详解 一、异常的概念与分类 1.异常概念 概念&#xff1a;Java异常是一个描述在代码段中发生异常的对象&#xff0c;当发生异常情况时&#xff0c;一个代表该异常的对象被创建并且在导致该异常的方法中被抛出&#xff0c;而该方法可以选择自己处理异常或者传…
阅读更多...
Invicti v23.5 for Windows 发布 - 企业应用安全测试

Invicti v23.5 for Windows 发布 - 企业应用安全测试

Invicti v23.5 for Windows - 企业应用安全测试 Invicti Standard 11 May 2023 v23.5.0.40516 请访问原文链接&#xff1a;https://sysin.org/blog/invicti/&#xff0c;查看最新版。原创作品&#xff0c;转载请保留出处。 作者主页&#xff1a;sysin.org Invicti 是一种自动…
阅读更多...
[HFCTF2022]ezchain

[HFCTF2022]ezchain

环境分析 环境提供了docker-compose.yml&#xff0c;nginx.conf文件&#xff0c;从两个文件中可疑分析出是不出网的环境 nginx.conf&#xff1a; server { listen 80;server_name localhost;location / {root /usr/share/nginx/html; #收到/路径请求会访问/usr/sha…
阅读更多...
Keil5----Debug时，watch1中全局变量数值不刷新问题解决方法

Keil5----Debug时，watch1中全局变量数值不刷新问题解决方法

问题&#xff1a; 在Keil5-MDK中&#xff0c;Debug时&#xff0c;watch1中全局变量数值不刷新。 解决方法&#xff1a; 步骤1&#xff1a;进入Debug模式 将程序调试下载器&#xff08;STlink,Jlink,Ulink&#xff09;连接&#xff0c;编译程序后。 进行如下操作&#xff1a…
阅读更多...
算法修炼之练气篇——练气十六层

算法修炼之练气篇——练气十六层

博主&#xff1a;命运之光 专栏&#xff1a;算法修炼之练气篇 前言&#xff1a;每天练习五道题&#xff0c;炼气篇大概会练习200道题左右&#xff0c;题目有C语言网上的题&#xff0c;也有洛谷上面的题&#xff0c;题目简单适合新手入门。&#xff08;代码都是命运之光自己写的…
阅读更多...
MySQL --- 多表查询

MySQL --- 多表查询

多表查询、事物、以及提升查询效率最有手段的索引 一. 多表查询 1.1 多表查询 --- 概述 1.1.1 数据准备 将资料中准备好的多表查询数据准备的SQL脚本导入数据库中。 部门表&#xff1a; 员工表&#xff1a; 1.1.2 介绍 多表查询&#xff1a;指从多张表中查询数据&#…
阅读更多...
2023年的深度学习入门指南(13) - 写后端

2023年的深度学习入门指南(13) - 写后端

2023年的深度学习入门指南(13) - 写后端 我们前面学习了用python在本机上写前端&#xff0c;也学习了使用HTML在本机写前端。同理&#xff0c;我们可以写Windows应用&#xff0c;mac应用&#xff0c;iOS应用&#xff0c;Android应用等等以适合各种终端。其实&#xff0c;最通用…
阅读更多...
python+chrome rpc方式轻松绕过五秒盾（cloudflare）

python+chrome rpc方式轻松绕过五秒盾（cloudflare）

Cloudflare 5秒盾是一种基于云技术的Web应用程序防火墙（WAF），旨在保护网站免受各种Web攻击，如SQL注入、跨站点脚本（XSS）和DDoS攻击。它能够在5秒内检测到并阻止恶意流量，并提供实时安全警报和日志记录。此外，它还提供了一系列安全功能，包括SSL / TLS加密、IP过滤、访问…
阅读更多...
单链表你别再找我了，我怕双向链表误会

单链表你别再找我了，我怕双向链表误会

目录 带头双向循环链表的创建和初始化 创建一个新的结点&#xff08;方便复用&#xff09; 链表判空 链表打印 链表尾插 链表尾删 链表头插 链表头删 任意插入 任意删除 链表查找 链表销毁 完整代码 &#x1f60e;前言 之前我们讲了结构最简单&#xff0c;实现起来…
阅读更多...
kettle win11 启动闪退 --启动日志

kettle win11 启动闪退 --启动日志

一、启动闪退 思路&#xff1a; 找原因找启动日志根据启动日志查看启动失败的原因 二、找启动日志 采用debug模式启动 查看控制台–根据控制台操作 看生成的启动日志文件 查看日志 DEBUG: Using PENTAHO_JAVA_HOME DEBUG: _PENTAHO_JAVA_HOMEE:\java8 DEBUG: _PENTAHO…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023