【qt】最快的开发界面效率——混合编程

混合编程

  • 一.准备工作
    • 1.创建项目
    • 2.添加项目资源
  • 二.ui界面设计
    • 1.menuBar菜单栏
    • 2.action ▲
    • 3.toolBar工具栏
    • 4.中心组件
  • 三.代码界面设计
    • 1.toolBar添加组件
    • 2.statusBar状态栏添加组件
  • 四.完成界面的功能
    • 1.对action配置信号槽
    • 2.对action转到信号槽
    • 3.代码添加的组件手动关联槽函数
  • 五.补充
    • 1.样式选择问题
    • 2.复制粘贴剪切可选
    • 3.图标
  • 六.总结

前言：为了让大家直观的感受到混合编程的界面设计，这里以做一个项目来，边做边学。

目标图：
在这里插入图片描述
可以实现相应的功能哦，接下来我们开干！

一.准备工作

1.创建项目

因为我们的项目是有菜单栏，工具栏和状态栏的所以说我们要选择mainwindow为基类。
在这里插入图片描述

2.添加项目资源

我们这个项目可以看到有图片的显示，因此我们要先添加资源。

需要资源的可以dd我

在这里插入图片描述
选择Qt里的Qt Resource File
在这里插入图片描述
就会出现这样
在这里插入图片描述
然后点击Add Prefix进行分组：

在这里插入图片描述
然后点击Add Files添加资源
在这里插入图片描述
咱们的资源就添加好了！

二.ui界面设计

1.menuBar菜单栏

打开设计器，菜单栏在界面的左上角这里
在这里插入图片描述
可以输入名字，输完姚点击回车,才可保存！
在这里插入图片描述
接下来可以填入选项
这里不能输入汉字，但是可以粘贴进去
也可以把类型的放在一起添加分隔符
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
我们可以先看一下运行效果：
在这里插入图片描述

2.action ▲

这个时候我们会发现，下面出现了许多的action
在这里插入图片描述
action是一个可用于菜单栏、工具栏和其他地方的可执行操作的对象.相当于我们可以从这里对刚刚写的菜单在这里进行操作！
双击action可以对这些属性进行操作！
在这里插入图片描述
我们可以把对象名字改成我们容易看得懂的。
然后把我们的图标资源添加上。
Shortcut可以设置我们的快捷键。
在这里插入图片描述
然后把下面的action都进行修改！
注意对于粗体斜体下划线是复选，可以打开也可以不打开。
所以姚将Checkable选上。
在这里插入图片描述
这就全部添加完了
在这里插入图片描述
这是我们创建菜单时，自动创建的action
我们也可以先创建action然后拖到相应的栏。
在这里插入图片描述
我们可以看看效果：
在这里插入图片描述
有图片了，哈哈是不是很高兴，嘿嘿嘿。

3.toolBar工具栏

在界面的右边可以看到我们界面当前有的东西
在这里插入图片描述
默认是没有工具栏的，所有我们要进行手动的添加

右击MainWindow,添加工具栏

在这里插入图片描述
这个时候就有工具栏了
在这里插入图片描述

界面上的工具栏在这里：
在这里插入图片描述
然后我们可以将刚刚的action拖到工具栏中
也可以右键添加分隔符
在这里插入图片描述

在这里插入图片描述
这就拖完了，但是没有文字，我们可以先在右边的工具栏里的属性中找到toolButtonStyle进行设置
在这里插入图片描述
选择
在这里插入图片描述
就会出现：
在这里插入图片描述

然后添加一个文本编辑器组件

运行结果：
在这里插入图片描述

4.中心组件

看到我们的运行结果就感到很丑陋，文本编辑器都不能随着窗口的变化而变化。
这个时候我们就姚开始加布局的操作了。
选择整个窗口，添加水平布局。
在这里插入图片描述
此时我们中心组件就是文本编辑器了
在这里插入图片描述
可以自适应大小了，但是有边距
在这里插入图片描述
可以在centralwidget里面的Layout里把边距都设置为0
在这里插入图片描述
此时的运行结果：
在这里插入图片描述
完美，下面的是状态栏，不是边距。

三.代码界面设计

1.toolBar添加组件

现在距离我们的界面目标还差工具栏里面的字体大小和字体选择，这两个组件是QSpinBox和QFontComboBox是不能够直接拖放到工具栏的，因此我们只能使用代码去进行操作。
对于用代码写界面还是老样子
先定义指针，注意头文件

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include <QSpinBox>//整数选择
#include <QFontComboBox>//字体选择

QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACE

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    MainWindow(QWidget *parent = nullptr);
    ~MainWindow();

private:
    Ui::MainWindow *ui;
    QSpinBox*spinBoxFontSize;
    QFontComboBox*fontBox;
};
#endif // MAINWINDOW_H

然后对指针进行初始化

void MainWindow::initUI()
{
    spinBoxFontSize=new QSpinBox;
    fontBox=new QFontComboBox;


    spinBoxFontSize->setMinimumWidth(60); //设置字体大小选择的最小宽度
    spinBoxFontSize->setMinimum(8);//设置字体的最小尺寸
    spinBoxFontSize->setMaximum(60);//设置字体的最大尺寸
    spinBoxFontSize->setValue(ui->textEdit->fontPointSize());//开始拿到当前字体的大小

    ui->toolBar->addWidget(new QLabel("字体大小"));//向工具栏添加标签
    ui->toolBar->addWidget(spinBoxFontSize);//向工具栏中添加字体的大小选择


    fontBox->setMinimumWidth(160);//设置字体样式组件的最小宽度
    ui->toolBar->addSeparator();//添加一个分割符
    ui->toolBar->addWidget(new QLabel("字体"));//向工具栏中添加字体
    ui->toolBar->addWidget(fontBox);//向工具栏中添加字体

}

同时对组件进行一些基础的属性设置
toolBar->addWiget这就是向工具栏进行添加组件的接口
运行结果：
在这里插入图片描述
OK，在工具栏中就出现了，我们需要的组件了。

2.statusBar状态栏添加组件

接下来就差状态栏的界面了
添加的原理跟工具栏差不多
先定义指针;

#include <QMainWindow>
#include <QSpinBox>//整数选择
#include <QFontComboBox>//字体选择
#include <QLabel>
#include <QProgressBar>//进度条

QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACE

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    MainWindow(QWidget *parent = nullptr);
    ~MainWindow();

private:
    Ui::MainWindow *ui;
    QSpinBox*spinBoxFontSize;
    QFontComboBox*fontBox;
    
    QLabel*fileName;
    QProgressBar*progressBar;

    void initUI();
};

接下来在initUI里面进行初始化

void MainWindow::initUI()
{
    spinBoxFontSize=new QSpinBox;
    fontBox=new QFontComboBox;
    fileName=new QLabel;
    progressBar=new QProgressBar;


    spinBoxFontSize->setMinimumWidth(60); //设置字体大小选择的最小宽度
    spinBoxFontSize->setMinimum(8);//设置字体的最小尺寸
    spinBoxFontSize->setMaximum(60);//设置字体的最大尺寸
    spinBoxFontSize->setValue(ui->textEdit->fontPointSize());//开始拿到当前字体的大小

    ui->toolBar->addWidget(new QLabel("字体大小"));//向工具栏添加标签
    ui->toolBar->addWidget(spinBoxFontSize);//向工具栏中添加字体的大小选择


    fontBox->setMinimumWidth(160);//设置字体样式组件的最小宽度
    ui->toolBar->addSeparator();//添加一个分割符
    ui->toolBar->addWidget(new QLabel("字体"));//向工具栏中添加字体
    ui->toolBar->addWidget(fontBox);//向工具栏中添加字体
    
    fileName->setMinimumWidth(180);//设置标签的最小宽度
    fileName->setText("当前文字");
    ui->statusbar->addWidget(fileName);//将标签添加到状态栏
    
    progressBar->setMinimum(8);//设置进度条的最小值，与字体的尺寸相对应
    progressBar->setMaximum(60);//设置进度条的最大值
    progressBar->setMinimumWidth(80);//设置进度条的最小宽度
    progressBar->setMaximumWidth(200);//设置进度条的最大宽度
    progressBar->setValue(ui->textEdit->fontPointSize());//用字体的大小来设置当前进度条的值
    ui->statusbar->addWidget(progressBar);//将进度条添加到状态栏

}

运行结果：
在这里插入图片描述
OK我们的界面就全部完成了，这就是代码与ui设计器的结合，ok,接下来我们来实现功能！

四.完成界面的功能

1.对action配置信号槽

在这里有一个信号槽编辑器
在这里插入图片描述
这里可以进行信号槽的添加
对于信号和槽函数，qt内部都已经实现好的，才可以在这里直接进行配置。

在这里插入图片描述
这里我们就对剪切，复制，退出，清空，粘贴进行了添加
因为这些槽函数对应的接收者有对应的槽函数
对于action有一个共同的信号就是triggered触发器
在这里插入图片描述
运行结果：
在这里插入图片描述
点击清空就没了

在这里插入图片描述

2.对action转到信号槽

OK，接下来，就是我们想要实现的功能，qt组件内部没有对应的函数，那就只能我们手动去写了
但是还是有action的触发器信号
我们可以直接在action上点击转到槽
在这里插入图片描述
对于下划线，粗体，斜体因为有两种状态，我们用triggered(bool)这个信号。
在这里插入图片描述
新建的槽函：

void MainWindow::on_actionNew_triggered()
{
    ui->textEdit->clear();//将当前的文本清空
    fileName->setText("当前文件");//文件名也清空
}

打开文件的槽函数：

void MainWindow::on_actionOpen_triggered()
{
    //打开一个文件并获取路径
    QString FileName=QFileDialog::getOpenFileName(this,"打开一个文件");
    if(!FileName.isEmpty())//如果路径不为空
    {
        QFile file(FileName);//创建一个文件对象用路径名初始化
        if(file.open(QIODevice::ReadWrite|QIODevice::Text))//打开文件
        {
            QTextStream stream(&file);//创建一个文件流对象
            while(!stream.atEnd())//如果没有读到结尾
            {
                ui->textEdit->append(stream.readLine());//将读的每行添加到文件流中，然后尾部追加到文本编辑器中
            }
             fileName->setText("当前文件："+FileName);//将当前的文件名进行修改
        }
        file.close();//关闭文件
    }
   
}

3个字体样式的槽函数：

void MainWindow::on_actionBold_triggered(bool checked)
{
    auto format=ui->textEdit->currentCharFormat();//获取光标位置的字体样式
    format.setFontWeight(checked?QFont::Bold:QFont::Normal);//根据状态修改成粗体样式
    ui->textEdit->mergeCurrentCharFormat(format);//将修改后样式合并到字体样式中
}

void MainWindow::on_actionItalic_triggered(bool checked)
{
    auto format=ui->textEdit->currentCharFormat();
    format.setFontItalic(checked);
    ui->textEdit->mergeCurrentCharFormat(format);
}

void MainWindow::on_actionUnderLine_triggered(bool checked)
{
    auto format=ui->textEdit->currentCharFormat();
    format.setFontUnderline(checked);
    ui->textEdit->mergeCurrentCharFormat(format);
}

我注释写的这么详细，我就不讲了，如果有不懂的地方可以问我。
运行效果：
在这里插入图片描述
打开一个文件和3种样式可以完了，你们可以多玩玩，哈哈。

3.代码添加的组件手动关联槽函数

像我们自己手动添加的组件，我们必须要手动的关联和定义槽函数
字体大小和字体的样式本身有信号，所以不用我们进行手动的添加
先定义槽函数：

void on_spinBoxFontSize_valueChanged(int size);
void on_fontBox_currentIndexChanged(const QString & fontStyle);

然后关联：

void MainWindow::initSignalSlots()
{
    connect(spinBoxFontSize,SIGNAL(valueChanged(int)),
            this,SLOT(on_spinBoxFontSize_valueChanged(int)));
    connect(fontBox,SIGNAL(currentIndexChanged(const QString &)),
            this,SLOT(on_fontBox_currentIndexChanged(const QString &)));
}

最后实现槽函数：

void MainWindow::on_spinBoxFontSize_valueChanged(int size)
{
    QTextCharFormat format;
    format.setFontPointSize(size);//根据发来的信号设置文本的大小
    ui->textEdit->mergeCurrentCharFormat(format);//将字体大小合并到文本
    progressBar->setValue(size);//设置进度条的值

}

void MainWindow::on_fontBox_currentIndexChanged(const QString &fontStyle)
{
    QTextCharFormat format;
    format.setFontFamily(fontStyle);
    ui->textEdit->mergeCurrentCharFormat(format);
}

运行效果：
在这里插入图片描述
现在就可以尽情的玩耍了，功能都有了，你也试试看吧！

五.补充

1.样式选择问题

现在还是会有一点小bug，就是如果我点了斜体，粗体，下划线，我选择其他文本文字，他们的状态还是一直点着的。
我们可以用文本编辑器的一个转到槽，有个文本选择改变信号
在这里插入图片描述
实现槽函数：

void MainWindow::on_textEdit_selectionChanged()
{
    //先获取当前文本格式
    auto format=ui->textEdit->currentCharFormat();
    //根据当前的文本判断是否设置了样式
    ui->actionBold->setChecked(format.font().bold());
    ui->actionItalic->setChecked(format.fontItalic());
    ui->actionUnderLine->setChecked(format.fontUnderline());
}

效果：
在这里插入图片描述

2.复制粘贴剪切可选

现在有一个需求就是当我们选择文本才可以复制剪切
文本编辑器也有一个信号就是能否复制
在这里插入图片描述
实现槽函数：

void MainWindow::on_textEdit_copyAvailable(bool b)
{
    ui->actionCut->setEnabled(b);//如果可以复制就可以使用剪切
    
    ui->actionCopy->setEnabled(b);//如果可以复制就复制
    
    ui->actionPaste->setEnabled(ui->textEdit->canPaste());//如果可以粘贴的时候就设置可以
}

效果：
现在剪切和复制就用不了了，选中就又可以复制和剪切了。
在这里插入图片描述

3.图标

扩充内容，最后咱们来搞一个图标。
点击这里可以将图片转换成ico图标格式
然后保存到项目同目录下
在pro文件中加一个模块
在这里插入图片描述
等于后面与保存在同目录下的名字相同
在这里插入图片描述
顺便加一个窗口主题名：
在这里插入图片描述

运行结果：
在这里插入图片描述
帅呆了，太酷了！
哎呀，其他功能你们做好了，自己玩，我不想截图了…

六.总结

很明显，ui设计器的开发效率极快，但是有的界面只能用代码实现，如我们这个项目中，向工具栏和状态栏里面添加组件时，只能用代码来实现。
总的来说一句话：能用ui设计器的就尽量用，不能用的就用代码！

花了一天的时间，终于写完了，今天星期天，咱们的设计界面就完结撒花了，真的是太累了。确实接口有点多，容易记混，不过慢慢来，重要的是思想！
OK，就到这里吧！(*￣︶￣)

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

YOLOv8+CLIP实现图文特征匹配

YOLOv8+CLIP实现图文特征匹配

本文通过结合YOLOv8s的高效物体检测能力与CLIP的先进图像-文本匹配技术&#xff0c;展示了深度学习在处理和分析复杂多模态数据中的潜力。这种技术的应用不仅限于学术研究&#xff0c;还能广泛应用于工业、商业和日常技术产品中&#xff0c;以实现更智能的人机交互和信息处理。…
阅读更多...
第四届微调——炼丹

第四届微调——炼丹

学习地址&#xff1a;Tutorial/xtuner/README.md at main InternLM/Tutorial GitHub 笔记 微调是一种在已有的预训练模型基础上&#xff0c;通过使用新的数据对模型进行进一步优化和调整的技术手段。它的目的是使模型能够更好地适应特定的应用场景和任务需求&#xff0c;进一…
阅读更多...
IDEA切换分支

IDEA切换分支

方法一 1、选择要切换分支的module 2、右键&#xff0c;选择git 3、再点击branches 4、可以看到当前module的本地分支&#xff08;local Branches&#xff09;及远程分支&#xff08;Remote Branches&#xff09;列表。点击你要切换到的分支,Checkout即可。 方法二 1、点击…
阅读更多...
MFC编程之设计美丽的对话框

MFC编程之设计美丽的对话框

目录 写在前面&#xff1a; Part 1&#xff1a;美美的设计一下计算器的布局 1.描述文字&#xff1a; ​编辑 2.ID&#xff1a; Part 2&#xff1a;美美熟悉一下计算器的工作流程 Part 3&#xff1a;美美设计一下控件功能 1.edit control&#xff1a; 2.相关变量初始化&…
阅读更多...
Copilot for Microsoft 365 扩充新增 16 种语言

Copilot for Microsoft 365 扩充新增 16 种语言

最近&#xff0c;微软公司发布公告&#xff0c;进一步扩大 Copilot for Microsoft 365 语言支持&#xff0c;新增 16 种&#xff0c;支持的语言总数达到 25 种。 新支持的语言如下&#xff1a; 阿拉伯语 捷克语 丹麦语 荷兰语 芬兰语 希伯来语 匈牙利语 韩语 挪威语&am…
阅读更多...
Java面试之分布式篇

Java面试之分布式篇

分布式锁的实现方案 &#xff08;1&#xff09;用数据库实现分布式锁比较简单&#xff0c;就是创建一张锁表&#xff0c;数据库对字段作唯一性约束。加锁的时候&#xff0c;在锁表中增加一条记录即可&#xff1b;释放锁的时候删除锁记录就行。如果有并发请求同时提交到数据库&…
阅读更多...
二分判定+选插冒排序+归并快速堆希尔+计数排序

二分判定+选插冒排序+归并快速堆希尔+计数排序

二分力扣题 一&#xff1a;搜索二维矩阵 74. 搜索二维矩阵 按照题意&#xff1a;直接利用二维数组转换成一维数组进行求解 方法一&#xff1a;普通等于的二分查找 class Solution { public:bool searchMatrix(vector<vector<int>>& matrix, int target) {t…
阅读更多...
Shell编程之循环语甸与函数

Shell编程之循环语甸与函数

for 遍历循环 1&#xff09;for 变量 in 取值列表 for i in $(seq 1 10) do 命令序列 .... done 2&#xff09;for ((变量初始值; 变量范围; 变量的迭代方式)) for ((i1; i<10; i)) do 命令序列 .... done IFS for循环取值列表分隔符 set | grep IFS …
阅读更多...
SSH常用功能介绍-高级功能

SSH常用功能介绍-高级功能

一、介绍 SSH&#xff08;Secure Shell&#xff09;是一种用于远程登录和执行命令的网络协议&#xff0c;它提供了加密的连接&#xff0c;保证了数据的安全性。除了基本的远程登录功能外&#xff0c;SSH还提供了许多高级功能&#xff0c;以下是一些常用的高级功能介绍&#xf…
阅读更多...
Redis集群安装

Redis集群安装

将Redis安装包分别上传到3个文件夹&#xff0c;并解压缩 #编译并指定安装目录 cd /root/usr/local/redis-cluster/redis-7001/redis-6.2.6/ make make PREFIX/root/usr/local/redis-cluster/redis-7001 install # cd /root/usr/local/redis-cluster/redis-7002/redis-6.2.6/ m…
阅读更多...
FreeRTOS二值信号量

FreeRTOS二值信号量

目录 一、信号量的概念 1、信号量的基本概念 2、信号量的分类 二、二值信号量简介 三、二值信号量相关API 1、创建二值信号量 2、释放二值信号量 3、获取二值信号量 四、二值信号量实操 1、实验需求 2、CubeMX配置 3、代码实现 一、信号量的概念 1、信号量的基本概…
阅读更多...
使用 CloudFlare 后如何才能不影响搜索引擎蜘蛛爬虫

使用 CloudFlare 后如何才能不影响搜索引擎蜘蛛爬虫

今天，明月给大家再次详细讲解一下，明月在使用 CloudFlare 后如何才能不影响搜索引擎蜘蛛爬虫对站点的抓取，因为这是很多首次使用 CloudFlare 的站长们容易忽略和触犯的问题，并不是 CloudFlare 不友好，而是 CloudFlare 的防火墙（WAF）实在是太给力。其实在【CloudFlare 如…
阅读更多...
IDEA及Maven配置代理及Maven中央仓库配置详解

IDEA及Maven配置代理及Maven中央仓库配置详解

一、配置代理 首先&#xff0c;需要本地开启代理入口&#xff0c;如图。 这个跟你使用代理软件有关。像我使用的是qv2ray。 其次&#xff0c;idea配置代理&#xff0c;如图。 1.1 idea配置代理 打开Settings&#xff0c;如图 1.2 maven配置代理 maven配置代理&#xff0c;修…
阅读更多...
2024湖南理工学院程序设计竞赛（同步赛） G. 区间递减（思维题 分类讨论 ST表）

2024湖南理工学院程序设计竞赛（同步赛） G. 区间递减（思维题 分类讨论 ST表）

题目 https://ac.nowcoder.com/acm/contest/82672/G 思路来源 出题人 涼風青葉7代码 题解 注意到三种情况即可&#xff0c; 第一种情况&#xff0c;10 9 8 1 2&#xff0c;保留1 第二种情况&#xff0c;6 5 10 9 4 4&#xff0c;保留5 4 4 第三种情况&#xff0c;6 5 4&…
阅读更多...
基于Springboot的校园疫情防控管理系统（有报告）。Javaee项目，springboot项目。

基于Springboot的校园疫情防控管理系统（有报告）。Javaee项目，springboot项目。

演示视频&#xff1a; 基于Springboot的校园疫情防控管理系统&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系…
阅读更多...
Python 整数类型（int）详解：无限范围与多种进制

Python 整数类型（int）详解：无限范围与多种进制

引言 在编程中&#xff0c;整数是最基本的数据类型之一。不同编程语言对整数的处理方式各不相同&#xff0c;这往往影响到程序的性能和开发者的选择。本文将深入探讨 Python 中的整数类型&#xff08;int&#xff09;&#xff0c;其独特的处理方式&#xff0c;以及它在日常编程…
阅读更多...
【数据结构】环状链表OJ题

【数据结构】环状链表OJ题

✨✨✨专栏&#xff1a;数据结构 &#x1f9d1;‍&#x1f393;个人主页&#xff1a;SWsunlight 一、OJ 环形链表&#xff1a; 快慢指针即可解决问题: 2情况&#xff1a; 快指针走到结尾&#xff08;不是环&#xff09;快指针和尾指针相遇&#xff08;是环的&#xff09; …
阅读更多...
C语言——文件缓冲区

C语言——文件缓冲区

一、用户缓冲区和系统缓冲区 缓冲区的概念确实可以分为多个层次&#xff0c;其中最常见的两个层次是用户缓冲区和系统缓冲区。 这里的用户缓冲区和系统缓冲区都包括输入输出缓冲区。 1、用户缓冲区&#xff08;User-space Buffer&#xff09; 用户缓冲区是指由用户程序&…
阅读更多...
09.zabbix自定义模块并使用

09.zabbix自定义模块并使用

zabbix自定义模块并使用 根据tcp的11中状态获取值&#xff0c;进行批量配置监控项 [rootyunlong66 ~]# cat /etc/zabbix/zabbix_agentd.d/tcp.conf UserParameterESTABLISHED,netstat -antp |grep -c ESTABLISHED UserParameterSYN_SENT,netstat -antp |grep -c SYN_SENT Use…
阅读更多...
免费思维13招之七：空间型思维

免费思维13招之七：空间型思维

免费思维13招之七：空间型思维 本篇给你带来的是空间型思维。 空间型思维，具体分为内部空间型思维和外部空间型思维。 什么叫内部空间型思维呢？ 内部空间型就是充分利用现有空间或资源为社会提供免费服务，积累人气，增加流量，从而带动消费。 为什么你生意不好？为什么你…
阅读更多...
最新文章

Copyright @ 2022~2023