【五一创作】VS+Qt主界面内嵌自定义控件的四种方法以及不同自定义控件数据交互

这篇具有很好参考价值的文章主要介绍了【五一创作】VS+Qt主界面内嵌自定义控件的四种方法以及不同自定义控件数据交互。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

在Qt界面开发过程中,一个主界面或者主窗口看成是各个控件排列组合后的集合,对于一些项目而言,有些常用的控件可以封装成自己想要的控件样式并且复用,比如说,log显示控件,图像/视频显示控件等,可以将常用的控件代码封装起来,以便下次复用,内嵌在不同的主界面内。这里总结了常见的四种方法供大家参考;

第一种方法:直接调用自定义控件项目文件至主界面项目中

  • 新建一个自定义控件项目
    vs 自定义控件,qt,交互,ui
    一般自定义控件,继承于QWidget;
    ui文件为
    vs 自定义控件,qt,交互,ui
  • 另建一个主界面项目,主界面ui文件如图所示,在主界面内添加一个QFrame,在Frame内添加一个布局控件(添加widget控件)
    vs 自定义控件,qt,交互,ui
  • 将自定义控件的.ui,.h,.cpp文件添加到主界面的项目中
  • 在主界面内添加自定义控件类,并建立自定义控件变量

头文件为

#include "CustomWidget.h"  //自定义控件

class MainWindows : public QMainWindow
{
    Q_OBJECT

public:
    MainWindows(QWidget *parent = Q_NULLPTR);
	
private:
	CustomWidget *customWidget;    //自定义控件
    Ui::MainWindowsClass ui;
};

cpp文件内

#include "MainWindows.h"

MainWindows::MainWindows(QWidget *parent)
    : QMainWindow(parent)
{
    ui.setupUi(this);
	//加载自定义控件
	customWidget = new CustomWidget;
	ui.layout->addWidget(customWidget);
	//调用自定义控件的接口
	customWidget->setText();
}

这样运行之后,便可以看到自定义控件内嵌到主界面内;
vs 自定义控件,qt,交互,ui

自定义控件和主界面之间的数据交互方法

主界面控制自定义控件:可以在子界面内建立一个数据接口函数,这样可以通过直接调用子界面类对象的函数,实现子界面内数据变化;比如说上述,自定义控件的接口setText()可以实现自定义控件的ui刷新;
自定义控件内数据传给主界面:通过信号槽的方式;
vs 自定义控件,qt,交互,ui

第二种方法:自定义控件编译成dll,主界面项目调用

  • 创建一个自定义控件项目文件,将项目的输出属性更改为dll
    vs 自定义控件,qt,交互,ui
    vs 自定义控件,qt,交互,ui

  • 在自定义控件类上要加入Q_DECL_EXPORT,这样才能输出lib文件

  • 自定义控件的ui文件与方法一相同,自定义控件类的.h文件为

#include <QtWidgets/QWidget>
#include "ui_CustomWidget.h"
//没有Q_DECL_EXPORT,就不会生成lib文件
class Q_DECL_EXPORT CustomWidget : public QWidget
{
    Q_OBJECT

public:
    CustomWidget(QWidget *parent = Q_NULLPTR);
	void setText(QString str);  //接口函数

private:
    Ui::CustomWidgetClass ui;

public slots:
	void on_openBtn();
};
  • 新建一个主界面项目,添加QFrame和布局,主控件布局和方法一一样,将自定义控件的dll文件,lib文件,.h文件添加到主界面项目中,注意,在.h文件发布的时候,需要提供ui_XXX.h,并且将.h文件中的Q_DECL_EXPORT去掉,不然会报错,主界面包含的头文件如图所示;
    vs 自定义控件,qt,交互,ui

发布的.h文件为

#include <QtWidgets/QWidget>
#include "ui_CustomWidget.h"
//发布时,去掉Q_DECL_EXPORT
class CustomWidget : public QWidget
{
}
  • 主界面的定义与方法一相同;主界面与自定义控件之间的数据交互也与方法一相同,最终的效果为
    vs 自定义控件,qt,交互,ui

第三种方法:在Qt Designer中提升控件

  • 新建一个自定义控件项目,自定义控件与方法一相同
  • 新建一个主界面项目,将自定义控件的ui文件,cpp文件,h文件添加到主界面项目中;因为ui编译顺序的问题,要把自定义控件的.h文件放到最前面,不然会报错;
#include "CustomWidget.h"  //自定义控件
#include <QtWidgets/QMainWindow>
#include <qpushbutton.h>
#include "ui_MainWindows.h"
  • 在主界面的Qt Designer中先新建一个QWidget控件,提升控件;选中控件,选择提升为
    vs 自定义控件,qt,交互,ui
    手动填入自定义控件类的类名称
    vs 自定义控件,qt,交互,ui
    可以在对象查看器中看到QWidget已经变成了CustomWidget,同时修改对象名称为customWidget,接下来便可以按照第一种方法,在主界面函数类访问自定义控件的数据;
    vs 自定义控件,qt,交互,ui

  • 最终主界面效果为
    vs 自定义控件,qt,交互,ui

第四种方法:自定义插件–Plugin方式

  • 首先在VS中创建一个Qt Designer Custom Widget项目并命名为CustomWidget。如图所示
    vs 自定义控件,qt,交互,ui
    创建好之后,可以看到并无ui文件。
    vs 自定义控件,qt,交互,ui

这里我们讲述的自定义控件是制作成插件的方式,因此设计阶段是需要ui文件的,这里需要在项目文件内自行创建一个ui文件。并且在CustomWidget.h内添加ui文件生成的ui_CustomWidget.h头文件。自行添加槽函数,ui对象等;

#pragma once

#include <QtWidgets/QWidget>
//自行添加ui生成的头文件
#include "ui_CustomWidget.h"

class CustomWidget : public QWidget
{
    Q_OBJECT

public:
    CustomWidget(QWidget *parent = Q_NULLPTR);

//自行添加ui界面的信号槽函数
public slots:
void on_openBtn();
//这里要跟ui_CustomWidget.h里面命名空间内的界面类对应上,自行添加
private:
	Ui::Form ui;
};


#include "CustomWidget.h"
CustomWidget::CustomWidget(QWidget *parent)
    : QWidget(parent)
{
	//自行添加的代码
	ui.setupUi(this);
	connect(ui.openBtn,&QPushButton::clicked,this,&CustomWidget::on_openBtn);
}
//自行添加槽函数
void CustomWidget::on_openBtn()
{
	ui.textBrowser->append("open widget");
}

可以看出,插件类CustomWidgetPlugin组合类CustomWidget,CustomWidget组合界面类Form;
在自定义插件的生成文件内可以看到:
vs 自定义控件,qt,交互,ui
自定义插件生成dll和lib文件;主界面动态加载dll文件即可;

  • 创建一个主界面项目文件,与前两个方法相同;
  • 在主界面内可以动态加载dll文件,便可以实现动态加载自定义控件;将dll放到exe同级目录下,动态加载代码为:
    头文件:
//插件的头文件
#include "CustomWidget.h"
#include "ui_CustomWidget.h"
//相应的头文件
#include <qpluginloader.h>
#include <QtUiPlugin/QDesignerCustomWidgetInterface>

动态加载代码为:

QPluginLoader loader("CustomWidget.dll");
	if (loader.load())
	{
		QObject *plugin = loader.instance();
		if (plugin)
		{
			QDesignerCustomWidgetInterface *widget = qobject_cast<QDesignerCustomWidgetInterface *>(plugin);
			if (widget)
			{
				//创建的子控件对象
				QWidget *customWidget = widget->createWidget(nullptr);
				ui.layout->addWidget(customWidget);
			}
		}
	}

最终界面效果为:
vs 自定义控件,qt,交互,ui

四种方法的总结

其实四种方法的本质是将自定义控件封装成一个专门的类,通过调用子控件类对象便可以实现内嵌自定义控件,在开发过程中,使用以上四种方法,相当于把界面分成了各个子模块,主界面通过调用这些子模块,可以实现团队之间快速开发工作;

不同自定义控件或窗口之间数据交互的方式

从主界面传递数据到嵌入的自定义子控件,可以通过直接调用子控件类的接口函数实现从主窗口到子窗口之间的数据传递;而子界面传递到主界面或者子界面之间的数据交互可以按照单例模式,建立一个传递信号的类。其本质是建立一个类,通过connect函数可以传递信号到信号,从而实现自定义控件到主界面之间的数据交互;此代码参考的博主文章为:
Qt 信号在多层次对象间传递 多层嵌套类对象之间信号传递
头文件为:

#include <QObject>
class TransmitSignals : public QObject
{
	Q_OBJECT
public:
	static TransmitSignals &GetInstance();
private:
	TransmitSignals();
	~TransmitSignals();
	TransmitSignals(const TransmitSignals &) = delete;
	TransmitSignals(const TransmitSignals &&) = delete;
	TransmitSignals &operator=(const TransmitSignals &) = delete;
signals:
    //传递数据
	//传给A界面数据
	void sigToAWidget(QString ret);
	//传给B界面数据
	void sigToBWidget(QString ret);
public slots:
};

.cpp文件为

#include "TransmitSignals.h"

TransmitSignals::TransmitSignals()
{
}

TransmitSignals::~TransmitSignals()
{
}
TransmitSignals& TransmitSignals::GetInstance()
{
	static TransmitSignals RobotControl;
	return RobotControl;
}

最终的效果为
vs 自定义控件,qt,交互,ui

结尾

上述方法的源代码已放置链接中,可下载后查看项目源码:
Qt主界面内嵌自定义控件的四种方法以及不同控件数据交互文章来源地址https://www.toymoban.com/news/detail-515778.html

到了这里,关于【五一创作】VS+Qt主界面内嵌自定义控件的四种方法以及不同自定义控件数据交互的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • QT界面调用ui,定义主MainWindow中的子控件的槽函数

    在QT的应用中,不可避免需要使用QtDesigner,创建的ui如何调用呢,这里给出我的调用方法。  所有设计做完后,保存ui文件,终端输入: 得到ui.h文件,新建mainwindow.h文件,输入: 新建mainwindow.cpp文件,输入: 新建main.cpp文件,输入: 编译即可,编译需要编写pro文件。 除此之外,

    2024年02月12日
    浏览(31)
  • QT子线程或自定义类操作访问主界面UI控件的几种方法

            QT创建窗体工程,一般在MainWindow或Dialog类里可以直接通过ui指针访问控件,但是添加新的类后又如何访问呢,可以通过以下几种方式: (1)例如有个自己定义的类CustomClass,在自定义类里包含主界面指针MainWindow * class MainWindow;   class CustomClass { public:     CustomCla

    2024年02月09日
    浏览(45)
  • QT在自定义类中调用主类(界面类ui及其控件)的一种实用方法

    在实际应用中,经常会出现需要自定义类访问界面中的控件的情况,使用信号和槽进行跳转往往过于繁琐,使用下述方法可以巧妙解决: 界面类 QtWidgetsTest.h QtWidgetsTest.cpp 自定义类 CustomClass.h 首先包含ui头文件(其实也可不写,因为cpp里一定会包含QtWidgetsTest.h并包含ui文件),

    2024年02月16日
    浏览(35)
  • 【五一创作】Qt quick基础1(包含基本元素Text Image Rectangle的使用)

    最近需要看Qt的代码,虽然之前也接触过Qt,但是当时是使用可推拽式的ui设计,虽然体验很好,但是需要看的代码使用的是Qt quick,正好顺便学习一下,记录在此,以便之后忘记作回顾之用。 Qt中设计UI的拖拽式的Widget,例如使用Qt Designer创建的窗口和控件等,这些Widget提供了

    2024年02月06日
    浏览(32)
  • Qt学习_11_构建内嵌子界面与独立子界面的框架

    对于较大的Qt项目而言,弹出的 独立 子界面 与 根据菜单在主窗口内切换的 内嵌 子界面是我们所必须面对的问题。那么在项目框架对这两部分内容应该如何布局,才能让项目 更清爽 , 更规整 。是本文着重讨论的内容。下图给出我们的最终设计框架。 1.1.1 创建 首先介绍独

    2024年02月02日
    浏览(22)
  • 界面控件DevExpress v21.2.3发布——支持VS 2022 & .NET 6

    DevExpress Universal Subscription拥有.NET开发需要的所有平台控件,包含600多个UI控件、报表平台、DevExpress Dashboard eXpressApp 框架、适用于 Visual Studio的CodeRush等一系列辅助工具。 DevExpress v21.2.3最新版下载 具体更新内容如下: 重大更新: 这个列表包含了v21.2.3中引入的所有重大更改。

    2024年02月04日
    浏览(35)
  • QT之多个界面相互切换 (stackedWidget控件)

    stackedWidget控件:   可以自由在多个widget切换,可以通过点击顶部菜单,显示不同界面,在实际开发中应用很广泛。 1. 添加控件, 在设计界面左侧添加 stackedWidget控件 2. 增加几个  widget 界面  3. 将这几个 widget 插入到 stackedWidget 首先定义 一个枚举量, 存放每个界面的编号

    2024年02月11日
    浏览(80)
  • Qt子线程控制主界面UI控件

    在子线程里控制主界面的UI控件有两种方法:第一种是在子线程中发送信号,然后在主线程中去更新;第二种方法是在子线程中创建同样的对象,然后把主界面中控件的指针赋给创建的对象。 第一种方法在此不做实例展示,在此通过一个简单的例子展示第二种方法: 下面是主

    2024年02月15日
    浏览(37)
  • Qt自定义控件 —— 颜色选择组合控件

             在开始阅读本文之前,如果您有学习创建Qt自定义控件并在其他项目中引用的需求,请参考: Linux系统下在Qt Creator中创建自定义控件并在其他项目中引用 https://blog.csdn.net/YMGogre/article/details/128920804 目录 1、应用场景: 2、所需资源: 3、界面布局: 3.1、各布局/控件

    2024年02月10日
    浏览(33)
  • C++ Qt 学习(二):常用控件使用与界面布局

    ui 设计器设计界面很方便,为什么还要手写代码? 更好的控制布局 更好的设置 qss 代码复用 完全不会写 Qt 布局,很麻烦,怎么学会手写布局? 看 Qt 自己怎么写 改良 Qt 的布局写法 1.1 水平布局 addWidget() 在布局里添加一个控件 addLayout() 在布局里添加子布局 setMargin() 设置水平

    2024年02月06日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包