Qt第十章设计师

已于 2024-06-30 17:52:58 修改
阅读量625 收藏 27
点赞数 11
文章标签： qt 命令模式 开发语言
于 2024-06-29 22:26:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yerennuo/article/details/139918779
版权

Designer设计师的使用

本文图片资源已上传

文章目录

1.创建带UI文件的项目

2.UI设计器使用

在这里插入图片描述
下面的+号能编辑信号与槽，如果没显示，打开视图>视图>信号和槽编辑器
在这里插入图片描述
也可以右键控件，转到槽，写自定义槽

void Widget::on_pushButton_pressed()
{
    showMaximized();
    ui->pushButton->raise(); // 放到前面
}

void Widget::on_pushButton_2_pressed()
{
    showNormal();
    ui->pushButton_2->raise();
}

3.自定义控件

1. 通过控件提升，可以实现自定义控件

先写一个自己的UI控件

#include "MyWidget.h"
#include "ui_MyWidget.h"

MyWidget::MyWidget(QWidget* parent)
    : QWidget(parent)
    , ui(new Ui::MyWidget)
{
    ui->setupUi(this);
    state = false;
    ui->label->setPixmap(tr(":/images/check_off.png"));
}

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

void MyWidget::mousePressEvent(QMouseEvent* event)
{
    if (!state)
        ui->label->setPixmap(tr(":/images/check_off.png"));
    else
        ui->label->setPixmap(tr(":/images/check_on.png"));
    state = !state;
}

然后在原来的widget.ui上面添加一个widget，对这个widget右键，控件提升
在这里插入图片描述
提升后运行效果如下
在这里插入图片描述

2. 新建自定义控件

1. 新建项目

  1. 新建设计师自定义控件项目在这里插入图片描述

  2. 给项目取个名字，我这里叫SWaterProgressBarPlugn

  3. 一直点击下一步，直到如下界面，添加一个类名 SWaterProgressBar

在这里插入图片描述

  1. 然后一直下一步，直到完成

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

2. 添加代码
  1. 创建SWaterProgressBar.h头文件并添加如下代码。
#ifndef _SWATERPROGRESSBAR_H_
#define _SWATERPROGRESSBAR_H_

#include <QWidget>

struct SWaterProgressBarPrivate
{
	int value = 0;			//当前值
	qreal yOffset = 0;		//波浪偏移
	int minValue = 0;
	int maxValue = 100;
	QString text;
	bool textVisible = true;
	int minRadius = 0;		//qMin(width(),height())/2
	qreal scale = 0.;		//value 在最大值和最小值中的占比
};

class Q_DECL_EXPORT  SWaterProgressBar : public QWidget
{
	Q_OBJECT
public:
	explicit SWaterProgressBar(QWidget* parent = nullptr);

	int minimum() const;
	int maximum() const;

	int value() const;

	virtual QString text() const;
	void setTextVisible(bool visible);
	bool isTextVisible() const;

protected:
	void resizeEvent(QResizeEvent* ev)override;
	void paintEvent(QPaintEvent* ev)override;
	void drawBackground(QPainter* painter);
	void drawText(QPainter* painter);
	void drawWater(QPainter* painter);
public Q_SLOTS:
	void updaterWater();

	void reset();
	void setRange(int minimum, int maximum);
	void setMinimum(int minimum);
	void setMaximum(int maximum);
	void setValue(int value);
Q_SIGNALS:
	void valueChanged(int value);
private:
	QScopedPointer<SWaterProgressBarPrivate> d;
};

#endif // !_SWATERPROGRESSBAR_H_
  1. 在SWaterProgressBar.cpp中添加如下代码
#include "SWaterProgressBar.h"
#include <QPainter>
#include <QPainterPath>
#include <QTimer>


SWaterProgressBar::SWaterProgressBar(QWidget* parent)
	:QWidget(parent)
{
	d.reset(new SWaterProgressBarPrivate);
	resize(100, 100);

    QTimer* timer = new QTimer(this);
    connect(timer, &QTimer::timeout, this, &SWaterProgressBar::updaterWater);
    timer->start(30);//定时30毫秒
}

void SWaterProgressBar::resizeEvent(QResizeEvent* ev)
{
    d->minRadius = qMin(width(), height()) / 2;
}

void SWaterProgressBar::paintEvent(QPaintEvent* ev)
{
	Q_UNUSED(ev);
    //d->value 在range内所占比例
    d->scale = (qreal)(qAbs(d->value - d->minValue)) / (qAbs(d->maxValue - d->minValue));
	QPainter painter(this);
	painter.setRenderHints(QPainter::Antialiasing | QPainter::TextAntialiasing);	//设置抗锯齿
	painter.translate(width() / 2, height() / 2);	//设置坐标原点为控件中心
	//painter.scale(side / 200.0, side / 200.0);//设置坐标系拉伸为200*200
	drawBackground(&painter);
    drawWater(&painter);
	drawText(&painter);
 
}

void SWaterProgressBar::drawBackground(QPainter* painter)
{
	painter->save();

	painter->setPen(Qt::NoPen);
	painter->setBrush(QColor(40, 40, 40));
	QRect rect(-d->minRadius, -d->minRadius, d->minRadius * 2, d->minRadius * 2);
	painter->drawEllipse(rect);

	painter->restore();
}

void SWaterProgressBar::drawText(QPainter* painter)
{
    if (d->textVisible)
    {
        painter->save();
        d->text = QString("%1%").arg(d->scale * 100,2,'f', 1);
        //设置字体大小
        //QFont font = painter->font();
        //font.setPixelSize(30);
        //painter->setFont(font);
        //设置画笔
        painter->setPen(QPen(Qt::white, 4));
        //绘制文本
        QRect r(-d->minRadius, -d->minRadius, d->minRadius * 2, d->minRadius * 2);
        painter->drawText(r, Qt::AlignCenter, d->text);

        painter->restore();
    }
}

void SWaterProgressBar::drawWater(QPainter* painter)
{
    if (d->value == d->minValue) //没波浪，不用画
    {
        return;
    }
    else if (d->value == d->maxValue) //波浪满，直接画圆
    {
        painter->save();
        painter->setPen(Qt::NoPen);
        painter->setBrush(QBrush(QColor(100, 180, 250, 230)));
        painter->drawEllipse(QRect(-d->minRadius, -d->minRadius, d->minRadius * 2, d->minRadius * 2));
        painter->restore();
    }
    else//画波浪
    {
        int side = qMin(width(), height());
        int height = side/2 - d->scale * side;  //100/2 - 0.5 * 100
        painter->save();
        QPainterPath wavePath; //波浪区域
        QPainterPath wavePath2; //波浪区域
      
        //1.8 角速度
        //4   振幅
        //height y轴相对远点偏移
        //d->yOffset x=0时的相位；反映在坐标系上则为图像的左右移动。
        //x * M_PI / 180  把x当做角度，转成弧度
        wavePath.moveTo(-d->minRadius, d->minRadius);       //第一点坐标为（0,height）;
        for (int x = -d->minRadius; x <= d->minRadius; x++)  //x从0~w的值而改变，从而得到正弦曲线
        {
            double waveY = 4 * qSin(1.8 * (x * M_PI / 180 + d->yOffset)) + height;// waveY随着x的值改变而改变，从而得到正弦曲线
            wavePath.lineTo(x, waveY);   //从上一个绘制点画一条线到（x，waveY）；
        }
        wavePath.lineTo(d->minRadius, d->minRadius); //右下角，坐标（width, height），移动到右下角结束点,整体形成一个闭合路径

        wavePath2.moveTo(-d->minRadius, d->minRadius);//第一点坐标为（0,height）;
        for (int x = -d->minRadius; x <= d->minRadius; x++)  //x从0~w的值而改变，从而得到正弦曲线
        {
           double waveY = 4 * qSin(1.8 * (x * M_PI / 180 + d->yOffset + 2)) + height;// waveY随着x的值改变而改变，从而得到正弦曲线
           wavePath2.lineTo(x, waveY);   //从上一个绘制点画一条线到（x，waveY）；
        }
        wavePath2.lineTo(d->minRadius, d->minRadius); //右下角，坐标（width, height），移动到右下角结束点,整体形成一个闭合路径

        QPainterPath bigPath;
        bigPath.addEllipse(QRect(-d->minRadius, -d->minRadius, d->minRadius * 2, d->minRadius * 2));
        wavePath = bigPath.intersected(wavePath);
        wavePath2 = bigPath.intersected(wavePath2);

        painter->setPen(Qt::NoPen);
        painter->setBrush(QBrush(QColor(100, 184, 255, 80)));
        painter->drawPath(wavePath);      //绘制路径
        painter->setBrush(QBrush(QColor(100, 180, 250, 230)));
        painter->drawPath(wavePath2);      //绘制路径
        painter->restore();
    }
}

int SWaterProgressBar::minimum() const
{
    return d->minValue;
}

int SWaterProgressBar::maximum() const
{
    return d->maxValue;
}

int SWaterProgressBar::value() const
{
    return d->value;
}

QString SWaterProgressBar::text() const
{
    return d->text;
}

void SWaterProgressBar::setTextVisible(bool visible)
{
    d->textVisible = visible;
}

bool SWaterProgressBar::isTextVisible() const
{
    return d->textVisible;
}

void SWaterProgressBar::reset()
{
    d->minValue = 0;
    d->maxValue = 100;
}
void SWaterProgressBar::setRange(int minimum, int maximum)
{
    d->minValue = minimum;
    d->maxValue = maximum;
    d->value = minimum;
}
void SWaterProgressBar::setMinimum(int minimum)
{
    d->minValue = minimum;
    d->value = minimum;
}
void SWaterProgressBar::setMaximum(int maximum)
{
    d->maxValue = maximum;
}
void SWaterProgressBar::setValue(int value)
{
    if (value != d->value)
    {
        d->value = value;
        emit valueChanged(value);
    }   
}


void SWaterProgressBar::updaterWater()
{
    d->yOffset += 0.15;//波浪偏移
    if (d->yOffset >= 360)
        d->yOffset = 0;
    update();
}
  1. 添加图标资源

在这里插入图片描述

3.生成动态库

  • 构建套件 这里选择MSVC 64bit Release

    • Release

至此，自定义控件dll生成完毕！

2.DLL文件使用
1. QtCreator使用DLL

Qt6自带的QtCreator是64bit，所以要在QC中使用插件，只能使用64bit的DLL文件，将64bit/Release版本的.dll文件复制到QtCreator的路径下，然后打开Qt就可以看到控件了（无需将64bit/Debug版本的放入，QtCreator只支持64bit/Release版本的.dll文件）。

PS：出现如下警告，运行程序窗口不会显示出来

MSVC 如果在Debug模式下，使用了Release模式编译的DLL，则会警告：QWidget: Must construct a QApplication before a QWidget

  1. 复制64bit/Release版本的 swaterprogressbarplugin.dll 到\Qt\Tools\QtCreator\bin\plugins\designer

在这里插入图片描述

  1. 然后重新打开QC，就可以看到自定义控件，拖到Ui界面也正常显示
    在这里插入图片描述

  2. 如果将release和debug的DLL文件同时放入，debug的DLL文件不能正常加载。点击 工具->From Editor->About Qt Designer Plugins 可以查看加载的插件以及失败的插件和不能加载的原因

  3. 此时，只是在UI界面能够把控件拖出来，还不能运行，因为没有配置头文件和库文件。

    • 将swaterprogressbarplugind.h放入项目的源码目录

    • 对应的构建也要是release构建，debug是不行的
      在这里插入图片描述

    • 将swaterprogressbarplugind.lib和swaterprogressbarplugind.dll文件放入生成的exe同级目录。

在这里插入图片描述

  • CMakeLists.txt配置库

    target_link_libraries(designer PRIVATE Qt${QT_VERSION_MAJOR}::Widgets swaterprogressbarplugin)

    即在原来的targetlink后添加你的库 swaterprogressbarplugin

Ok！完美运行

在这里插入图片描述

注意要查看QCreator当前用的构建套件，点帮助>about QtCreator

3.
我现在是6.6.3，执行上述添加自定义控件的时候，项目构建套件要设置成6.6.3 MSVC
在这里插入图片描述

4.UI设计师原理

  • QT 生成的.ui文件用本身的Qc不可以修改，但可以用记事本打开修改，是xml语法写的，如果不熟悉不要改，否则会报错
  • Qt通过moc rcc 把 QT文件转换成纯C++语言，在G:\qtproject\designer\build\Desktop_Qt_6_6_3_MSVC2019_64bit-Release\designer_autogen\EWIEGA46WW 文件夹里可以查看到
    *
  • uic编译的文件在 G:\qtproject\designer\build\Desktop_Qt_6_6_3_MSVC2019_64bit-Release\designer_autogen\include文件夹里

5.用UI文件生成头文件

打开QT自带的命令窗口在这里插入图片描述
定位到你的ui文件所在文件夹
输入命令uic xxx.ui -o ui_xxx.h
在这里插入图片描述
就会在当前文件夹中生成.h头文件

6.使用ui_widget.h

然后和正常生成的UI一样使用就行了

yerennuo
关注
  • 11
    点赞
  • 踩
  • 27
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Qt第十章设计师图片资源
06-28
Qt第十章设计师图片资源
Qt课程项目设计_水质检测系统
07-04
使用串口通信设计出的一套QT上位机控制下位机的程序系统设计。
第十四章：Qt网络编程
weixin_42284219的博客
04-07 1820
回顾： 第一章：Qt的概述 第二章：在Ubuntu编写第一个Qt程序 第三章：Qt的字符串和字符编码 第四章：Qt的信号和槽 第五章：Qt容器窗口（父窗口） 第六章：面向对象的Qt编程 第七章：Qt设计师使用（designer） 第八章：Qt创造器的使用（qtcreator） 第九章：资源和图像 第十章：目录与定时器 第十一章：鼠标和键盘事件 第十二章：Qt数据库(sqlite) 第十三章：QT多线程(QThread) Qt网络编程 1、网络协议层次（OSI七层） 应用层 List item 表示层 会话
【QT教程】QT6嵌入式系统设计 QT嵌入式
QT界面开发界面美化
05-06 1261
嵌入式系统简介《QT6嵌入式系统设计》正文——嵌入式系统简介嵌入式系统概述嵌入式系统是一种专门为特定任务而设计的计算系统，它不同于通用计算机系统，其设计目标是实现高效、稳定和可靠的特定功能。嵌入式系统通常具备以下特点,专一性,嵌入式系统通常是为了某一特定的应用而设计的，因此它们的功能是专一的。实时性,许多嵌入式系统需要对输入信号做出快速响应，因此实时性是其基本要求之一。资源限制,与通用计算机相比，嵌入式系统往往有更有限的处理器速度、内存和存储资源。封闭性。
第十章：目录与定时器
weixin_42284219的博客
04-01 153
回顾： 第一章：Qt的概述 第二章：在Ubuntu编写第一个Qt程序 第三章：Qt的字符串和字符编码 第四章：Qt的信号和槽 第五章：Qt容器窗口（父窗口） 第六章：面向对象的Qt编程 第七章：Qt设计师使用（designer） 第八章：Qt创造器的使用（qtcreator） 第九章：资源和图像 目录与定时器 1、目录类QDir 创建目录对象 QDir(const QString & path) path：要访问的系统路径 绝对路径： QDir("/home/user/Documents") QD
第十二章：Qt数据库(sqlite)
weixin_42284219的博客
04-05 1038
回顾： 第一章：Qt的概述 第二章：在Ubuntu编写第一个Qt程序 第三章：Qt的字符串和字符编码 第四章：Qt的信号和槽 第五章：Qt容器窗口（父窗口） 第六章：面向对象的Qt编程 第七章：Qt设计师使用（designer） 第八章：Qt创造器的使用（qtcreator） 第九章：资源和图像 第十章：目录与定时器 第十一章：鼠标和键盘事件 Qt数据库(sqlite) 1、数据库简介//了解 1）概念：数据库是指以一定方式存储在一起，能为多个用户共享，具有仅能小的冗余度的特性，是与应用程序彼此独立的数据
【QT教程】QT6桌面应用开发
QT界面开发界面美化
04-13 1388
QT6的发展历程QT6桌面应用开发QT是挪威Trolltech公司（后被诺基亚收购，之后又转手给Digia，最终由The Qt Company继续开发）开发的一个跨平台的C++图形用户界面应用程序框架。它被广泛用于开发桌面、嵌入式和移动应用程序，支持多种操作系统，如Windows、Mac OS、Linux、iOS和Android等。QT6的发展历程QT从最初的版本发展到现在的QT6，经历了多次重要的更新和迭代。
第十三章：QT多线程(QThread)
weixin_42284219的博客
04-06 797
回顾： 第一章：Qt的概述 第二章：在Ubuntu编写第一个Qt程序 第三章：Qt的字符串和字符编码 第四章：Qt的信号和槽 第五章：Qt容器窗口（父窗口） 第六章：面向对象的Qt编程 第七章：Qt设计师使用（designer） 第八章：Qt创造器的使用（qtcreator） 第九章：资源和图像 第十章：目录与定时器 第十一章：鼠标和键盘事件 第十二章：Qt数据库(sqlite) QT多线程(QThread) 1、创建线程方式//pthread_create 1）方法1：QObject::moveToRh
用Qt搭建图书管理系统（十）
hq_cjj的博客
03-10 1440
第十章 添加书籍 https://gitee.com/mayonaka/LibraryManageSystem 百度云：https://pan.baidu.com/s/1G95yPyGG080b6yXcjc8B0g 提取码：4q8b 添加书籍界面的设计思想很简单，是在界面上显示几个输入框，让用户填写书籍的信息，在用户点确认按钮后，需要判断用户是否填写了信息。 新建一个...
第十五章：实战项目
weixin_42284219的博客
04-07 179
回顾： 第一章：Qt的概述 第二章：在Ubuntu编写第一个Qt程序 第三章：Qt的字符串和字符编码 第四章：Qt的信号和槽 第五章：Qt容器窗口（父窗口） 第六章：面向对象的Qt编程 第七章：Qt设计师使用（designer） 第八章：Qt创造器的使用（qtcreator） 第九章：资源和图像 第十章：目录与定时器 第十一章：鼠标和键盘事件 第十二章：Qt数据库(sqlite) 第十三章：QT多线程(QThread) 第十四章：Qt网络编程 实战项目 《HTTP客户端》 需求分析 实现从"http://
QT课程设计
12-25
QT课程设计是一个面向学生或开发者的学习项目，旨在利用QT这一强大的跨平台应用程序开发框架来创建一个电子数码相册。QT是Qt Company开发的一种C++库，广泛用于图形用户界面（GUI）应用程序，同时支持命令行界面和无...
第十章 图论模型.ppt
04-16
可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。【附加价值】：项目具有较高的学习借鉴价值，也可直接拿来修改复刻。对于有一定基础或热衷于研究的人来说，可以在这些基础代码上进行修改和扩展，实现...
基于QT的智能家居设计
05-20
标题“基于QT的智能家居设计”涉及的是使用QT框架来开发一套智能家居控制系统。QT是一个流行的开源C++图形用户界面工具包，常用于创建跨平台的应用程序。在这个项目中，QT被用作开发智能家居系统的主要编程环境，它...
【Qt 初识】QPushButton 的详解以及 Qt 中的坐标
Hou_lang_LJ的博客
07-12 928
🐧①Qt 中的信号槽机制；🐧② 按钮的方式实现HelloWorld；🖊
[Qt] Qt Creator中，新建QT文件时选择界面模版下的各选项
雨落子衿的博客
07-11 1038
在Qt Creator中，新建文件时选择界面模版下的各选项具有特定的意义，这些选项主要帮助开发者根据项目需求快速生成不同类型的文件。
qt 创建一个矩形，矩形的边线可以拖拽
最新发布
xie__jin__cheng的博客
07-15 167
qt 创建一个矩形，矩形的边线可以拖拽
QT creator简介
weixin_74923758的博客
07-14 893
轻量级跨平台集成开发环境，包含高级C++代码编辑器、集成的GUI外观和版式设计器、项目和生成管理工具、集成的上下文相关帮助系统以及图形化调试器等。强大的拖曳式图形化用户界面排版和设计工具。：多国语言翻译工具，用于Qt应用程序的多国语言翻译。：基于Qt的开源帮助文档阅读器，用于阅读由Qt Assistant应用程序生成的帮助文件。：用于编译ui文件的命令行工具，全称为UI Compiler。：全称为User Interface Compiler，将.ui文件编译为.h文件的命令行工具。
qt tabWidget 详解
xie__jin__cheng的博客
07-14 675
qt tabWidget 详解
python qt设计师
07-28
Python Qt设计师是一个用于创建图形用户界面（GUI）的工具。它基于Qt框架，提供了一种简单而强大的方式来设计和布局GUI界面。使用Python Qt设计师，您可以通过拖放和连接组件来创建GUI，然后使用Python代码来添加逻辑和功能。 您可以使用Python Qt设计师来创建各种应用程序，包括桌面应用程序、移动应用程序和嵌入式应用程序。它支持多种操作系统，包括Windows、Mac和Linux。 要开始使用Python Qt设计师，您可以安装Qt Creator，它是一个集成开发环境（IDE），提供了Python Qt设计师的功能。然后，您可以使用Qt Creator创建新的Qt项目，并使用设计师界面来设计和编辑GUI。 一旦您设计好GUI，您可以导出生成的代码，并将其与Python代码一起使用。您可以使用PyQt或PySide库来编写Python代码，并将其与设计师生成的代码集成在一起，以实现应用程序的功能。 总之，Python Qt设计师是一个强大的工具，可以帮助您轻松创建漂亮的GUI界面，并将其与Python代码集成在一起以实现应用程序的各种功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

yerennuo

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值