12-1_Qt 5.9 C++开发指南_自定义插件和库-自定义Widget组件(提升法(promotion)创建自定义定制化组件)

news2024/11/16 23:42:50

当UI设计器提供的界面组件不满足实际设计需求时，可以从 QWidget 继承自定义界面组件。

有两种方法使用自定义界面组件：

  • 一种是提升法(promotion)，例如在8.3 节将一个QGraphicsView组件提升为自定义的 QWGraphicsView 类，提升法用于界面可视化设计时不够直观，不能在界面上即刻显示自定义组件的效果;

  • 另一种是为 UI 设计器设计自定义界面组件的 Widget 插件，直接安装到 UI设计器的组件面板里，如同 Qt 自带的界面设计组件一样使用，在设计时就能看到组件的实际显示效果，只是编译和运行时需要使用到插件的动态链接库 (Windows 平台上)。

本章先介绍这两种自定义 Widget 组件的设计和使用方法，再介绍Qt编写和使用静态链接库和共享库(Windows 平台上就是动态链接库)的方法

文章目录

  • 1. 自定义 Widget 子类QmyBattery
  • 2. 自定义Widget组件的使用
  • 3. 软件结构及源代码
    • 3.1 软件结构
    • 3.2 可视化UI设计
    • 3.3 源码

1. 自定义 Widget 子类QmyBattery

Qt的 UI 设计器提供了很多 GUI 设计的界面组件，可以满足常见的界面设计需求。但是某些时候需要设计特殊的界面组件，而在 UI设计器的组件面板里根本没有合适的组件，这时就需要设计自定义的界面组件。

所有界面组件的基类是QWidget，要设计自定义的界面组件，可以从QWidget继承一个自定义的类，重定义其painEvent()事件，利用Qt的绘图功能会追组件外观，并实现所需的其他功能。

例如，假设需要设计一个如下图所示的电池电量显示组件，用于电池使用或充电时显示其电量，但是在 UI 设计器的组件面板里是没有这样一个现成的组件的。这就需要设计一个自定义的Widget 组件。

在这里插入图片描述

为此，设计一个从QWidget 继承的类QmyBattery。创建C++类，可以单击 Qt Creator 的“File”一“New File or Project”菜单项，在出现的对话框里选择 C++类组里的 C++ Class，在向导中设置类的名称，并选择基类为 QWidget。

定义QmyBattery类的qmybattery.h 文件的完整代码如下:

#ifndef WBATTERY_H
#define WBATTERY_H

#include    <QWidget>
#include    <QColor>

class QmyBattery : public QWidget
{
    Q_OBJECT
//自定义属性
    Q_PROPERTY(int  powerLevel READ powerLevel WRITE setPowerLevel NOTIFY powerLevelChanged)

private:
    QColor  mColorBack=Qt::white;//背景颜色
    QColor  mColorBorder=Qt::black;//电池边框颜色
    QColor  mColorPower=Qt::green;//电量柱颜色
    QColor  mColorWarning=Qt::red;//电量短缺时的颜色

    int mPowerLevel=60;//电量0-100
    int mWarnLevel=20;//电量低警示阈值

protected:
    void    paintEvent(QPaintEvent *event) Q_DECL_OVERRIDE;

public:
    explicit QmyBattery(QWidget *parent = 0);

    void    setPowerLevel(int pow);//设置当前电量
    int     powerLevel();

    void    setWarnLevel(int warn);//设置电量低阈值
    int     warnLevel();

    QSize   sizeHint();//报告缺省大小

signals:
    void   powerLevelChanged(int );

public slots:
};

#endif // WBATTERY_H

在 private 部分定义了几个私有变量，主要是各种颜色的定义、当前电量值 mPowerLevel 和电量低阈值mWarLevel。
protected 部分重定义了 paintEvent()事件，在第8章中介绍过，QWidget 类的 paintEvent()事件用于界面绘制，在此事件里，可以使用 QPainter 的各种绘图功能绘制自己需要的界面。

public 部分定义了用于读取和设置当前电量值、电量低阈值的函数，还定义了 sizeHint()函数用于返回组件缺省大小。

定义了一个信号 powerLevelChanged(int)，在当前电量值改变时发射该信号，使用QmyBattery类时可以设计槽函数对此信号做处理。
下面是 QmyBattery 类的实现代码，复杂一点的部分是 paintEvent()事件函数里绘制界面的功能实现，这里设置了窗口逻辑坐标，所以，当组件大小变化时，绘制的电池大小也会自动变化。QPainter 绘图的功能在第 8 章有详细介绍，这里不再详细解释。

#include "qmybattery.h"

#include    <QPainter>

void QmyBattery::paintEvent(QPaintEvent *event)
{  //界面组件的绘制
    Q_UNUSED(event);

    QPainter    painter(this);
    QRect rect(0,0,width(),height()); //viewport矩形区
    painter.setViewport(rect);//设置Viewport
    painter.setWindow(0,0,120,50); // 设置窗口大小，逻辑坐标
    painter.setRenderHint(QPainter::Antialiasing);
    painter.setRenderHint(QPainter::TextAntialiasing);

//绘制电池边框
    QPen    pen;//设置画笔
    pen.setWidth(2); //线宽
    pen.setColor(mColorBorder); //划线颜色
    pen.setStyle(Qt::SolidLine);//线的类型，实线、虚线等
    pen.setCapStyle(Qt::FlatCap);//线端点样式
    pen.setJoinStyle(Qt::BevelJoin);//线的连接点样式
    painter.setPen(pen);

    QBrush  brush;//设置画刷
    brush.setColor(mColorBack); //画刷颜色
    brush.setStyle(Qt::SolidPattern); //画刷填充样式
    painter.setBrush(brush);

    rect.setRect(1,1,109,48);
    painter.drawRect(rect);//绘制电池边框

    brush.setColor(mColorBorder); //画刷颜色
    painter.setBrush(brush);
    rect.setRect(110,15,10,20);
    painter.drawRect(rect); //画电池正极头

//画电池柱
    if (mPowerLevel>mWarnLevel)
    {  //正常颜色电量柱
        brush.setColor(mColorPower); //画刷颜色
        pen.setColor(mColorPower); //划线颜色
    }
    else
    { //电量低电量柱
        brush.setColor(mColorWarning); //画刷颜色
        pen.setColor(mColorWarning); //划线颜色
    }
    painter.setBrush(brush);
    painter.setPen(pen);

    if (mPowerLevel>0)
    {
        rect.setRect(5,5,mPowerLevel,40);
        painter.drawRect(rect);//画电池柱
    }

//绘制电量百分比文字
    QFontMetrics    textSize(this->font());
    QString powStr=QString::asprintf("%d%%",mPowerLevel);
    QRect textRect=textSize.boundingRect(powStr);//得到字符串的rect

    painter.setFont(this->font());
    pen.setColor(mColorBorder); //划线颜色
    painter.setPen(pen);

    painter.drawText(55-textRect.width()/2,
               23+textRect.height()/2,
               powStr);
}

QmyBattery::QmyBattery(QWidget *parent) : QWidget(parent)
{
//    setPalette(QPalette(mColorBack));
//    setAutoFillBackground(true);
//    this->resize(120,50);
}

void QmyBattery::setPowerLevel(int pow)
{ //设置当前电量值
    mPowerLevel=pow;
    emit powerLevelChanged(pow); //触发信号
    repaint();
}

int QmyBattery::powerLevel()
{ //读取当前电量值
    return mPowerLevel;
}

void QmyBattery::setWarnLevel(int warn)
{//设置电量低阈值
    mWarnLevel=warn;
    repaint();
}

int QmyBattery::warnLevel()
{//读取电量低阈值
    return  mWarnLevel;
}

QSize QmyBattery::sizeHint()
{//报告缺省大小,调整比例
    int H=this->height();
    int W=H*12/5;
    QSize   size(W,H);
    return size;
}

2. 自定义Widget组件的使用

实现了QmyBattery 类之后，若是用代码创建QmyBattery 类对象，其使用与一般的组件类是一样的;若是在 UI设计器中使用 QmyBattery，则需要采用提升法(promotion)。

实例 samp12 1是一个基于 QWidegt 的应用程序，使用 UI 设计器设计主窗体时，在窗体上放置一个QWidegt 类组件，然后鼠标右键调出其快捷菜单，单击“Promote to”菜单项，会出现如下图所示的对话框。

在这里插入图片描述

此对话框里，在基类名称下拉列表框里选择 QWidget，将提升后的类名称设置为 QmyBattery，头文件名称会自动生成。可以将设置添加到已提升类的列表里，以便重复使用。

设置后，单击“Promote”按钮，就可以将此QWidget 组件提升为 QmyBattery 类。提升后，在 Property Editor 里会看到这个组件的类名称变为了 QmyBattery。然后，将其 objectName 更改为 battery。

虽然界面上放置的 QWidget 组件被提升为了 QmyBattery 类，但是在这个组件的“Go to slot’对话框里并没有QmyBattery 类的 powerLevelChanged(int) 信号，无法采用可视化方法生成信号的槽函数。

在主窗口上放置一个 QSlider 组件和一个 QLabel 组件。滑动标尺改变数值时，设置为 battery的当前电量值，其 valueChanged()信号的槽函数代码如下:

void Widget::on_horizontalSlider_valueChanged(int value)
{
   ui->battery->setPowerLevel(value);
   QString  str=QStringLiteral("当前电量：")+QString::asprintf("%d %%",value);
   ui->LabInfo->setText(str);
}

battery 的各种参数采用其缺省的设置，battery 的当前电量值改变时，内部会调用 paintEvent()事件代码重新绘制电池显示效果。

3. 软件结构及源代码

3.1 软件结构

在这里插入图片描述

3.2 可视化UI设计

在这里插入图片描述

3.3 源码

（1）qmybattery.h

#ifndef WBATTERY_H
#define WBATTERY_H

#include    <QWidget>
#include    <QColor>

class QmyBattery : public QWidget
{
    Q_OBJECT
//自定义属性
    Q_PROPERTY(int  powerLevel READ powerLevel WRITE setPowerLevel NOTIFY powerLevelChanged)

private:
    QColor  mColorBack=Qt::white;//背景颜色
    QColor  mColorBorder=Qt::black;//电池边框颜色
    QColor  mColorPower=Qt::green;//电量柱颜色
    QColor  mColorWarning=Qt::red;//电量短缺时的颜色

    int mPowerLevel=60;//电量0-100
    int mWarnLevel=20;//电量低警示阈值

protected:
    void    paintEvent(QPaintEvent *event) Q_DECL_OVERRIDE;

public:
    explicit QmyBattery(QWidget *parent = 0);

    void    setPowerLevel(int pow);//设置当前电量
    int     powerLevel();

    void    setWarnLevel(int warn);//设置电量低阈值
    int     warnLevel();

    QSize   sizeHint();//报告缺省大小

signals:
    void   powerLevelChanged(int );

public slots:
};

#endif // WBATTERY_H

（2）qmybattery.cpp

#include "qmybattery.h"

#include    <QPainter>

void QmyBattery::paintEvent(QPaintEvent *event)
{  //界面组件的绘制
    Q_UNUSED(event);

    QPainter    painter(this);
    QRect rect(0,0,width(),height()); //viewport矩形区
    painter.setViewport(rect);//设置Viewport
    painter.setWindow(0,0,120,50); // 设置窗口大小，逻辑坐标
    painter.setRenderHint(QPainter::Antialiasing);
    painter.setRenderHint(QPainter::TextAntialiasing);

//绘制电池边框
    QPen    pen;//设置画笔
    pen.setWidth(2); //线宽
    pen.setColor(mColorBorder); //划线颜色
    pen.setStyle(Qt::SolidLine);//线的类型，实线、虚线等
    pen.setCapStyle(Qt::FlatCap);//线端点样式
    pen.setJoinStyle(Qt::BevelJoin);//线的连接点样式
    painter.setPen(pen);

    QBrush  brush;//设置画刷
    brush.setColor(mColorBack); //画刷颜色
    brush.setStyle(Qt::SolidPattern); //画刷填充样式
    painter.setBrush(brush);

    rect.setRect(1,1,109,48);
    painter.drawRect(rect);//绘制电池边框

    brush.setColor(mColorBorder); //画刷颜色
    painter.setBrush(brush);
    rect.setRect(110,15,10,20);
    painter.drawRect(rect); //画电池正极头

//画电池柱
    if (mPowerLevel>mWarnLevel)
    {  //正常颜色电量柱
        brush.setColor(mColorPower); //画刷颜色
        pen.setColor(mColorPower); //划线颜色
    }
    else
    { //电量低电量柱
        brush.setColor(mColorWarning); //画刷颜色
        pen.setColor(mColorWarning); //划线颜色
    }
    painter.setBrush(brush);
    painter.setPen(pen);

    if (mPowerLevel>0)
    {
        rect.setRect(5,5,mPowerLevel,40);
        painter.drawRect(rect);//画电池柱
    }

//绘制电量百分比文字
    QFontMetrics    textSize(this->font());
    QString powStr=QString::asprintf("%d%%",mPowerLevel);
    QRect textRect=textSize.boundingRect(powStr);//得到字符串的rect

    painter.setFont(this->font());
    pen.setColor(mColorBorder); //划线颜色
    painter.setPen(pen);

    painter.drawText(55-textRect.width()/2,
               23+textRect.height()/2,
               powStr);
}

QmyBattery::QmyBattery(QWidget *parent) : QWidget(parent)
{
//    setPalette(QPalette(mColorBack));
//    setAutoFillBackground(true);
//    this->resize(120,50);
}

void QmyBattery::setPowerLevel(int pow)
{ //设置当前电量值
    mPowerLevel=pow;
    emit powerLevelChanged(pow); //触发信号
    repaint();
}

int QmyBattery::powerLevel()
{ //读取当前电量值
    return mPowerLevel;
}

void QmyBattery::setWarnLevel(int warn)
{//设置电量低阈值
    mWarnLevel=warn;
    repaint();
}

int QmyBattery::warnLevel()
{//读取电量低阈值
    return  mWarnLevel;
}

QSize QmyBattery::sizeHint()
{//报告缺省大小,调整比例
    int H=this->height();
    int W=H*12/5;
    QSize   size(W,H);
    return size;
}

(3) widget.cpp

#include "widget.h"
#include "ui_widget.h"

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

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

void Widget::on_horizontalSlider_valueChanged(int value)
{
   ui->battery->setPowerLevel(value);
   QString  str=QStringLiteral("当前电量：")+QString::asprintf("%d %%",value);
   ui->LabInfo->setText(str);
}

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

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

相关文章

python将UTC +8 时间 转换为 UTC 时间

python将UTC +8 时间 转换为 UTC 时间

因为在工作的时候&#xff0c;有时候经常使用 UTC 时间&#xff0c;因为北京时间是 UTC 8&#xff0c;有时候要自己换算一下&#xff0c;或者 时间戳转换的时候有问题&#xff0c;所以就写了这个。 import time from datetime import datetime import pytz# 输入时间字符串 # …
阅读更多...
LLM当前状态和潜在影响；谷歌Brain2Music读取大脑活动生成音乐

LLM当前状态和潜在影响；谷歌Brain2Music读取大脑活动生成音乐

&#x1f989; AI新闻 &#x1f680; 谷歌Brain2Music利用AI读取大脑活动生成音乐 摘要&#xff1a;谷歌发布了名为Brain2Music的论文&#xff0c;通过人工智能和脑部成像技术生成个性化音乐。他们招募了5名志愿者&#xff0c;记录他们在听不同音乐类型时的大脑活动数据。通过…
阅读更多...
刷完阿里 P8 面试官推荐的 Java 高并发核心编程文档后终拿蚂蚁 offer

刷完阿里 P8 面试官推荐的 Java 高并发核心编程文档后终拿蚂蚁 offer

前言 学完阿里 P8 面试官推荐的 Java 高并发核心编程文档后终于拿到了蚂蚁 p6 的 offer&#xff0c;这份文档包含的内容有点多。 主要包含的内容&#xff1a;Java NIO、Reactor 模式、高性能通信框架 Netty、分布式锁、分布式 ID、分布式缓存、高并发架构、多线程、线程池、内…
阅读更多...
C语言IO篇(一) 输出百分号

C语言IO篇(一) 输出百分号

1.百分号输出问题是什么&#xff1f; C语言中无法直接打印单个的%。 2.怎么解决百分号输出问题&#xff1f; 在C语言中&#xff0c;如何输出百分号呢&#xff1f; 1.在printf中用2个连续 %% 输出百分号。 2.将内容写入到字符串后打印 3.为什么出现百分号输出问题&#xff1f; …
阅读更多...
install wxwidgets and wxPython on Linux

install wxwidgets and wxPython on Linux

安装wxwidgets https://wiki.wxwidgets.org/Compiling_and_getting_startedhttps://wiki.wxwidgets.org/Compiling_and_getting_started 安装wxPython pip install wxPython 安装wxformbuilderhttps://github.com/wxFormBuilder/wxFormBuilder/releaseshttps://github.com/wx…
阅读更多...
通达信赫尔均线 (HMA) 指标公式设置及原理详解

通达信赫尔均线 (HMA) 指标公式设置及原理详解

我们知道传统的均线存在短周期均线&#xff08;如5日均线&#xff09;灵敏但不够平滑&#xff0c;大周期均线&#xff08;如120日均线&#xff09;平滑但反应滞后、无法及时反映当前行情变化的缺点。&#xff08;如下图&#xff09;赫尔均线 (HMA) 正是为了解决这样的问题&…
阅读更多...
AtcoderABC229场

AtcoderABC229场

A - First GridA - First Grid 题目大意 要求判断是否可以从每个黑色方块到达其他所有黑色方块&#xff0c;只能经过黑色方块&#xff0c;并且黑色方块之间必须相连&#xff08;共享一条边&#xff09;。 思路分析 据题意&#xff0c;不能的只有以下两种情况 .# #. #. .#…
阅读更多...
交互式AI技术与模型部署：bert-base-chinese模型交互式问答界面设置

交互式AI技术与模型部署：bert-base-chinese模型交互式问答界面设置

使用Gradio实现Question Answering交互式问答界面&#xff0c;首先你需要有一个已经训练好的Question Answering模型&#xff0c;这里你提到要使用bert-base-chinese模型。 Gradio支持PyTorch和TensorFlow模型&#xff0c;所以你需要将bert-base-chinese模型转换成PyTorch或Te…
阅读更多...
双击start.bat文件闪退，运行报错“unable to access jarfile”

双击start.bat文件闪退，运行报错“unable to access jarfile”

问题&#xff1a;电脑运行“start.bat”文件&#xff0c;无反应&#xff0c;闪退&#xff0c;管理员身份运行报错“unable to access jarfile” 解决思路&#xff1a; 1、由于该项目运行需要jdk环境&#xff0c;检查jdk版本需要是1.8.0_251版本 通过在 cmd 命令行输入java -v…
阅读更多...
unittest 数据驱动DDT应用

unittest 数据驱动DDT应用

前言 一般进行接口测试时&#xff0c;每个接口的传参都不止一种情况&#xff0c;一般会考虑正向、逆向等多种组合。所以在测试一个接口时通常会编写多条case&#xff0c;而这些case除了传参不同外&#xff0c;其实并没什么区别。 这个时候就可以利用ddt来管理测试数据&#xf…
阅读更多...
智慧城市环境污染数据采集远程监控方案4G工业路由器应用

智慧城市环境污染数据采集远程监控方案4G工业路由器应用

随着科技水平的发展和人民生活水平的提高&#xff0c;城市环境污染问题日渐严峻&#xff0c;尤其是在发展迅速的国家&#xff0c;环境污染问题便更为突出。许多发达国家将重污染工厂搬到发展中国家&#xff0c;这导致发展中国家的环境污染日益严重。严重的环境污染也带来了一系…
阅读更多...
青海师范大学迎来首个虚拟IP“卓玛”，这是要怎么赋能数字教育？

青海师范大学迎来首个虚拟IP“卓玛”，这是要怎么赋能数字教育？

虚拟数字人作为虚拟世界和现实世界之间的链接 是人们最先了解元宇宙概念的一个表达形式 相较于传统的高校吉祥物IP 在数字教育时代 爆火的虚拟数字人 会给高校带来怎样的新体验、新机遇 虚拟IP对高校的必要性 新潮化、高互动化赋能数字教育 1. 以可视化虚拟IP&#xff0c…
阅读更多...
vue计时器

vue计时器

//将秒转化为时分秒 const resultTime ref();const formateSeconds function (endTime) {let secondTime parseInt(endTime); //将传入的秒的值转化为Numberlet min 0; // 初始化分let h 0; // 初始化小时// let result "";if (secondTime > 60) {//如果秒数…
阅读更多...
Qtday4作业

Qtday4作业

思维导图 2.手动完成服务器的实现 头文件 #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include<QTcpServer> // 服务器类 #include<QTcpSocket> // 客户端类 #include<QDebug> // 信息调试类 #include<QMessageBox> …
阅读更多...
Chapter 8: Files | Python for Everybody 讲义笔记_En

Chapter 8: Files | Python for Everybody 讲义笔记_En

文章目录 Python for Everybody课程简介FilesPersistenceOpening filesText files and linesReading filesSearching through a fileLetting the user choose the file nameUsing try, except, and openWriting filesDebuggingGlossary Python for Everybody Exploring Data Us…
阅读更多...
利用vscode--sftp，将本地项目/文件上传到远程服务器中详细教程

利用vscode--sftp，将本地项目/文件上传到远程服务器中详细教程

1、首先在 vscode 中下载 sftp&#xff1a; 2、然后在 vscode 中打开本地将要上传的项目或文件&#xff1a; 3、安装完后&#xff0c;使用快捷键 ctrlshiftP 打开指令窗口&#xff0c;输入 sftp:config &#xff0c;回车&#xff0c;在当前目录中会自动生成 .vscode 文件夹及 s…
阅读更多...
如何拥有一个自己的小程序商城？

如何拥有一个自己的小程序商城？

在今天的移动互联网时代&#xff0c;拥有一个自己的小程序商城已经成为了很多企业和个人的追求。它不仅可以帮助企业提升品牌形象和销售额&#xff0c;还能够提供更好的用户体验和更高的用户粘性。那么&#xff0c;如何拥有自己的小程序商城呢&#xff1f; 第一步&#xff1a;选…
阅读更多...
三. 多传感器标定方案（空间同步）--1

三. 多传感器标定方案（空间同步）--1

前面的内容&#xff1a; 一. 器件选型心得&#xff08;系统设计&#xff09;--1_goldqiu的博客-CSDN博客 一. 器件选型心得&#xff08;系统设计&#xff09;--2_goldqiu的博客-CSDN博客二. 多传感器时间同步方案&#xff08;时序闭环&#xff09;--1 三. 多传感器标定方案&…
阅读更多...
Bugs记录

Bugs记录

一、/usr/bin/ld: cannot find -l**** 参考&#xff1a;https://www.cnblogs.com/sakuraie/p/13341508.html 在ubuntu上安装软件时&#xff0c;经常出现这样的问题&#xff1a; /usr/bin/ld: cannot find -l**** 例如&#xff1a; /usr/bin/ld: cannot find -lcaffe 安装 需…
阅读更多...
netfilter调试记录

netfilter调试记录

今天调试netfilter&#xff0c; 钩子是ip层的post routing出下的钩子 勾出的报文没有二层报文&#xff0c;刚开始搞不清原因&#xff0c;后来才搞明白&#xff0c;原来就是没有二层&#xff0c;只有在桥上勾到的才是有二层报文&#xff0c; skb里有个字段protocol可以表示这个…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023