Qt5 C++入门教程-第10章 窗口小部件(Widgets)

大道至简，在 Qt5 C++入门教程的这一部分，我们来谈谈一些基本的 Qt5 窗口小部件。我们有关于 QLabel、QSlider、QComboBox、QSpinBox、QLineEdit 和 QMainWindow 这些窗口小部件的示例。

窗口小部件（Widgets）是图形用户界面（GUI）应用程序的基本组成部分。Qt5 库拥有丰富多样的窗口小部件。

• Qt5 QLabel
  QLabel 用于显示文本和图像。它不提供用户交互功能。下面的示例用于显示文本。

label.h

#pragma once

#include <QWidget>
#include <QLabel>

class Label : public QWidget {

  public:
    Label(QWidget *parent = nullptr);

  private:
    QLabel *label;
};

这是我们代码示例的头文件。

label.cpp

#include <QVBoxLayout>
#include <QFont>
#include "label.h"

Label::Label(QWidget *parent)
    : QWidget(parent) {

  QString lyrics = "Who doesn't long for someone to hold\n\
Who knows how to love you without being told\n\
Somebody tell me why I'm on my own\n\
If there's a soulmate for everyone\n\
\n\
Here we are again, circles never end\n\
How do I find the perfect fit\n\
There's enough for everyone\n\
But I'm still waiting in line\n\
\n\
Who doesn't long for someone to hold\n\
Who knows how to love you without being told\n\
Somebody tell me why I'm on my own\n\
If there's a soulmate for everyone";

  label = new QLabel(lyrics, this);
  label->setFont(QFont("Purisa", 10));

  auto *vbox = new QVBoxLayout();
  vbox->addWidget(label);
  setLayout(vbox);
}

我们使用 QLabel 窗口小部件在窗口中显示歌词。

label = new QLabel(lyrics, this);
label->setFont(QFont("Purisa", 10));

我们创建一个标签窗口小部件，并为其设置特定的字体。

main.cpp

#include <QApplication>
#include <QTextStream>
#include "label.h"

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

  QApplication app(argc, argv);

  Label window;

  window.setWindowTitle("QLabel");
  window.show();

  return app.exec();
}

Qt5 QSlider
QSlider 是一个带有简单滑块的窗口小部件。这个滑块可以前后拉动。通过这种方式，我们可以为特定任务选择一个值。

slider.h

#pragma once

#include <QWidget>
#include <QSlider>
#include <QLabel>

class Slider : public QWidget {

  Q_OBJECT

  public:
    Slider(QWidget *parent = nullptr);

  private:
    QSlider *slider;
    QLabel *label;
};

slider.cpp

#include <QHBoxLayout>
#include "slider.h"

Slider::Slider(QWidget *parent)
    : QWidget(parent) {

  auto *hbox = new QHBoxLayout(this);

  slider = new QSlider(Qt::Horizontal , this);
  hbox->addWidget(slider);

  label = new QLabel("0", this);
  hbox->addWidget(label);

//   connect(slider, &QSlider::valueChanged, label,
//     static_cast<void (QLabel::*)(int)>(&QLabel::setNum));

  connect(slider, &QSlider::valueChanged, label,
    qOverload<int>(&QLabel::setNum));
}

我们显示两个窗口小部件：一个滑块和一个标签。滑块控制标签中显示的数字。

slider = new QSlider(Qt::Horizontal , this);

创建一个水平的 QSlider。

connect(slider, &QSlider::valueChanged, label,
  qOverload<int>(&QLabel::setNum));

在这行代码中，我们将 valueChanged 信号连接到标签的内置 setNum 槽函数。由于 setNum 方法是重载的，我们使用 qOverload 来选择正确的方法。

main.cpp

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

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

  QApplication app(argc, argv);

  Slider window;

  window.setWindowTitle("QSlider");
  window.show();

  return app.exec();
}

• Qt5 QComboBox
  QComboBox 是一个窗口小部件，它以占用最小屏幕空间的方式向用户展示一系列选项。它是一个选择窗口小部件，显示当前项目，并可以弹出一个可选择项目的列表。组合框可以是可编辑的，允许用户修改列表中的每个项目。

combobox.h

#pragma once

#include <QWidget>
#include <QComboBox>
#include <QLabel>

class ComboBoxEx : public QWidget {

  Q_OBJECT

  public:
    ComboBoxEx(QWidget *parent = nullptr);

  private:
    QComboBox *combo;
    QLabel *label;
};

我们使用两个窗口小部件：一个组合框和一个标签。

combobox.cpp

#include <QHBoxLayout>
#include "combobox.h"

ComboBoxEx::ComboBoxEx(QWidget *parent)
    : QWidget(parent) {

  QStringList distros = {"Arch", "Xubuntu", "Redhat", "Debian",
      "Mandriva"};

  auto *hbox = new QHBoxLayout(this);

  combo = new QComboBox();
  combo->addItems(distros);

  hbox->addWidget(combo);
  hbox->addSpacing(15);

  label = new QLabel("Arch", this);
  hbox->addWidget(label);

  connect(combo, qOverload<const QString &>(&QComboBox::activated),
      label, &QLabel::setText);
}

在这个示例中，组合框中选中的项目会显示在标签中。

QStringList distros = {"Arch", "Xubuntu", "Redhat", "Debian",
    "Mandriva"};

一个 QStringList 存储了组合框的数据。我们有一个 Linux 发行版的列表。

combo = new QComboBox();
combo->addItems(distros);

创建一个 QComboBox，并使用 addItems 方法插入项目。

connect(combo, qOverload<const QString &>(&QComboBox::activated),
    label, &QLabel::setText);

组合框的 activated 信号连接到标签的 setText 槽函数。

main.cpp

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

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

  QApplication app(argc, argv);

  ComboBoxEx window;

  window.resize(300, 150);
  window.setWindowTitle("QComboBox");
  window.show();

  return app.exec();
}

这是应用程序的主文件。

• Qt5 QSpinBox
  QSpinbox 是一个用于处理整数和离散值集合的窗口小部件。在我们的代码示例中，我们有一个 QSpinbox 窗口小部件。我们可以选择 0 到 99 的数字。当前选择的值会显示在一个标签窗口小部件中。

spinbox.h

#pragma once

#include <QWidget>
#include <QSpinBox>

class SpinBox : public QWidget {

  Q_OBJECT

  public:
    SpinBox(QWidget *parent = nullptr);

  private:
    QSpinBox *spinbox;
};

spinbox.cpp

#include <QHBoxLayout>
#include <QLabel>
#include "spinbox.h"

SpinBox::SpinBox(QWidget *parent)
    : QWidget(parent) {

  auto *hbox = new QHBoxLayout(this);
  hbox->setSpacing(15);

  spinbox = new QSpinBox(this);
  auto *lbl = new QLabel("0", this);

  hbox->addWidget(spinbox);
  hbox->addWidget(lbl);

  connect(spinbox, qOverload<int>(&QSpinBox::valueChanged),
    lbl, qOverload<int>(&QLabel::setNum));
}

我们在窗口上放置一个 QSpinbox，并将其 valueChanged 信号连接到 QLabel 的 setNum 槽函数。

connect(spinbox, qOverload<int>(&QSpinBox::valueChanged),
  lbl, qOverload<int>(&QLabel::setNum));

我们需要使用两次 qOverload，因为信号和槽函数都是重载的。

main.cpp

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

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

  QApplication app(argc, argv);

  SpinBox window;

  window.resize(250, 150);
  window.setWindowTitle("QSpinBox");
  window.show();

  return app.exec();
}

• Qt5 QLineEdit
  QLineEdit 是一个窗口小部件，允许输入和编辑一行纯文本。QLineEdit 窗口小部件提供了撤销 / 重做、剪切 / 粘贴和拖放功能。
  
  

在我们的示例中，我们展示三个标签和三个 QLineEdit 窗口小部件。

ledit.h

#pragma once

#include <QWidget>

class Ledit : public QWidget {

  public:
    Ledit(QWidget *parent = nullptr);
};

ledit.cpp

#include <QGridLayout>
#include <QLabel>
#include <QLineEdit>
#include "ledit.h"

Ledit::Ledit(QWidget *parent)
    : QWidget(parent) {

  auto *name = new QLabel("Name:", this);
  name->setAlignment(Qt::AlignRight | Qt::AlignVCenter);

  auto *age = new QLabel("Age:", this);
  age->setAlignment(Qt::AlignRight | Qt::AlignVCenter);

  auto *occupation = new QLabel("Occupation:", this);
  occupation->setAlignment(Qt::AlignRight | Qt::AlignVCenter);

  auto *le1 = new QLineEdit(this);
  auto *le2 = new QLineEdit(this);
  auto *le3 = new QLineEdit(this);

  auto *grid = new QGridLayout();

  grid->addWidget(name, 0, 0);
  grid->addWidget(le1, 0, 1);
  grid->addWidget(age, 1, 0);
  grid->addWidget(le2, 1, 1);
  grid->addWidget(occupation, 2, 0);
  grid->addWidget(le3, 2, 1);

  setLayout(grid);
}

我们显示三个标签和三个 QLineEdit 窗口小部件。这些窗口小部件由 QGridLayout 布局管理器进行布局。

main.cpp

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

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

  QApplication app(argc, argv);

  Ledit window;

  window.setWindowTitle("QLineEdit");
  window.show();

  return app.exec();
}

• 状态栏
  状态栏是一个面板，用于显示应用程序的状态信息。

在我们的示例中，我们有两个按钮和一个状态栏。当我们点击按钮时，每个按钮都会在状态栏显示一条消息。状态栏窗口小部件是 QMainWindow 窗口小部件的一部分。

statusbar.h

#pragma once

#include <QMainWindow>
#include <QPushButton>

class Statusbar : public QMainWindow {

  Q_OBJECT

  public:
    Statusbar(QWidget *parent = nullptr);

  private slots:
    void OnOkPressed();
    void OnApplyPressed();

  private:
    QPushButton *okBtn;
    QPushButton *aplBtn;
};

statusbar.cpp

#include <QLabel>
#include <QFrame>
#include <QStatusBar>
#include <QHBoxLayout>
#include "statusbar.h"

Statusbar::Statusbar(QWidget *parent)
    : QMainWindow(parent) {

  auto *frame = new QFrame(this);
  setCentralWidget(frame);

  auto *hbox = new QHBoxLayout(frame);

  okBtn = new QPushButton("OK", frame);
  hbox->addWidget(okBtn, 0, Qt::AlignLeft | Qt::AlignTop);

  aplBtn = new QPushButton("Apply", frame);
  hbox->addWidget(aplBtn, 1, Qt::AlignLeft | Qt::AlignTop);

  statusBar();

  connect(okBtn, &QPushButton::clicked, this, &Statusbar::OnOkPressed);
  connect(aplBtn, &QPushButton::clicked, this, &Statusbar::OnApplyPressed);
}

void Statusbar::OnOkPressed() {

  statusBar()->showMessage("OK button pressed", 2000);
}

void Statusbar::OnApplyPressed() {

 statusBar()->showMessage("Apply button pressed", 2000);
}

这是 statusbar.cpp 文件。

auto *frame = new QFrame(this);
setCentralWidget(frame);

将 QFrame 窗口小部件放置在 QMainWindow 窗口小部件的中心区域。中心区域只能容纳一个窗口小部件。

okBtn = new QPushButton("OK", frame);
hbox->addWidget(okBtn, 0, Qt::AlignLeft | Qt::AlignTop);

aplBtn = new QPushButton("Apply", frame);
hbox->addWidget(aplBtn, 1, Qt::AlignLeft | Qt::AlignTop);

我们创建两个 QPushButton 窗口小部件，并将它们放置在一个水平框中。按钮的父窗口小部件是 frame 窗口小部件。

statusBar();

要显示状态栏窗口小部件，我们调用 QMainWindow 窗口小部件的 statusBar 方法。

void Statusbar::OnOkPressed() {

  statusBar()->showMessage("OK button pressed", 2000);
}

showMessage 方法在状态栏上显示消息。最后一个参数指定消息在状态栏上显示的毫秒数。

main.cpp

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

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

  QApplication app(argc, argv);

  Statusbar window;

  window.resize(300, 200);
  window.setWindowTitle("QStatusBar");
  window.show();

  return app.exec();
}