当前位置： 首页 > article >正文

Qt_显示类控件

article 2024/11/14 21:07:54

目录

一、QLabel

1、QLabel属性介绍

2、textFormat文本格式

3、pixmap标签图片

3.1 resizeEvent 

4、QFrame边框

5、alignment文本对齐

6、wordWrap自动换行

7、indent设置缩进

8、margin设置边距 

9、buddy设置伙伴

二、QLCDNumber

1、QLCDNumber属性介绍

2、实现QLCDNumber倒计时功能

三、QProgressbar

1、QProgressbar属性介绍

2、实现自动增长的进度条

3、设置进度条的颜色 

四、QCalendarWidget

1、QCalendarWidget属性介绍 

2、代码测试

结语 

前言：

        在Qt中，显示类控件通常是给用户传递一些文本信息或图片信息，以达到和用户交互的目的。虽然显示类控件的作用看起来如此简单，但是其拥有各式各样的属性，并且细节很多，所以在进行设计显示类控件时需要特别注意。

一、QLabel

1、QLabel属性介绍

         QLabel是显示类控件中最为经典的控件，他表示标签的意思，一般情况下不可被鼠标或者键盘选中，单纯的向用户展示某些信息，属性介绍如下：

text

表示QLabel中的文本内容

textFormat

表示QLabel中的文本格式，有以下四种：

• Qt::PlainText 纯文本

• Qt::RichText 富文本(⽀持 html 标签)

• Qt::MarkdownText markdown 格式

• Qt::AutoText 根据文本内容自动决定文本格式

pixmap

表示QLabel中的图片内容

scaledContents

设置为true，会自动根据窗口比例拉伸QLabel的内容，设置为false则不会
alignment
设置⽔平和垂直方向的对齐
wordWrap
设置为true，则内部的⽂本会⾃动换行，设置为false则不会
indent
设置⽂本缩进，文本内容的开头和左边框的距离
margin
设置⽂本和边框之间的边距（包括上下左右四个边框）
openExternalLinks
是否允许打开⼀个外部的链接
buddy
给QLabel关联⼀个 "伙伴" ，触发QLabel时就能激活对应的伙伴

        也可以在ui文件中的右下角里的属性栏中看到QLabel的相关属性：

2、textFormat文本格式

         使用函数setTextFormat就可以对QLabel控件中的文本进行格式设置，设置完成后，该控件的文本就支持对应格式的插件，具体实现如下。

        ①选创建三个QLabel控件，然后对这三个控件赋予不同的textFormat，分别是PlainText 、RichText 、MarkdownTex，观察使用文本插件的效果：

        ②更改widget.cpp中的代码，观察运行结果：

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

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

    ui->label->setTextFormat(Qt::PlainText);
    ui->label->setText("<b> 这是纯文本 </b>");//纯文本不支持html的标签

    ui->label_2->setTextFormat(Qt::RichText);
    ui->label_2->setText("<b> 这是富文本 </b>");//<b>和</b>是富文本（即html的标签）

    ui->label_3->setTextFormat(Qt::MarkdownText);
    ui->label_3->setText("# 这是markdown文本");//#是MarkdownText独有的规则
}

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

         运行结果：

         从结果可以看到，不同的格式有着不同的规则，所打印出来的文本格式也就不一样，这就是textFormat的作用。

3、pixmap标签图片

         pixmap表示标签内的图片内容，可以通过setPixmap函数将图片设置到对应的标签里，所以得有一个图片资源，并且可以在代码中找到该图片资源的路径，通常会将该图片放到qrc文件下（qrc相关概念见QWidget属性介绍）。

        现在将该图片覆盖至整个窗口界面，首先先设置一个label作为载体，将label覆盖整个窗口界面，然后把图片覆盖整个label，以达到将图片覆盖整个窗口界面的效果。修改widget.cpp文件的代码如下：

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

#include <QLabel>

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

    QRect windows = this->geometry();//拿到窗口的尺寸
    QLabel* ql = new QLabel(this);
    ql->setGeometry(windows);
    QPixmap p(":/shoe.png");
    ql->setPixmap(p);//将图片设置进label中
    //此时图片的大小是固定的，为了让图片填满整个label，要对图片进行拉伸
    ql->setScaledContents(true);
}

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

        运行结果：

3.1 resizeEvent 

        题外话：此时图片虽然覆盖了整个窗口界面，但是当我们放大或缩小这个窗口时，里面的图片并不会随着窗口的尺寸变动而调整。为了实现图片自动调整尺寸的功能，我们需要明白当窗口大小变化时，Qt会生成一个QresizeEvent的事件，进而自动调用resizeEvent虚函数，这里采取的多态的思想。因此我们只要重写resizeEvent函数，则每次放大或缩小窗口时都会调用我们重写后的实现。

        resizeEvent函数的介绍如下：

void resizeEvent(QResizeEvent *event);
//event包含了该事件生成时，当前窗口的尺寸

        在widget.h文件中重写resizeEvent虚函数（此时的代码逻辑较上述代码要变更一下，因为重写的resizeEvent函数里面要用到标签对象ql，所以要将ql放到一个全局可见的地方，方便让resizeEvent可以拿到他）：

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>
#include <QLabel>
#include <QResizeEvent>

QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACE

class Widget : public QWidget
{
    Q_OBJECT

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

    void resizeEvent(QResizeEvent *event)
    {
        ql->setGeometry(0,0,event->size().width(),event->size().height());
    }

private:
    Ui::Widget *ui;
    QLabel* ql;
};
#endif // WIDGET_H

        运行结果：

4、QFrame边框

         QLabel继承自QFrame，而QFrame又继承QWidget。QFrame提供控件的边框样式，允许对QLabel的边框进行设置。可以在ui文件中右下角的属性栏看到QFrame，如下图：

        其中frameShape表示边框的样式，frameShadow表示边框阴影，lineWidth和midLineWidth表示边框宽度。其中frameShape用的是最多的，他可设置的样式如下：

• QFrame::Box ：矩形边框
• QFrame::Panel ：带有可点击区域的⾯板边框
• QFrame::WinPanel ：Windows⻛格的边框
• QFrame::HLine ：⽔平线边框
• QFrame::VLine ：垂直线边框
• QFrame::StyledPanel ：带有可点击区域的⾯板边框，但样式取决于窗⼝主题

5、alignment文本对齐

         通过调用函数setAlignment，来使控件内的文本进行对齐，具体的对齐方式有如下几种：

• AlignHCenter：水平居中对齐

• AlignVCenter：垂直居中对齐

• AlignTop：和顶层边框对齐

• AlignLeft：和左边框对齐

• AlignRight：和右边框对齐

• AlignBottom：和底层边框对齐

        测试水平居中和垂直居中对齐的代码如下：

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

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

    ui->label->setAlignment(Qt::AlignHCenter|Qt::AlignVCenter);
    ui->label->setText("这是一个普通文本");
}

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

         运行结果：

6、wordWrap自动换行

        调用函数setWordWrap可以让QLabel控件里文本实现自动换行效果，代码如下：

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

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

    //ui->label->setAlignment(Qt::AlignHCenter|Qt::AlignVCenter);
    ui->label->setWordWrap(true);
    ui->label->setText("这是一个普通文本这是一个普通文本这是一个"
                       "普通文本这是一个普通文本这是一个普通文本这是一个普通文本");
}

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

         运行结果：

7、indent设置缩进

         调用函数setIndent设置QLabel中文本的缩进，代码如下：

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

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

    ui->label->setIndent(20);
    ui->label->setText("这是一个普通文本这是一个普通文本这是一个"
                       "普通文本这是一个普通文本这是一个普通文本这是一个普通文本");
}

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

        运行结果：

8、margin设置边距 

        调用函数setMargin可以设置QLabel文本的四周边框的边距，由于QLabel控件默认是左边框对齐和垂直对齐的，不方便观察边距的效果，因此将QLabel控件定义成仅仅是左边框对齐，方便边距的效果。代码如下：

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

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

    ui->label->setAlignment(Qt::AlignLeft);
    ui->label->setMargin(30);
    ui->label->setText("这是一个普通文本这是一个普通文本这是一个"
                       "普通文本这是一个普通文本这是一个普通文本这是一个普通文本");
}

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

        运行结果：

9、buddy设置伙伴

        调用函数setBuddy来为QLabel设置一个伙伴，当触发QLabel时就能激活这个伙伴，他们类似于一种绑定关系，比如为QLabel设置一个按钮伙伴，当触发QLabel时这个按钮就会被选中。

        为了方便测试，可以在标签的文本中显示写出&a，作用是通过文本内容绑定alt+a快捷键，目的是通过alt+a的方式来触发QLabel，直接在ui文件中以拖拽控件的方式生成界面：

        分别给以上两个label控件设置两个对应的伙伴，代码如下：

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

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

    ui->label->setBuddy(ui->radioButton);
    ui->label_2->setBuddy(ui->radioButton_2);
}

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

         运行结果不方便用截图表现出来，具体的效果是当按下alt+a时，对应的按钮就会被选中。

二、QLCDNumber

1、QLCDNumber属性介绍

        QLCDNumber也是一个显示类控件，跟QLabel不同的是，QLCDNumber专门用于显示数字信息，和老式计算器的屏幕有些相似。

        QLCDNumber的属性如下：

value
可以通过设置他从而设置控件上显示的数字值，可以是小数也可以是整数，value会根据intValue的值变化而变化。
intValue
也可以通过设置他从而设置控件上显示的数字值，只能表示整数。当value是小数时，intValue也会自动根据value的值进行四舍五入取到整数。
digitCount
表示控件可以显示出几位数
mode
表示控件上数字的显示形式，比如：二进制、十进制....
segmentStyle
表示控件上数字的风格
smallDecimalPoint
设置控件上小数点的格式，比如字体间距和小数点的位置

2、实现QLCDNumber倒计时功能

        让QLCDNumber控件显示的数值自动减少，就如同一个倒计时，但是要实现这个功能，并不是依靠sleep函数，因为如果在widget构造函数中使用循环+sleep函数，则无法实现倒计时功能，因为界面的生成是在构造函数之后的，界面无法捕捉这个循环过程。并且Qt禁止用户创建线程对界面做修改，所以需要先创建一个定时器，这个定时器每过一段时间就会发出timeout信号，我们自定义一个槽函数然后连接这个信号，并且在槽函数中对QLCDNumber的数值进行减减操作。因此，整体的逻辑是依靠定时器发出的信号，从而间接的对QLCDNumber的数值进行减减。

        widget.h代码如下：

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>

QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACE

class Widget : public QWidget
{
    Q_OBJECT

public:
    Widget(QWidget *parent = nullptr);
    ~Widget();
    void timeSlot();//QTimer的槽函数

private:
    Ui::Widget *ui;
    QTimer* time;
};
#endif // WIDGET_H

        widget.cpp代码：

#include "widget.h"
#include "ui_widget.h"
#include <QTimer>

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

    ui->lcdNumber->display(10);//设置计时器的数值为10
    //创建一个定时器
    time = new QTimer(this);
    time->start(1000);//每过一秒，该定时器发出一个信号
    connect(time,&QTimer::timeout,this,&Widget::timeSlot);
}

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

void Widget::timeSlot()
{
    int num = ui->lcdNumber->value();
    if(num==0)
    {
        time->stop();
        return;
    }
    num--;
    ui->lcdNumber->display(num);
}

        运行结果：

三、QProgressbar

1、QProgressbar属性介绍

         QProgressbar表示进度条，样式如下：

       属性介绍如下：

minimum
进度条最⼩值
maximum
进度条最大值
value
进度条当前值
alignment
数值在进度条中的对齐方式
textVisible
进度条数值是否可见
orientation
进度条的⽅向是⽔平还是垂直
invertAppearance
进度条是否是朝反⽅向增⻓进度
textDirection
⽂本的朝向
format
数值的格式

2、实现自动增长的进度条

         核心也是调用QTimer计时器来间接完成进度条的增长，实现逻辑和上述倒计时的例子是一样的，widget.h代码如下：

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>

QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACE

class Widget : public QWidget
{
    Q_OBJECT

public:
    Widget(QWidget *parent = nullptr);
    ~Widget();
    void progressbar();

private:
    Ui::Widget *ui;
    QTimer* time;
};
#endif // WIDGET_H

        widget.cpp的代码如下：

#include "widget.h"
#include "ui_widget.h"
#include <QTimer>

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

    time = new QTimer(this);
    ui->progressBar->setValue(0);
    time->start(100);
    connect(time,&QTimer::timeout,this,&Widget::progressbar);
}

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

void Widget::progressbar()
{
   int num = ui->progressBar->value();
   if(num==100)
   {
       time->stop();
       return;
   }
   ui->progressBar->setValue(num+1);
}

        运行结果：

3、设置进度条的颜色 

        由于QProgressbar也是间接继承自QWidget，因此QWidget的属性styleSheer也是可以使用的，并且可以通过styleSheer更改进度条的颜色，代码如下：

#include "widget.h"
#include "ui_widget.h"
#include <QTimer>

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

    time = new QTimer(this);
    ui->progressBar->setValue(0);//设置进度条初始值

    //这里要加上QProgressBar::chunk，表示选中进度条的进度块
    ui->progressBar->setStyleSheet("QProgressBar::chunk{background-color:red;}");
    ui->progressBar->setAlignment(Qt::AlignHCenter|Qt::AlignVCenter);//设置数值的对齐方式

    time->start(100);//一秒发出10个timeout信号
    connect(time,&QTimer::timeout,this,&Widget::progressbar);
}

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

void Widget::progressbar()
{
   int num = ui->progressBar->value();
   if(num==100)
   {
       time->stop();
       return;
   }
   ui->progressBar->setValue(num+1);
}

        运行结果：

        只不过这里有一个小bug，就是更改颜色后，数值会自动偏离，因此需要我们手动将数值的对齐方式再次进行设置。 

四、QCalendarWidget

1、QCalendarWidget属性介绍 

        QCalendarWidget表示日历，并且该控件只能用来表示日历，该控件样式如下：

        属性介绍：

selectDate
当前选中的⽇期
minimumDate
日历中的最小日期范围
maximumDate
日历中的最大日期范围
firstDayOfWeek
每周的第⼀天(也就是⽇历的第⼀列) 是周几
gridVisible
是否显示日历的边框
selectionMode
是否允许选择日期
navigationBarVisible
⽇历上⽅标题是否显示
horizontalHeaderFormat
日历第一行的表现格式
verticalHeaderFormat
日历第一列是否显示出来
dateEditEnabled
是否允许⽇期被编辑

        值得注意的是，该日历控件再选中其内容时，或者对日历进行操作时会发出相关信号，具体信号如下：

selectionChanged()
当选中的日期发⽣改变时发出
activated(const QDate&)
当双击⼀个有效的日期或者按下回⻋键时发出，并把该日期保存在QData中
currentPageChanged(int, int)
当年份⽉份改变时发出，形参表示改变后的新年份和⽉份

2、代码测试

        测试selectionChanged信号，即点击日历中的某一天后触发该信号，然后在自定义槽函数里打印当前选中的具体日期，并将该日期展示到界面上，ui文件中的界面设计如下：

        widget.cpp文件的代码如下：

#include "widget.h"
#include "ui_widget.h"
#include <QDebug>

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

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


void Widget::on_calendarWidget_selectionChanged()//selectionChanged信号的槽函数
{
    QDate date = ui->calendarWidget->selectedDate();
    qDebug()<<date;

    ui->label->setText("选中的日期："+date.toString());
}

        运行结果：

结语 

        以上就是关于Qt中显示类控件的讲解，Qt中还有其他的显示类控件，但是基本大同小异，掌握好一些常用的控件，理解别的控件也就容易许多。每一种显示类控件都会有属于自己独特的属性，当然，也会有相似的属性，只不过属性的名称不一样。

        最后如果本文有遗漏或者有误的地方欢迎大家在评论区补充，谢谢大家！！    


http://www.kler.cn/a/311316.html

相关文章：

  • Leecode热题100-35.搜索插入位置
  • 远离生成式AI大乱斗，SAS公司揭示亚太区千亿AI市场蓝图
  • 新版 idea 编写 idea 插件时，启动出现 ClassNotFound
  • Android音频架构
  • ubuntu ros 解决建完图后 保存的地图非常小的问题
  • Linux 进程线程间通信总结
  • 二叉树的层序遍历-广度优先遍历
  • 专题四_位运算( ＞＞ , ＜＜ , , | , ^ )_算法详细总结
  • 图新地球-将地图上大量的地标点批量输出坐标到csv文件【kml转excel】
  • 汇编（实现C语言程序的调用）
  • TestDeploy v3.0构思
  • Vue2接入高德地图API实现搜索定位和点击获取经纬度及地址功能
  • 【Python报错已解决】ModuleNotFoundError: No module named ‘sklearn‘
  • 离散化c++
  • Django创建模型
  • 力扣（leetcode）每日一题 1184 公交站间的距离
  • 机器人相关知识的本身和价值
  • C++实现的小游戏
  • 关于Element-ui中el-table出现的表格错位问题解决
  • 启发式生成最佳轨迹ReGentS：超32个智能体生成现实世界的安全关键驾驶场景
  • 数据库（DB、DBMS、SQL）
  • 中关村科金推出得助音视频鸿蒙SDK，助力金融业务系统鸿蒙化提速
  • 蓝桥杯1.确定字符串是否包含唯一字符
  • VS Code远程连接虚拟机
  • 如何用站群服务器做抢购秒杀平台
  • Linux6-vi/vim