第二章：Qt常用界面组件

第二章：Qt常用界面组件

Qt 提供了丰富的图形用户界面（GUI）组件，便于开发者快速构建交互式应用程序。本章将详细讲解常见组件的功能、使用方法、布局管理，以及信号与槽机制的实现，通过实际案例帮助您理解这些内容的实际应用。

---

2.1 常用组件概览

Qt Widgets 模块提供了许多基础和高级组件，以下是最常见的组件及其用途：

• QLabel： 用于显示文本或图片。
• QPushButton： 用于创建按钮，响应用户点击事件。
• QLineEdit： 单行文本输入框。
• QTextEdit： 多行文本输入框，支持富文本。
• QCheckBox 和 QRadioButton： 多选框和单选按钮。
• QComboBox： 下拉列表框。
• QSlider 和 QProgressBar： 滑块和进度条，常用于显示或控制数值。
• QTableWidget 和 QTreeWidget： 表格和树形结构的展示。

---

2.2 QLabel 和 QPushButton 的使用

2.2.1 QLabel 示例

QLabel 是最简单的显示组件，支持静态文本、图片和 HTML 格式内容。

#include <QApplication>
#include <QLabel>

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

    QLabel label("<h1>欢迎使用 Qt!</h1>");
    label.setAlignment(Qt::AlignCenter);
    label.setFixedSize(300, 100);
    label.show();

    return app.exec();
}

• 关键点：
  • setAlignment()：设置对齐方式。
  • setFixedSize()：固定组件大小。

2.2.2 QPushButton 示例

QPushButton 是交互性最强的组件之一，支持文本和图标。

#include <QApplication>
#include <QPushButton>

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

    QPushButton button("点击我");
    button.resize(100, 50);
    QObject::connect(&button, &QPushButton::clicked, []() {
        qDebug() << "按钮被点击了！";
    });
    button.show();

    return app.exec();
}

• 关键点：
  • QObject::connect()：将信号（按钮点击）与槽（执行函数）连接。
  • 使用 Lambda 表达式处理简单事件。

---

2.3 布局管理

在 GUI 开发中，布局管理是决定界面美观和可扩展性的重要部分。Qt 提供了三种主要布局类：

• QHBoxLayout： 水平排列。
• QVBoxLayout： 垂直排列。
• QGridLayout： 网格布局。

2.3.1 QVBoxLayout 示例

创建一个垂直排列的窗口，包含标签和按钮：

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

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

    QWidget window;
    window.setWindowTitle("垂直布局示例");

    QLabel *label = new QLabel("这是一个标签");
    QPushButton *button = new QPushButton("这是一个按钮");

    QVBoxLayout *layout = new QVBoxLayout();
    layout->addWidget(label);
    layout->addWidget(button);

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

    return app.exec();
}

• 关键点：
  • addWidget()：将组件添加到布局中。
  • setLayout()：将布局应用到窗口。

2.3.2 QGridLayout 示例

网格布局适合较复杂的界面需求：

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

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

    QWidget window;
    window.setWindowTitle("网格布局示例");

    QGridLayout *layout = new QGridLayout();
    layout->addWidget(new QLabel("标签1"), 0, 0);
    layout->addWidget(new QLabel("标签2"), 0, 1);
    layout->addWidget(new QPushButton("按钮1"), 1, 0);
    layout->addWidget(new QPushButton("按钮2"), 1, 1);

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

    return app.exec();
}

• 关键点：
  • addWidget(QWidget *widget, int row, int column)：指定组件在网格中的位置。

---

2.4 信号与槽机制

信号与槽是 Qt 的核心机制，用于组件之间的事件通信。以下是基本概念：

• 信号（Signal）： 由对象发出，表示某事件发生。
• 槽（Slot）： 接收信号后执行的函数。
• 连接（Connect）： 将信号和槽绑定。

2.4.1 基本用法

以下示例展示按钮点击如何触发标签内容变化：

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

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

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

    QLabel *label = new QLabel("初始内容");
    QPushButton *button = new QPushButton("点击修改");

    layout->addWidget(label);
    layout->addWidget(button);
    window.setLayout(layout);

    QObject::connect(button, &QPushButton::clicked, [label]() {
        label->setText("内容已修改！");
    });

    window.show();
    return app.exec();
}

2.4.2 自定义信号与槽

在复杂场景中，可以定义自己的信号与槽：

#include <QObject>
#include <QDebug>

class MyObject : public QObject {
    Q_OBJECT
public:
    MyObject() {
        connect(this, &MyObject::mySignal, this, &MyObject::mySlot);
    }

signals:
    void mySignal(int value);

public slots:
    void mySlot(int value) {
        qDebug() << "收到信号：" << value;
    }

    void triggerSignal() {
        emit mySignal(42); // 发射信号
    }
};

int main() {
    MyObject obj;
    obj.triggerSignal();
    return 0;
}

• 关键点：
  • signals 和 slots 关键字分别定义信号和槽。
  • 使用 emit 关键字发射信号。

---

2.5 动态界面调整与事件处理

2.5.1 动态界面调整

通过代码动态调整界面布局和内容：

QVBoxLayout *layout = new QVBoxLayout();
layout->addWidget(new QLabel("动态添加的组件"));

2.5.2 事件处理

Qt 提供了灵活的事件机制，可以通过重写事件处理函数自定义行为：

#include <QWidget>
#include <QMouseEvent>
#include <QDebug>

class MyWidget : public QWidget {
protected:
    void mousePressEvent(QMouseEvent *event) override {
        qDebug() << "鼠标点击位置：" << event->pos();
    }
};

---