Qt5 小部件 II · ZetCode 中文系列教程

# Qt5 小部件 II > 原文： [http://zetcode.com/gui/qt5/widgets2/](http://zetcode.com/gui/qt5/widgets2/) 在 Qt5 C++ 編程教程的這一部分中，我們將繼續討論 Qt5 小部件。我們介紹以下小部件：`QCheckBox`，`QListWidget`，`QProgressBar`，`QPixmap`，`QSplitter`和`QTableWidget`。 ## `QCheckBox` `QCheckBox`是具有兩種狀態的窗口小部件：開和關。這是一個帶有標簽的盒子。如果選中此復選框，則在方框中用勾號表示。在我們的示例中，我們在窗口上顯示一個復選框。如果選中此復選框，則顯示窗口標題。否則它是隱藏的。 `checkbox.h` ```cpp #pragma once #include <QWidget> class CheckBox : public QWidget { Q_OBJECT public: CheckBox(QWidget *parent = 0); private slots: void showTitle(int); }; ``` 這是我們的代碼示例的頭文件。 `checkbox.cpp` ```cpp #include <QCheckBox> #include <QHBoxLayout> #include "checkbox.h" CheckBox::CheckBox(QWidget *parent) : QWidget(parent) { QHBoxLayout *hbox = new QHBoxLayout(this); QCheckBox *cb = new QCheckBox("Show Title", this); cb->setCheckState(Qt::Checked); hbox->addWidget(cb, 0, Qt::AlignLeft | Qt::AlignTop); connect(cb, &QCheckBox::stateChanged, this, &CheckBox::showTitle); } void CheckBox::showTitle(int state) { if (state == Qt::Checked) { setWindowTitle("QCheckBox"); } else { setWindowTitle(" "); } } ``` 我們在窗口上顯示一個復選框，并將其連接到`showTitle()`槽。 ```cpp cb->setCheckState(Qt::Checked); ``` 示例開始時，該復選框已選中。 ```cpp void CheckBox::showTitle(int state) { if (state == Qt::Checked) { setWindowTitle("QCheckBox"); } else { setWindowTitle(" "); } } ``` 我們確定復選框的狀態，并相應地調用`setWindowTitle()`。 `main.cpp` ```cpp #include <QApplication> #include "checkbox.h" int main(int argc, char *argv[]) { QApplication app(argc, argv); CheckBox window; window.resize(250, 150); window.setWindowTitle("QCheckBox"); window.show(); return app.exec(); } ``` 這是主文件。 ![QCheckBox](https://img.kancloud.cn/c3/78/c378549893d4d4970bb992ed4b3ef7c5_252x176.jpg) 圖：`QCheckBox` ## `QListWidget` `QListWidget`是一個小部件，用于顯示項目列表。在我們的示例中，我們將演示如何在列表小部件中添加，重命名和刪除項目。 `listwidget.h` ```cpp #pragma once #include <QWidget> #include <QPushButton> #include <QListWidget> class ListWidget : public QWidget { Q_OBJECT public: ListWidget(QWidget *parent = 0); private slots: void addItem(); void renameItem(); void removeItem(); void clearItems(); private: QListWidget *lw; QPushButton *add; QPushButton *rename; QPushButton *remove; QPushButton *removeAll; }; ``` 該示例的頭文件。 `listwidget.cpp` ```cpp #include "listwidget.h" #include <QVBoxLayout> #include <QInputDialog> ListWidget::ListWidget(QWidget *parent) : QWidget(parent) { QVBoxLayout *vbox = new QVBoxLayout(); vbox->setSpacing(10); QHBoxLayout *hbox = new QHBoxLayout(this); lw = new QListWidget(this); lw->addItem("The Omen"); lw->addItem("The Exorcist"); lw->addItem("Notes on a scandal"); lw->addItem("Fargo"); lw->addItem("Capote"); add = new QPushButton("Add", this); rename = new QPushButton("Rename", this); remove = new QPushButton("Remove", this); removeAll = new QPushButton("Remove All", this); vbox->setSpacing(3); vbox->addStretch(1); vbox->addWidget(add); vbox->addWidget(rename); vbox->addWidget(remove); vbox->addWidget(removeAll); vbox->addStretch(1); hbox->addWidget(lw); hbox->addSpacing(15); hbox->addLayout(vbox); connect(add, &QPushButton::clicked, this, &ListWidget::addItem); connect(rename, &QPushButton::clicked, this, &ListWidget::renameItem); connect(remove, &QPushButton::clicked, this, &ListWidget::removeItem); connect(removeAll, &QPushButton::clicked, this, &ListWidget::clearItems); setLayout(hbox); } void ListWidget::addItem() { QString c_text = QInputDialog::getText(this, "Item", "Enter new item"); QString s_text = c_text.simplified(); if (!s_text.isEmpty()) { lw->addItem(s_text); int r = lw->count() - 1; lw->setCurrentRow(r); } } void ListWidget::renameItem() { QListWidgetItem *curitem = lw->currentItem(); int r = lw->row(curitem); QString c_text = curitem->text(); QString r_text = QInputDialog::getText(this, "Item", "Enter new item", QLineEdit::Normal, c_text); QString s_text = r_text.simplified(); if (!s_text.isEmpty()) { QListWidgetItem *item = lw->takeItem(r); delete item; lw->insertItem(r, s_text); lw->setCurrentRow(r); } } void ListWidget::removeItem() { int r = lw->currentRow(); if (r != -1) { QListWidgetItem *item = lw->takeItem(r); delete item; } } void ListWidget::clearItems(){ if (lw->count() != 0) { lw->clear(); } } ``` 我們顯示一個列表小部件和四個按鈕。我們將使用這些按鈕在列表小部件中添加，重命名和刪除項目。 ```cpp lw = new QListWidget(this); lw->addItem("The Omen"); lw->addItem("The Exorcist"); lw->addItem("Notes on a scandal"); lw->addItem("Fargo"); lw->addItem("Capote); ``` 創建`QListWidget`，并填充五個項目。 ```cpp void ListWidget::addItem() { QString c_text = QInputDialog::getText(this, "Item", "Enter new item"); QString s_text = c_text.simplified(); if (!s_text.isEmpty()) { lw->addItem(s_text); int r = lw->count() - 1; lw->setCurrentRow(r); } } ``` `addItem()`方法將一個新項目添加到列表小部件。該方法會彈出一個輸入對話框。該對話框返回一個字符串值。我們使用`simplified()`方法從字符串中刪除可能的空格。如果返回的字符串不為空，則將其添加到列表末尾的列表小部件中。最后，我們使用`setCurrentRow()`方法突出顯示當前插入的項目。 ```cpp void ListWidget::renameItem() { QListWidgetItem *curitem = lw->currentItem(); int r = lw->row(curitem); QString c_text = curitem->text(); QString r_text = QInputDialog::getText(this, "Item", "Enter new item", QLineEdit::Normal, c_text); QString s_text = r_text.simplified(); if (!s_text.isEmpty()) { QListWidgetItem *item = lw->takeItem(r); delete item; lw->insertItem(r, s_text); lw->setCurrentRow(r); } } ``` 重命名項目包括幾個步驟。首先，我們使用`currentItem()`方法獲取當前項目。我們得到項目的文本和項目所在的行。該項目的文本顯示在`QInputDialog`對話框中。從對話框返回的字符串由`simplified()`方法處理，以刪除潛在的空格。然后，我們使用`takeItem()`方法刪除舊項目，然后將其替換為`insertItem()`方法。我們刪除了`takeItem()`方法刪除的項目，因為刪除的項目不再由 Qt 管理。最后，`setCurrentRow()`選擇新項目。 ```cpp void ListWidget::removeItem() { int r = lw->currentRow(); if (r != -1) { QListWidgetItem *item = lw->takeItem(r); delete item; } } ``` `removeItem()`從列表中刪除特定項目。首先，我們使用`currentRow()`方法獲得當前選中的行。（如果沒有更多的行，則返回 -1。）使用`takeItem()`方法刪除當前選擇的項目。 ```cpp void ListWidget::clearItems(){ if (lw->count() != 0) { lw->clear(); } } ``` `clear()`方法從列表小部件中刪除所有項目。 `main.cpp` ```cpp #include <QApplication> #include "listwidget.h" int main(int argc, char *argv[]) { QApplication app(argc, argv); ListWidget window; window.setWindowTitle("QListWidget"); window.show(); return app.exec(); } ``` 這是主文件。 ![QListWidget](https://img.kancloud.cn/a1/49/a149ddf1f0132c227019855a0b671ceb_386x240.jpg) 圖：`QListWidget` ## `QProgressBar` `QProgressBar`用于向用戶指示操作進度。 `progressbar.h` ```cpp #pragma once #include <QWidget> #include <QProgressBar> #include <QPushButton> class ProgressBarEx : public QWidget { Q_OBJECT public: ProgressBarEx(QWidget *parent = 0); private: int progress; QTimer *timer; QProgressBar *pbar; QPushButton *startBtn; QPushButton *stopBtn; static const int DELAY = 200; static const int MAX_VALUE = 100; void updateBar(); void startMyTimer(); void stopMyTimer(); }; ``` 該示例的頭文件。 `progressbar.cpp` ```cpp #include <QProgressBar> #include <QTimer> #include <QGridLayout> #include "progressbar.h" ProgressBarEx::ProgressBarEx(QWidget *parent) : QWidget(parent) { progress = 0; timer = new QTimer(this); connect(timer, &QTimer::timeout, this, &ProgressBarEx::updateBar); QGridLayout *grid = new QGridLayout(this); grid->setColumnStretch(2, 1); pbar = new QProgressBar(); grid->addWidget(pbar, 0, 0, 1, 3); startBtn = new QPushButton("Start", this); connect(startBtn, &QPushButton::clicked, this, &ProgressBarEx::startMyTimer); grid->addWidget(startBtn, 1, 0, 1, 1); stopBtn = new QPushButton("Stop", this); connect(stopBtn, &QPushButton::clicked, this, &ProgressBarEx::stopMyTimer); grid->addWidget(stopBtn, 1, 1); } void ProgressBarEx::startMyTimer() { if (progress >= MAX_VALUE) { progress = 0; pbar->setValue(0); } if (!timer->isActive()) { startBtn->setEnabled(false); stopBtn->setEnabled(true); timer->start(DELAY); } } void ProgressBarEx::stopMyTimer() { if (timer->isActive()) { startBtn->setEnabled(true); stopBtn->setEnabled(false); timer->stop(); } } void ProgressBarEx::updateBar() { progress++; if (progress <= MAX_VALUE) { pbar->setValue(progress); } else { timer->stop(); startBtn->setEnabled(true); stopBtn->setEnabled(false); } } ``` 在示例中，我們有一個`QProgressBar`和兩個按鈕。一鍵啟動計時器，計時器依次更新進度條。其他按鈕停止計時器。 ```cpp timer = new QTimer(this); connect(timer, &QTimer::timeout, this, &ProgressBarEx::updateBar); ``` `QTimer`用于控制`QProgressBar`小部件。 ```cpp pbar = new QProgressBar(); ``` 創建一個`QProgressBar`的實例。默認的最小值和最大值是 0 和 100。 ```cpp if (!timer->isActive()) { startBtn->setEnabled(false); stopBtn->setEnabled(true); timer->start(DELAY); } ``` 根據進度條的狀態，按鈕是啟用還是禁用。這是通過`setEnabled()`方法完成的。 ```cpp void ProgressBarEx::updateBar() { progress++; if (progress <= MAX_VALUE) { pbar->setValue(progress); } else { timer->stop(); startBtn->setEnabled(true); stopBtn->setEnabled(false); } } ``` 進度存儲在`progress`變量中。 `setValue()`更新進度條的當前值。 `main.cpp` ```cpp #include <QApplication> #include "progressbar.h" int main(int argc, char *argv[]) { QApplication app(argc, argv); ProgressBarEx window; window.resize(250, 150); window.setWindowTitle("QProgressBar"); window.show(); return app.exec(); } ``` 這是主文件。 ![QProgressBar](https://img.kancloud.cn/22/21/2221817f21b81c1802f23ba77addd88d_252x176.jpg) 圖：`QProgressBar` ## `QPixmap` `QPixmap`是用于處理圖像的小部件之一。它經過優化，可在屏幕上顯示圖像。在我們的代碼示例中，我們將使用`QPixmap`在窗口上顯示圖像。 `pixmap.h` ```cpp #pragma once #include <QWidget> class Pixmap : public QWidget { public: Pixmap(QWidget *parent = 0); }; ``` 該示例的頭文件。 `pixmap.cpp` ```cpp #include <QPixmap> #include <QLabel> #include <QHBoxLayout> #include "pixmap.h" Pixmap::Pixmap(QWidget *parent) : QWidget(parent) { QHBoxLayout *hbox = new QHBoxLayout(this); QPixmap pixmap("bojnice.jpg"); QLabel *label = new QLabel(this); label->setPixmap(pixmap); hbox->addWidget(label, 0, Qt::AlignTop); } ``` 我們顯示了位于斯洛伐克中部的一座著名城堡的圖像。 ```cpp QPixmap pixmap("bojnice.jpg"); QLabel *label = new QLabel(this); label->setPixmap(pixmap); ``` 我們創建一個像素圖并將其放在標簽小部件中。 `main.cpp` ```cpp #include <QApplication> #include "pixmap.h" int main(int argc, char *argv[]) { QApplication app(argc, argv); Pixmap window; window.setWindowTitle("QPixmap"); window.show(); return app.exec(); } ``` 這是主文件。 ## `QSplitter` `QSplitter`允許用戶通過拖動子控件之間的邊界來控制子控件的大小。在我們的示例中，我們顯示了由兩個拆分器組成的三個`QFrame`小部件。 `splitter.h` ```cpp #pragma once #include <QWidget> class Splitter : public QWidget { public: Splitter(QWidget *parent = 0); }; ``` 該示例的頭文件。 `splitter.cpp` ```cpp #include <QFrame> #include <QSplitter> #include <QHBoxLayout> #include "splitter.h" Splitter::Splitter(QWidget *parent) : QWidget(parent) { QHBoxLayout *hbox = new QHBoxLayout(this); QFrame *topleft = new QFrame(this); topleft->setFrameShape(QFrame::StyledPanel); QFrame *topright = new QFrame(this); topright->setFrameShape(QFrame::StyledPanel); QSplitter *splitter1 = new QSplitter(Qt::Horizontal, this); splitter1->addWidget(topleft); splitter1->addWidget(topright); QFrame *bottom = new QFrame(this); bottom->setFrameShape(QFrame::StyledPanel); QSplitter *splitter2 = new QSplitter(Qt::Vertical, this); splitter2->addWidget(splitter1); splitter2->addWidget(bottom); QList<int> sizes({50, 100}); splitter2->setSizes(sizes); hbox->addWidget(splitter2); } ``` 在示例中，我們有三個框架小部件和兩個拆分器小部件。 ```cpp QSplitter *splitter1 = new QSplitter(Qt::Horizontal, this); splitter1->addWidget(topleft); splitter1->addWidget(topright); ``` 我們創建一個拆分器小部件，并將兩個框架小部件添加到拆分器中。 ```cpp QSplitter *splitter2 = new QSplitter(Qt::Vertical, this); splitter2->addWidget(splitter1); ``` 我們還可以將拆分器添加到另一個拆分器小部件。 ```cpp QList<int> sizes({50, 100}); splitter2->setSizes(sizes); ``` 使用`setSizes()`方法，我們設置拆分器的子窗口小部件的大小。 `main.cpp` ```cpp #include <QDesktopWidget> #include <QApplication> #include "splitter.h" int main(int argc, char *argv[]) { QApplication app(argc, argv); Splitter window; window.resize(350, 300); window.setWindowTitle("QSplitter"); window.show(); return app.exec(); } ``` 這是主文件。 ![QSplitter](https://img.kancloud.cn/76/b6/76b684b6be4997651a1caf78f710c38a_352x326.jpg) 圖：`QSplitter` 在某些桌面主題中，拆分器可能無法很好地顯示。 ## `QTableWidget` `QTableWidget`是電子表格應用中使用的唯一窗口小部件。（也稱為網格小部件）。它是較復雜的小部件之一。在這里，我們僅在窗口上顯示小部件。 `table.h` ```cpp #pragma once #include <QWidget> class Table : public QWidget { public: Table(QWidget *parent = 0); }; ``` 該示例的頭文件。 `table.cpp` ```cpp #include <QHBoxLayout> #include <QTableWidget> #include "table.h" Table::Table(QWidget *parent) : QWidget(parent) { QHBoxLayout *hbox = new QHBoxLayout(this); QTableWidget *table = new QTableWidget(25, 25, this); hbox->addWidget(table); } ``` 該示例在窗口上顯示`QTableWidget`。 ```cpp QTableWidget *table = new QTableWidget(25, 25, this); ``` 在這里，我們創建具有 25 行 25 列的表小部件。 `main.cpp` ```cpp #include <QApplication> #include "table.h" int main(int argc, char *argv[]) { QApplication app(argc, argv); Table window; window.resize(400, 250); window.setWindowTitle("QTableWidget"); window.show(); return app.exec(); } ``` 這是主文件。 ![QTableWidget](https://img.kancloud.cn/cf/79/cf797bc45b0fad3a734f9b6d08ae413f_402x276.jpg) 圖：`QTableWidget` 在本章中，我們描述了其他幾個 Qt5 小部件。