devbox
小桥流水78
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

深入了解Qt 控件：Display Widgets部件(1) 以及 QT自定义控件(电池）

作者：小桥流水78 | 2024-07-05 08:49:53

赞

踩

深入了解Qt 控件：Display Widgets部件(1) 以及 QT自定义控件(电池）

QT自定义控件(电池）

在线调色板

https://www.sojson.com/web/panel.html

https://www.67tool.com/images/colorConvert

Qt之CSS专栏

https://blog.csdn.net/chenyijun/category_8772486.html

Chapter1 QT自定义控件(电池）

原文链接：https://blog.csdn.net/weixin_43676892/article/details/109451136

做一个电池控件，需要一个拖动条和一个进度条。
不多说，直接上代码
.h文件

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>
#include <QProgressBar>
#include <QSlider>

class Widget : public QWidget
{
    Q_OBJECT

public:
    Widget(QWidget *parent = 0);
    ~Widget();

protected slots:
    void on_SliderValueChange();

private:
    QSlider *m_pSlider=nullptr;
    QProgressBar *m_batteryBar=nullptr;
};

#endif // WIDGET_H


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25

.cpp文件

#include "widget.h"
#include <QVBoxLayout>
#include <QLabel>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
{
    QWidget *batterytopwgt=new QWidget(this);
    QLabel *topLabel=new QLabel(this);
    topLabel->setStyleSheet("background:black");
    QVBoxLayout *topLayout=new QVBoxLayout(this);
    topLayout->addStretch();
    topLayout->addWidget(topLabel);
    topLayout->addStretch();
    topLayout->setMargin(0);
    batterytopwgt->setLayout(topLayout);


    QVBoxLayout *mainLayout=new QVBoxLayout(this);
    m_pSlider=new QSlider(Qt::Horizontal,this);   //将拖动条设置为横向
    m_pSlider->setRange(0,100);   //设置拖动条范围
    m_batteryBar=new QProgressBar(this);
    m_batteryBar->setRange(0,100);
    m_batteryBar->setFixedHeight(50);
    m_batteryBar->setFixedWidth(100);
    m_batteryBar->setStyleSheet("QProgressBar{border-radius:5px;border:2px solid grey;text-align:center}QProgressBar::chunk{border-radius:5px;background:green}");  //设置样式
    mainLayout->addWidget(m_batteryBar);
    mainLayout->addWidget(m_pSlider);
    mainLayout->setMargin(0);
    mainLayout->addStretch();
    this->setLayout(mainLayout);

    connect(m_pSlider,&QSlider::valueChanged,this,&Widget::on_SliderValueChange);   //拖动条每次值改变都会执行
}

Widget::~Widget()
{

}

void Widget::on_SliderValueChange()
{
    int sliderValue=m_pSlider->value();
    m_batteryBar->setValue(sliderValue);

    if(m_batteryBar->value()<=20)  //如果值小于20，则颜色为红色
    {
        m_batteryBar->setStyleSheet("QProgressBar{border-radius:5px;border:2px solid grey;text-align:center}QProgressBar::chunk{border-radius:5px;background:red}");
    }
    else  //大于20则值为绿色
    {
         m_batteryBar->setStyleSheet("QProgressBar{border-radius:5px;border:2px solid grey;text-align:center}QProgressBar::chunk{border-radius:5px;background:green}");
    }
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54

main.cpp文件

#include "widget.h"
#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    Widget w;
    w.show();

    return a.exec();
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

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

这个我做的很简单，不过原理基本上是这样的。电池的样式可以根据自己喜好进行绘制。

样式表使用：

//如果值小于20，则颜色为红色
m_batteryBar->setStyleSheet("QProgressBar{border-radius:5px;border:2px solid grey;text-align:center}QProgressBar::chunk{border-radius:5px;background:red}");

  • 1
  • 2
//如果值大于20则值为绿色
m_batteryBar->setStyleSheet("QProgressBar{border-radius:5px;border:2px solid grey;text-align:center}QProgressBar::chunk{border-radius:5px;background:green}");

  • 1
  • 2

Chapter2 Qt教程 — 3.5 深入了解Qt 控件：Display Widgets部件(1)

原文链接：https://blog.csdn.net/qq_41921826/article/details/136871217

1 Display Widgets简介

Qt Designer 显示窗口部件提供的面板中，提供了 10 种显示小部件。以下是Display Widgets 的介绍：

Label（标签）：QLabel 是用于显示文本或图片的简单控件。标签可以显示多行纯文本或富文本，还可以设置为响应用户的操作。

Text Browser（文本浏览器）：QTextBrowser 是用于显示富文本文档的控件。这个部件可以显示来自本地文件或网络的HTML文档，并且可以解析HTML链接。

Graphics View（图形视图）：QGraphicsView 是一个用于图形项（如线条、形状、图像等）交互的控件。它是基于场景（QGraphicsScene）和视图（QGraphicsView）框架的一部分，用于管理和显示复杂的图形界面。

Calendar Widget（日历）：QCalendarWidget 继承 QWidget。QCalendarWidget 提供了一个月历视图，允许用户选择日期。这个控件显示一个一月的日历，用户可以浏览月份和年份。

LCD Number（液晶数字）：QLCDNumber 继承 QFrame。QLCDNumber 控件显示一个带有液晶显示风格的数字。它常用于模拟液晶显示的计时器、计数器等。

Progress Bar（进度条）：QProgressBar 继承 QWidget。QProgressBar 控件提供了一个水平或垂直的进度条。进度条可以用来显示任务的当前进度。

Horizontal Line（水平线）/ Vertical Line（垂直线）：这些控件（QFrame）用于在用户界面中添加水平或垂直的分割线，通常用来分隔界面元素或区域。

OpenGL Widget（开放式图形库工具）：QOpenGLWidget 提供了一个绘制 OpenGL 图形的控件。它可以用于集成 OpenGL 渲染管线到 Qt 应用程序中。

QQuick Widget（嵌入式 QML 工具）：QQuickWidget 允许将基于 QML 的用户界面组件集成到 QWidget-based 应用程序中。这使得在传统的 Qt Widgets 应用中嵌入使用 QML 开发的现代、动态的用户界面成为可能。

2 如何使用Display Widgets部件

Chapter3 Qt自定义控件电池组件使用

原文链接：https://blog.csdn.net/m0_62599305/article/details/137993953

本文介绍了如何在Qt应用中使用Battery类创建自定义电池显示控件，包括基本用法、功能API（如设置电量、状态、颜色等）以及如何在QtDesigner中配置。通过示例代码展示了具体实现。

前言

Battery 类是一个自定义 Qt 控件，用于显示电池状态的图形化界面。通过 Battery 类，您可以轻松地在 Qt 应用程序中创建具有自定义外观的电池显示。下面我们将介绍如何使用 Battery 类以及其各种功能。

一、最基本的使用方法

首先，您需要在您的 Qt 项目中包含 Battery 类的头文件：

#include "Battery.h"

  • 1

然后，您可以像使用任何其他 Qt 控件一样将 Battery 控件添加到您的 UI 中。例如，在您的 QMainWindow 或其他 QWidget 中添加一个 Battery 控件：

Battery *battery = new Battery(this);
battery->setGeometry(100, 100, 50, 20); // 设置电池控件的位置和大小
battery->setLevel(50); // 设置电量百分比为 50%
battery->setStatus(Battery::Discharging); // 设置电池状态为放电状态

  • 1
  • 2
  • 3
  • 4

这样，您就创建了一个基本的 Battery 控件，并设置了它的大小、位置、电量百分比和状态。

二、Battery 类的功能和 API

Battery 类提供了以下功能和 API：

设置和获取电量百分比：

  • void setLevel(int level)：设置电池的电量百分比。

  • int level() const：获取电池的电量百分比。
    设置和获取电池状态：

  • void setStatus(BatteryStatus status)：设置电池的状态，可以是放电、充电或充满状态。
    参数有下面的取值：
    在这里插入图片描述

  • BatteryStatus status() const：获取电池的当前状态。

设置和获取电池边框颜色：

  • void setBorderColor(const QColor &color)：设置电池边框的颜色。

  • QColor borderColor() const：获取电池边框的颜色。

设置和获取电池内部填充颜色：

  • void setPaddingColor(const QColor &color)：设置电池内部填充的颜色。

  • QColor paddingColor() const：获取电池内部填充的颜色。

设置和获取充电指示器颜色：

  • void setChargeColor(const QColor &color)：设置充电指示器的颜色。

  • QColor chargeColor() const：获取充电指示器的颜色。

设置和获取低电量警告颜色：

  • void setLowBatteryColor(const QColor &color)：设置低电量警告的颜色。

  • QColor lowBatteryColor() const：获取低电量警告的颜色。

设置和获取绘制偏移量：

  • void setOffset(const QPoint &offset)：设置绘制偏移量，用于调整电量指示器的位置。

  • QPoint offset() const：获取绘制偏移量。

设置和获取电池外形是否为圆角：

  • void setRound(bool round)：设置电池外形是否为圆角。

  • bool isRound() const：获取电池外形是否为圆角。

设置和获取圆角占电池高度的百分比：

  • void setRoundPresent(int roundPresent)：设置圆角占电池高度的百分比，用于控制圆角的大小。

  • int roundPresent() const：获取圆角占电池高度的百分比。

三、Qt Desiner使用电池组件

在desiner选择电池组件：
在这里插入图片描述

在这里可以设置我们的一些属性，实现我们上面函数的功能
在这里插入图片描述

四、示例代码

下面是一个示例代码，演示了如何创建一个 Battery 控件并设置其各种属性：

#include <QApplication>
#include "Battery.h"

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    // 创建主窗口
    QWidget mainWindow;
    mainWindow.setGeometry(100, 100, 300, 200);

    // 创建一个 Battery 控件
    Battery *battery = new Battery(&mainWindow);
    battery->setGeometry(50, 50, 100, 40);
    battery->setLevel(75); // 设置电量百分比为 75%
    battery->setStatus(Battery::Charging); // 设置电池状态为充电状态

    mainWindow.show();

    return a.exec();
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

通过以上步骤，您可以轻松地在您的 Qt 应用程序中使用 Battery 类，并根据需要自定义电池的外观和行为。

Chapter4 Qt教程 — 3.6 深入了解Qt 控件：Display Widgets部件(2)

原文链接：https://blog.csdn.net/qq_41921826/article/details/136919332

Chapter5 QT开发实例之常用控件（上）

原文链接：https://blog.csdn.net/m0_53421868/article/details/127991232

设置窗口属性

为防止通过setWindowTitle 设置的窗口标题出现中文乱码的问题，需要将设置的参数进行一个转换，可以通过fromLocal8Bit 函数转换后就不会出现中文乱码的问题了。

learn::learn(QWidget *parent)
    : QMainWindow(parent)
    , bnt(nullptr)
{
    ui.setupUi(this);

    QString iconpath = "../Resource Files/WIN_20221114_17_56_03_Pro.jpg";
    //设置窗口标题
    setWindowTitle(QString::fromLocal8Bit("QT5.1窗口"));
    //设置窗口固定大小
    setMinimumSize(300, 300);
    setMaximumSize(300, 300);
    //设置窗口的背景颜色为红色
    this->setStyleSheet("background:red");
    //修改窗口的图标
    this->setWindowIcon(QIcon(iconpath));
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

字体形状窗体

将窗体背景色透明，根据图片形状显示窗体
在这里插入图片描述

void learn::SetLucency()
{
	//去掉标题栏
    this->setWindowFlags(Qt::FramelessWindowHint);
    //设置透明
    this->setAttribute(Qt::WA_TranslucentBackground, true);
    /*
		qss语句解释：
		background-image ：背景图片
		url(xxx)   填写文件路径
		background-repeat:no-repeat;  不平铺
	*/
    this->setStyleSheet("background-image:url(C:/Users/26961/Desktop/1.png); background-repeat:no-repeat;");
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

Chapter6 用一个 QProgressBar 模拟手机电池充电

原文链接：https://blog.csdn.net/lengyuefeng212/article/details/119804536

1. 控件简介

QProgressBar 继承 QWidget。QProgressBar 小部件提供了一个水平或垂直的进度条。进度条用于向用户显示操作的进度，并向他们确认应用程序仍在运行。

2. 用法示例

例 25_qprogressbar，手机电池充电。用一个 QProgressBar 模拟手机电池充电。

在新建例程中不要勾选“Generate form”，默认继承 QMainWindow 类即可。项目新建完成如下图。
在这里插入图片描述

本例已经添加一张电池的背景图资源图片。添加完成如下图。
在这里插入图片描述

在头文件“mainwindow.h”具体代码如下。

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include <QProgressBar>
#include <QTimer>

class MainWindow : public QMainWindow
{
Q_OBJECT

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

private:
/* 声明对象 */
QProgressBar *progressBar;
QTimer *timer;

/* 用于设置当前 QProgressBar 的值 */
int value;

private slots:
/* 槽函数 */
void timerTimeOut();

};
#endif // MAINWINDOW_H

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29

在源文件“mainwindow.cpp”具体代码如下。

#include "mainwindow.h"

MainWindow::MainWindow(QWidget *parent)
: QMainWindow(parent)
{
/* 设置主窗体位置与大小 */
this->setGeometry(0, 0, 800, 480);

progressBar = new QProgressBar(this);
progressBar->setGeometry(300, 200, 200, 60);

/*样式表设置，常用使用 setStyleSheet 来设置样式（实现界面美化的功能），
 * 具体可参考 styleSheet */
progressBar->setStyleSheet (
"QProgressBar{border:8px solid #FFFFFF;"
"height:30;"
"border-image:url(:/images/battery.png);" //背景图片
"text-align:center;" // 文字居中
"color:rgb(255,0,255);"
"font:20px;" // 字体大小为 20px
"border-radius:10px;}"
"QProgressBar::chunk{"
"border-radius:5px;" // 斑马线圆角
"border:1px solid black;" // 黑边，默认无边
"background-color:skyblue;"
"width:10px;margin:1px;}" // 宽度和间距
);

/* 设置 progressBar 的范围值 */
progressBar->setRange(0, 100);
/* 初始化 value 为 0 */
value = 0;
/* 给 progressBar 设置当前值 */
progressBar->setValue(value);
/* 设置当前文本字符串的显示格式 */
progressBar->setFormat("充电中%p%");

/* 定时器实例化设置每 100ms 发送一个 timeout 信号 */
timer = new QTimer(this);
timer->start(100);

/* 信号槽连接 */
connect(timer, SIGNAL(timeout()),this, SLOT(timerTimeOut()));
}

MainWindow::~MainWindow()
{
}

void MainWindow::timerTimeOut()
{
/* 定显示器时间到，value 值自加一 */
value ++;
progressBar->setValue(value);
/* 若 value 值大于 100，令 value 再回到 0 */
if(value>100)
value = 0;
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58

在源文件“main.cpp”具体代码新建项目时生成，无改动。

3. 运行效果

程序编译运行的结果如下。程序运行后，可以看到在定时器的作用下，电池一直在充电，充到 100%，又重新回到 0%重新充电。QProgressBar 一般用于表示进度，常用于如复制进度，打开、加载进度等。
在这里插入图片描述

Chapter7 Qt 常见的 QProgressBar 样式

原文链接：https://blog.csdn.net/hellokandy/article/details/136328312

在很多场景中都会用到进度条，比如：文件拷贝过程，软件更新等。QProgressBar 的样式可以通过自绘或者qss方式实现，本文对常用的进度条样式进行了整理：

实际效果图
在这里插入图片描述

实现代码

void MainDialog::InitUI()
{
    //
    ui->progressbar_1->setStyleSheet("QProgressBar{text-align: center;"
                                     "background-color: #e2e3e4;"
                                     "border: 1px solid #999999;"
                                     "border-radius: 5px;}"
                                     "QProgressBar::chunk{background-color: #995fff;"
                                     "border-radius: 5px;}");

    //
    ui->progressbar_2->setStyleSheet("QProgressBar{text-align: center;"
                                     "background-color: #e2e3e4;"
                                     "border: 0px solid #e2e3e4;"
                                     "border-radius: 5px;}"
                                     "QProgressBar::chunk{background-color: #995fff; "
                                     "border-radius: 5px;}");

    //
    ui->progressbar_3->setStyleSheet("QProgressBar{text-align: center;"
                                     "background-color: #e2e3e4;"
                                     "border: 0px solid #e2e3e4;"
                                     "border-radius: 3px;}"
                                     "QProgressBar::chunk{background-color:#995fff;"
                                     "border-radius: 3px; "
                                     "width: 10px;"
                                     "margin: 0.5px;}");

    //
    ui->progressbar_4->setStyleSheet("QProgressBar{height:24px; "
                                     "text-align: center; "
                                     "font-size: 14px; "
                                     "color: white; "
                                     "border-radius: 5px; "
                                     "background: #e2e3e4;}"
                                     "QProgressBar::chunk{border-radius: 5px;"
                                     "background: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:0,"
                                     "stop:0 #995fff,"
                                     "stop:1 #6900ff);}");

    //
    ui->progressbar_5->setStyleSheet("QProgressBar{height:24px; "
                                     "text-align: center; "
                                     "font-size: 14px; "
                                     "color: white; "
                                     "border-radius: 0px; "
                                     "background: #e2e3e4;}"
                                     "QProgressBar::chunk{border-radius: 0px;"
                                     "background: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:0,"
                                     "stop:0 #995fff,"
                                     "stop:1 #6900ff);}");

}

void MainDialog::InitData()
{
    //设置进度值
    ui->progressbar_1->setValue(40);
    ui->progressbar_2->setValue(50);
    ui->progressbar_3->setValue(60);
    ui->progressbar_4->setValue(70);
    //如果最小值和最大值都设置为0，进度条会显示一个繁忙指示，而不会显示当前的值。
    ui->progressbar_5->setMaximum(0);
    ui->progressbar_5->setMinimum(0);
    //隐藏百分百文字
    ui->progressbar_4->setTextVisible(false);
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号