QT从入门到精通(一)——Qlabel介绍与使用

1. QT介绍------代码测试

Qt 是一个跨平台的应用程序开发框架，广泛用于开发图形用户界面（GUI）应用程序，也支持非图形应用程序的开发。Qt 提供了一套工具和库，使得开发者能够高效地构建高性能、可移植的应用程序。以下是对 Qt 的详细介绍：

1. 历史背景

• 起源：Qt 最初由挪威公司 Trolltech（后被 Nokia 收购）于 1991 年开发。自那时以来，Qt 已经发展成为一个成熟的框架，广泛应用于各种行业。
• 开源与商业：Qt 采用双重许可模式，既有开源版本（GNU GPL 和 LGPL），也有商业版本，适合不同需求的开发者。

2. 主要特性

• 跨平台：Qt 支持多种操作系统，包括 Windows、macOS、Linux、Android 和 iOS。开发者可以编写一次代码，在多个平台上运行。
• 丰富的库：Qt 提供了大量的模块和库，涵盖 GUI、网络、数据库、XML、线程、文件处理等功能。
• 信号与槽机制：Qt 的信号与槽机制使得对象之间的通信变得简单而灵活，适合事件驱动编程。
• 国际化支持：Qt 提供了强大的国际化和本地化支持，方便开发多语言应用程序。
• 图形视图框架：Qt 提供了强大的图形视图框架，支持 2D 图形和复杂的用户界面设计。
• Qt Quick 和 QML：Qt Quick 是一个用于快速开发用户界面的模块，QML 是一种声明式语言，适合设计动态和流畅的用户界面。

3. 主要组件

• Qt Core：提供核心非 GUI 功能，如事件循环、信号与槽、线程、文件和数据处理等。
• Qt GUI：提供基本的图形用户界面组件，如窗口、按钮、文本框等。
• Qt Widgets：用于创建传统的桌面应用程序，提供丰富的窗口小部件。
• Qt Quick：用于创建现代触摸友好的用户界面，适合移动设备和嵌入式系统。
• Qt Network：提供网络编程功能，支持 TCP/IP、HTTP、FTP 等协议。
• Qt Multimedia：用于音频和视频的播放和录制。
• Qt WebEngine：用于在应用程序中嵌入网页内容。

4. 开发工具

• Qt Creator：Qt 官方集成开发环境（IDE），提供代码编辑、调试、项目管理等功能，支持 C++ 和 QML 开发。
• Qt Designer：用于可视化设计用户界面的工具，支持拖放操作，生成 UI 文件。

5. 应用领域

• 桌面应用程序：Qt 被广泛用于开发跨平台的桌面应用程序，如文本编辑器、图像处理软件等。
• 嵌入式系统：Qt 在嵌入式设备上的应用也很广泛，支持触摸屏和小型显示器的用户界面。
• 移动应用程序：Qt 支持 Android 和 iOS 开发，适合构建跨平台的移动应用。
• 工业自动化：Qt 被用于开发工业控制系统和监控软件。
• 游戏开发：虽然 Qt 不是专门为游戏开发设计的，但它的图形能力和跨平台特性使其在某些游戏开发中也得到了应用。

6. 社区与支持

• 活跃的社区：Qt 拥有一个活跃的开发者社区，提供丰富的文档、教程和示例代码。
• 商业支持：对于企业用户，Qt 提供商业支持和服务，确保企业级应用的稳定性和安全性。

7. 学习资源

• 官方文档：Qt 提供了详细的官方文档，涵盖所有模块和功能。
• 在线教程：许多在线平台提供 Qt 的学习资源，包括视频教程和实践项目。
• 书籍：市面上有许多关于 Qt 的书籍，适合不同水平的开发者。

Qt 是一个功能强大且灵活的开发框架，适合各种类型的应用程序开发。无论是桌面应用、移动应用还是嵌入式系统，Qt 都能提供高效的解决方案。其跨平台特性和丰富的功能库使得开发者能够快速构建高质量的应用程序。

---

2. QLabel

QLabel 是 Qt 框架中用于显示文本或图像的基本控件。它广泛应用于各种应用程序中，用于显示静态或动态信息。本文将详细介绍如何在 QLabel 中显示文本以及如何设置其样式，包括使用样式表（Stylesheets）、调整字体、颜色、对齐方式等内容。我们将分别展示 C++（使用 Qt） 和 Python（使用 PyQt5 和 PySide2） 的示例代码。

1. [QLabel 基础](#QLabel 基础)
2. [在 QLabel 中显示文本](#在 QLabel 中显示文本)
3. [设置 QLabel 样式](#设置 QLabel 样式)
   • 使用样式表 (Stylesheets)
   • [程序matically 设置字体和颜色](#程序matically 设置字体和颜色)
   • 设置对齐方式
4. [动态更新 QLabel](#动态更新 QLabel)
5. 完整示例代码
   • [C++ 示例（Qt）](#C++ 示例（Qt）)
   • [Python 示例（PyQt5）](#Python 示例（PyQt5）)
   • [Python 示例（PySide2）](#Python 示例（PySide2）)

---

1. QLabel 基础

QLabel 是 Qt 中的一个控件，用于显示文本或图像。它不接受用户输入，因此通常用于显示标签、提示或静态信息。

主要特性：

• 显示纯文本、富文本（HTML 格式）或图像。
• 支持多种对齐方式和文本格式。
• 可以响应鼠标事件（如链接点击）。

常见用途：

• 显示标签或标题。
• 显示图像或图标。
• 显示状态信息或提示。

---

2. 在 QLabel 中显示文本

1. C++（Qt）

#include <QApplication>
#include <QLabel>

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

    QLabel label("Hello, QLabel!");
    label.show();

    return app.exec();
}

2.Python（PyQt5）

import sys
from PyQt5.QtWidgets import QApplication, QLabel

app = QApplication(sys.argv)

label = QLabel("Hello, QLabel!")
label.show()

sys.exit(app.exec_())

3.Python（PySide2）

import sys
from PySide2.QtWidgets import QApplication, QLabel

app = QApplication(sys.argv)

label = QLabel("Hello, QLabel!")
label.show()

sys.exit(app.exec_())

---

3. 设置 QLabel 样式

使用样式表 (Stylesheets)

Qt 的样式表允许您使用类似于 CSS 的语法来定制控件的外观。通过样式表，您可以设置背景颜色、字体颜色、边框、边距等。

示例：设置背景色和字体颜色

C++（Qt）

label.setStyleSheet("QLabel { background-color : yellow; color : blue; }");

Python（PyQt5 和 PySide2）

label.setStyleSheet("QLabel { background-color : yellow; color : blue; }")

示例：设置字体大小和字体样式

C++（Qt）

label.setStyleSheet("QLabel { font-size: 20px; font-weight: bold; font-family: Arial; }");

Python（PyQt5 和 PySide2）

label.setStyleSheet("QLabel { font-size: 20px; font-weight: bold; font-family: Arial; }")

示例：添加边框和内边距

C++（Qt）

label.setStyleSheet("QLabel { border: 2px solid black; padding: 5px; }");

Python（PyQt5 和 PySide2）

label.setStyleSheet("QLabel { border: 2px solid black; padding: 5px; }")

程序matically 设置字体和颜色

除了使用样式表，您还可以通过 Qt 提供的 API 直接设置字体、颜色等属性。

示例：设置字体

C++（Qt）

#include <QFont>

// 创建一个 QFont 对象
QFont font("Times", 16, QFont::Bold);

// 设置 QLabel 的字体
label.setFont(font);

Python（PyQt5 和 PySide2）

from PyQt5.QtGui import QFont  # PySide2 使用 PySide2.QtGui
# 创建一个 QFont 对象
font = QFont("Times", 16, QFont.Bold)

# 设置 QLabel 的字体
label.setFont(font)

示例：设置文本颜色

C++（Qt）

#include <QPalette>

QPalette palette = label.palette();
palette.setColor(QPalette::WindowText, Qt::red);
label.setPalette(palette);

Python（PyQt5 和 PySide2）

from PyQt5.QtGui import QPalette, QColor  # PySide2 使用 PySide2.QtGui

palette = label.palette()
palette.setColor(QPalette.WindowText, QColor('red'))
label.setPalette(palette)

设置对齐方式

QLabel 支持多种对齐方式，如左对齐、右对齐、居中对齐等。

C++（Qt）

label.setAlignment(Qt::AlignCenter); // 居中对齐

Python（PyQt5 和 PySide2）

from PyQt5.QtCore import Qt  # PySide2 使用 PySide2.QtCore

label.setAlignment(Qt.AlignCenter)  # 居中对齐

可选对齐方式：

• Qt::AlignLeft / Qt.AlignLeft
• Qt::AlignRight / Qt.AlignRight
• Qt::AlignHCenter / Qt.AlignHCenter
• Qt::AlignTop / Qt.AlignTop
• Qt::AlignBottom / Qt.AlignBottom
• Qt::AlignVCenter / Qt.AlignVCenter
• Qt::AlignCenter / Qt.AlignCenter (水平和垂直居中)

---

4. 动态更新 QLabel

在应用程序运行时，您可能需要根据事件或数据动态更新 QLabel 的内容和样式。

更新文本

C++（Qt）

label.setText("New Text");

Python（PyQt5 和 PySide2）

label.setText("New Text")

更新样式

C++（Qt）

label.setStyleSheet("QLabel { background-color : green; color : white; }");

Python（PyQt5 和 PySide2）

label.setStyleSheet("QLabel { background-color : green; color : white; }")

示例：点击按钮更新 QLabel

C++（Qt）

#include <QApplication>
#include <QLabel>
#include <QPushButton>
#include <QVBoxLayout>
#include <QWidget>

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

    QWidget window;
    QVBoxLayout *layout = new QVBoxLayout(&window);

    QLabel *label = new QLabel("Original Text");
    QPushButton *button = new QPushButton("Update Text");

    layout->addWidget(label);
    layout->addWidget(button);

    QObject::connect(button, &QPushButton::clicked, [&](){
        label->setText("Updated Text");
        label->setStyleSheet("QLabel { color: blue; }");
    });

    window.show();

    return app.exec();
}

Python（PyQt5 和 PySide2）

import sys
from PyQt5.QtWidgets import QApplication, QLabel, QPushButton, QVBoxLayout, QWidget  # PySide2 使用 PySide2.QtWidgets
from PyQt5.QtCore import Qt  # PySide2 使用 PySide2.QtCore

def update_label():
    label.setText("Updated Text")
    label.setStyleSheet("QLabel { color: blue; }")

app = QApplication(sys.argv)

window = QWidget()
layout = QVBoxLayout()

label = QLabel("Original Text")
button = QPushButton("Update Text")
button.clicked.connect(update_label)

layout.addWidget(label)
layout.addWidget(button)

window.setLayout(layout)
window.show()

sys.exit(app.exec_())

---

C++ 示例（Qt）

#include <QApplication>
#include <QLabel>
#include <QPushButton>
#include <QVBoxLayout>
#include <QWidget>
#include <QFont>
#include <QPalette>

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

    QWidget window;
    window.setWindowTitle("QLabel 示例");

    QVBoxLayout *layout = new QVBoxLayout(&window);

    // 创建 QLabel 1
    QLabel *label1 = new QLabel("这是第一个 QLabel");
    label1->setAlignment(Qt::AlignCenter);
    label1->setStyleSheet("QLabel { background-color : lightgray; color : black; font-size: 18px; }");

    // 创建 QLabel 2
    QLabel *label2 = new QLabel("这是第二个 QLabel");
    label2->setAlignment(Qt::AlignRight);
    QFont font("Arial", 16, QFont::Bold);
    label2->setFont(font);
    QPalette palette = label2->palette();
    palette.setColor(QPalette::WindowText, Qt::blue);
    label2->setPalette(palette);

    // 创建按钮
    QPushButton *button = new QPushButton("更新 QLabel");
    
    // 连接按钮点击事件
    QObject::connect(button, &QPushButton::clicked, [&](){
        label1->setText("QLabel 1 已更新");
        label1->setStyleSheet("QLabel { background-color : yellow; color : red; font-size: 20px; }");
        
        label2->setText("QLabel 2 已更新");
        label2->setFont(QFont("Times", 14, QFont::Italic));
        QPalette newPalette = label2->palette();
        newPalette.setColor(QPalette::WindowText, Qt::green);
        label2->setPalette(newPalette);
    });

    layout->addWidget(label1);
    layout->addWidget(label2);
    layout->addWidget(button);

    window.setLayout(layout);
    window.show();

    return app.exec();
}

Python 示例（PyQt5）

import sys
from PyQt5.QtWidgets import QApplication, QLabel, QPushButton, QVBoxLayout, QWidget
from PyQt5.QtGui import QFont, QPalette, QColor
from PyQt5.QtCore import Qt

def update_labels():
    label1.setText("QLabel 1 已更新")
    label1.setStyleSheet("QLabel { background-color : yellow; color : red; font-size: 20px; }")
    
    label2.setText("QLabel 2 已更新")
    label2.setFont(QFont("Times", 14, QFont.StyleItalic))
    palette = label2.palette()
    palette.setColor(QPalette.WindowText, QColor('green'))
    label2.setPalette(palette)

app = QApplication(sys.argv)

window = QWidget()
window.setWindowTitle("QLabel 示例")

layout = QVBoxLayout()

# 创建 QLabel 1
label1 = QLabel("这是第一个 QLabel")
label1.setAlignment(Qt.AlignCenter)
label1.setStyleSheet("QLabel { background-color : lightgray; color : black; font-size: 18px; }")

# 创建 QLabel 2
label2 = QLabel("这是第二个 QLabel")
label2.setAlignment(Qt.AlignRight)
font = QFont("Arial", 16, QFont.Bold)
label2.setFont(font)
palette = label2.palette()
palette.setColor(QPalette.WindowText, QColor('blue'))
label2.setPalette(palette)

# 创建按钮
button = QPushButton("更新 QLabel")
button.clicked.connect(update_labels)

layout.addWidget(label1)
layout.addWidget(label2)
layout.addWidget(button)

window.setLayout(layout)
window.show()

sys.exit(app.exec_())

Python 示例（PySide2）

import sys
from PySide2.QtWidgets import QApplication, QLabel, QPushButton, QVBoxLayout, QWidget
from PySide2.QtGui import QFont, QPalette, QColor
from PySide2.QtCore import Qt

def update_labels():
    label1.setText("QLabel 1 已更新")
    label1.setStyleSheet("QLabel { background-color : yellow; color : red; font-size: 20px; }")
    
    label2.setText("QLabel 2 已更新")
    label2.setFont(QFont("Times", 14, QFont.StyleItalic))
    palette = label2.palette()
    palette.setColor(QPalette.WindowText, QColor('green'))
    label2.setPalette(palette)

app = QApplication(sys.argv)

window = QWidget()
window.setWindowTitle("QLabel 示例")

layout = QVBoxLayout()

# 创建 QLabel 1
label1 = QLabel("这是第一个 QLabel")
label1.setAlignment(Qt.AlignCenter)
label1.setStyleSheet("QLabel { background-color : lightgray; color : black; font-size: 18px; }")

# 创建 QLabel 2
label2 = QLabel("这是第二个 QLabel")
label2.setAlignment(Qt.AlignRight)
font = QFont("Arial", 16, QFont.Bold)
label2.setFont(font)
palette = label2.palette()
palette.setColor(QPalette.WindowText, QColor('blue'))
label2.setPalette(palette)

# 创建按钮
button = QPushButton("更新 QLabel")
button.clicked.connect(update_labels)

layout.addWidget(label1)
layout.addWidget(label2)
layout.addWidget(button)

window.setLayout(layout)
window.show()

sys.exit(app.exec_())

显示图像案例

    ui->setupUi(this);

    QPixmap pixmap("D:/demo.jpg");
    if (pixmap.isNull()) {
          qDebug("Failed to load image.");
          return ;
     }
    QLabel *label = new QLabel();
    label->setPixmap(pixmap);
    label->setScaledContents(true);
    // 设置父控件
    label->setParent(ui->centralwidget);
    // 移动
    label->move(50,50);
    label->resize(200,200);

显示设置文本案例

   QFont font ;
    font.setBold(true);
    font.setPixelSize(36);
    label->setAlignment(Qt::AlignCenter);
    label->setText("hello world QT C++ ");
    // 设置颜色和背景（方法 1 或 方法 2）
    label->setStyleSheet("QLabel { font-size: 36px; font-weight: bold; color: red; background-color: white; }");

    QVBoxLayout *layout = new QVBoxLayout();

    layout->addWidget(label);
    ui->centralwidget->setLayout(layout);

    this->setWindowTitle(QString::fromLocal8Bit("Opencv4从入门到精通"));

QLabel 是一个功能强大且灵活的控件，适用于显示各种类型的文本和图像。通过结合使用样式表和 Qt 提供的 API，您可以轻松地定制 QLabel 的外观和行为，以满足不同的应用需求。无论是在桌面应用程序还是嵌入式系统中，掌握 QLabel 的使用方法都是开发高质量用户界面的基础。

1. 使用样式表的优势：

   • 样式表提供了强大的自定义能力，可以轻松实现复杂的外观设计。
   • 类似于 CSS，使得样式定义更加直观和灵活。

2. 程序matically 设置样式的优势：

   • 对于需要动态更改样式的场景，直接使用 API 设置样式更加方便。
   • 可以结合逻辑判断，根据应用状态调整控件外观。

3. 保持一致性：

   • 确保整个应用程序中控件的样式保持一致，提升用户体验。
   • 使用统一的字体和颜色方案。

4. 优化性能：

   • 避免频繁更新样式表，可能会影响性能。
   • 对于大量控件，尽量使用层级样式表或样式表继承，减少重复定义。

5. 响应式设计：

   • 考虑不同分辨率和屏幕尺寸下控件的显示效果。
   • 使用布局管理器（如 QVBoxLayout、QHBoxLayout）确保控件自适应窗口大小。

6. 国际化支持：

   • 如果应用需要支持多语言，确保 QLabel 能正确显示不同语言的文本。
   • 使用 Unicode 字符编码，避免编码问题。

---

显示opencv读取的图像

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include "opencv2/opencv.hpp"
#include "QLabel"
#include "QVBoxLayout"
#pragma executon_character_set("utf-8")

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


    QLabel *label = new QLabel();

    cv::Mat img = cv::imread("D:/demo.jpg");
    cv::cvtColor(img, img, cv::COLOR_BGR2RGB);  // 转换为 RGB 格式
    QImage qimg(img.data, img.cols, img.rows, img.step, QImage::Format_RGB888);
    QPixmap pixmap = QPixmap::fromImage(qimg);

    pixmap = pixmap.scaled(label->size(), Qt::KeepAspectRatio, Qt::SmoothTransformation);
    label->setScaledContents(true);
    label->setPixmap(pixmap);

    label->setParent(ui->centralwidget);

    this->setWindowTitle(QString::fromLocal8Bit("Opencv4从入门到精通"));

}

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

Qt 提供了多种转换模式，在缩放图片时可以选择合适的模式：

Qt::FastTransformation

使用快速、低质量的缩放算法（如最近邻插值）。

适合性能要求高但对图像质量要求不高的场景。

缺点：可能会导致图像锯齿明显或像素化。
Qt::SmoothTransformation

使用平滑插值算法，保证图像质量。

优点：生成的缩放结果更平滑，没有明显锯齿。

缺点：消耗更多计算资源，缩放速度较慢。

学习资源

• 官方文档：

  • Qt QLabel Class Documentation
  • Qt Stylesheets Documentation
  • PyQt5 Documentation
  • PySide2 Documentation

• 教程和示例：

  • Qt Widgets Tutorial
  • PyQt5 Tutorial
  • PySide2 Tutorial

• 社区支持：

  • Qt Forums
  • Stack Overflow - Qt Tag
  • Stack Overflow - PyQt5 Tag
  • Stack Overflow - PySide2 Tag

---