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

news2024/11/28 12:52:31

混合编程

  • 一.准备工作
    • 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添加组件

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

#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,就到这里吧!(* ̄︶ ̄)

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

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

相关文章

鸿蒙内核源码分析(Shell编辑篇) | 两个任务,三个阶段

系列篇从内核视角用一句话概括shell的底层实现为&#xff1a;两个任务&#xff0c;三个阶段。其本质是独立进程&#xff0c;因而划到进程管理模块。每次创建shell进程都会再创建两个任务。 客户端任务(ShellEntry)&#xff1a; 负责接受来自终端(控制台)敲入的一个个字符&…

第五步->手撕spring源码之资源加载器解析到注册

本步骤目标 在完成 Spring 的框架雏形后&#xff0c;现在我们可以通过单元测试进行手动操作 Bean 对象的定义、注册和属性填充&#xff0c;以及最终获取对象调用方法。但这里会有一个问题&#xff0c;就是如果实际使用这个 Spring 框架&#xff0c;是不太可能让用户通过手动方式…

PD-L1表达与免疫逃逸和免疫响应

免疫检查点信号转导和癌症免疫治疗&#xff08;文献&#xff09;-CSDN博客https://blog.csdn.net/hx2024/article/details/137470621?ops_request_misc%257B%2522request%255Fid%2522%253A%2522171551954416800184136566%2522%252C%2522scm%2522%253A%252220140713.130102334.…

webrtc windows 编译,以及peerconnection_client

webrtc windows环境编译&#xff0c;主要参考webrtc官方文档&#xff0c;自备梯子 depot tools 安装 Install depot_tools 因为我用的是windows&#xff0c;这里下载bundle 的安装包&#xff0c;然后直接解压&#xff0c;最后设置到环境变量PATH。 执行gn等命令不报错&…

A计算机上的程序与B计算机上部署的vmware上的虚拟机的程序通讯 如何配置?

环境&#xff1a; 在A计算机上运行着Debian11.3 Linux操作系统&#xff1b;在B计算机上运行着Windows10操作系统&#xff0c;并且安装了VMware软件&#xff0c;然后在VMware上创建了虚拟机C并安装了CentOS 6操作系统 需求&#xff1a; 现在A计算机上的程序需要同虚拟机C上的软…

【递归、回溯和剪枝】全排列 子集

0.回溯算法介绍 什么是回溯算法 回溯算法是⼀种经典的递归算法&#xff0c;通常⽤于解决组合问题、排列问题和搜索问题等。 回溯算法的基本思想&#xff1a;从⼀个初始状态开始&#xff0c;按照⼀定的规则向前搜索&#xff0c;当搜索到某个状态⽆法前进时&#xff0c;回退到前…

docker容器实现https访问

前言&#xff1a; 【云原生】docker容器实现https访问_docker ssl访问-CSDN博客 一术语介绍 ①key 私钥 明文--自己生成&#xff08;genrsa &#xff09; ②csr 公钥 由私钥生成 ③crt 证书 公钥 签名&#xff08;自签名或者由CA签名&#xff09; ④证书&#xf…

Eclipse下载安装教程(包含JDK安装)【保姆级教学】【2024.4已更新】

目录 文章最后附下载链接 第一步&#xff1a;下载Eclipse&#xff0c;并安装 第二步&#xff1a;下载JDK&#xff0c;并安装 第三步&#xff1a;Java运行环境配置 安装Eclipse必须同时安装JDK &#xff01;&#xff01;&#xff01; 文章最后附下载链接 第一步&#xf…

Go编程语言的调试器Delve | Goland远程连接Linux开发调试(go远程开发)

文章目录 Go编程语言的调试器一、什么是Delve二、delve 安装安装报错cgo: C compiler "gcc" not found: exec: "gcc": executable file not found in $PATH解决 三、delve命令行使用delve 常见的调试模式常用调试方法todo调试程序代码与动态库加载程序运行…

Unity编辑器如何多开同一个项目?

在联网游戏的开发过程中&#xff0c;多开客户端进行联调是再常见不过的需求。但是Unity并不支持编辑器多开同一个项目&#xff0c;每次都得项目打个包(耗时2分钟以上)&#xff0c;然后编辑器开一个进程&#xff0c;exe 再开一个&#xff0c;真的有够XX的。o(╥﹏╥)o没错&#…

Windows下安装 Emscripten 详细过程

背景 最近研究AV1编码标准的aom编码器&#xff0c;编译的过程中发现需要依赖EMSDK&#xff0c;看解释EMSDK就是Emscripten 的相应SDK&#xff0c;所以此博客记录下EMSDK的安装过程&#xff1b;因为之前完全没接触过Emscripten 。 Emscripten Emscripten 是一个用于将 C 和 …

JAVA基础--IO

IO 什么是IO 任何事物提到分类都必须有一个分类的标准&#xff0c;例如人&#xff0c;按照肤色可分为&#xff1a;黄的&#xff0c;白的&#xff0c;黑的&#xff1b;按照性别可分为&#xff1a;男&#xff0c;女&#xff0c;人妖。IO流的常见分类标准是按照*流动方向*和*操作…

k8s 数据流向 与 核心概念详细介绍

目录 一 k8s 数据流向 1&#xff0c;超级详细版 2&#xff0c;核心主键及含义 3&#xff0c;K8S 创建Pod 流程 4&#xff0c;用户访问流程 二 Kubernetes 核心概念 1&#xff0c;Pod 1.1 Pod 是什么 1.2 pod 与容器的关系 1.3 pod中容器 的通信 2&#xff0c; …

Servlet讲解

Servlet生命周期 我们只需要继承Servlet接口&#xff0c;查看方法即可看出Servlet的生命周期 import java.io.IOException;import javax.servlet.Servlet; import javax.servlet.ServletConfig; import javax.servlet.ServletException; import javax.servlet.ServletRequest…

哈希(构造哈希函数)

哈希 哈希也可以叫散列 画一个哈希表 哈希冲突越多&#xff0c;哈希表效率越低。 闭散列开放定址法: 1.线性探测&#xff0c;依次往后去找下一个空位置。 2.二次探测&#xff0c;按2次方往后找空位置。 #pragma once #include<vector> #include<iostream> #i…

Oracle11g账户频繁被锁定的3种解决办法

方法1&#xff1a;创建触发器 方法1&#xff1a;数据库中创建触发器(只记录失败)&#xff0c;但是需要开发同意或者开发自己创建。找到密码输入错误的服务器&#xff0c;进行数据源配置的更改。 该方法适用于要求找到密码错误用户所在服务器的场景下。 CREATE OR REPLACE TR…

Llama 3 + Groq 是 AI 天堂

我们将为生成式人工智能新闻搜索创建一个后端。我们将使用通过 Groq 的 LPU 提供服务的 Meta 的 Llama-3 8B 模型。 关于Groq 如果您还没有听说过 Groq&#xff0c;那么让我为您介绍一下。 Groq 正在为大型语言模型 (LLM) 中文本生成的推理速度设定新标准。 Groq 提供 LPU&…

kettle经验篇:MongoDB-delete插件问题

目录 项目场景 问题分析 解决方案 MongoDB Delete插件使用总结 项目场景 项目使用的ODS层数据库是MongoDB&#xff1b;在数据中心从DB层向ODS层同步数据过程中&#xff0c;发现有张ODS表在同步过程中&#xff0c;数据突然发生锐减&#xff0c;甚至于该ODS表数据清0。 同步…

dragonbones 5.6.3不能导出的解决办法

问题描述 使用dragonbones 5.6.3导出资源时无反应。 解决方法 第一步安装node.js&#xff0c;我这里使用的是V18.16.0第二步进入到DragonBonesPro\egretlauncher\server\win目录&#xff0c;然后把里面的node.exe替换为刚刚下载的node文件夹即可&#xff0c;如下图&#xff…

GD32用ST-Link出现internal command error的原因及解决方法

一、GD32 F407烧录时出现can not reset target shutting down debug session 搜寻网上资料&#xff0c;发现解决方式多种多样&#xff0c;做一个简单的总结&#xff1a; 1.工程路径包含中文名 2.需更改debug选项 3.引脚冲突 4.杜邦线太长 而先前我的工程路径包含中文名也仍…