目录
2.2 QFontComboBox组件-通过下拉选项打印出指定字体文本
Input Widgets部件部件较多,将分为三篇文章介绍
文章1(本文):ComboBox (组合框)、FontComboBox (字体组合框)、LineEdit (单行编辑框)、TextEdit (文本编辑框)、PlainTextEdit (纯文本编辑框)
文章2(链接):SpinBox (数字旋转框)、DoubleSpinBox (双精度数字旋转框)、TimeEdit (时间编辑框):、DateEdit (日期编辑框)、DateTimeEdit (日期时间编辑框):
文章3(链接):Dial (数字拨盘框)、HorizontalScrollBar (水平滚动条)、VerticalScrollBar (垂直滚动条): 、HorizontalSlider (水平滑动条)、VerticalSlider (垂直滑动条)、KeySequenceEdit (按键序列编辑框)
1 Input Widgets简介
Qt的Input Widgets部件是一系列专门用于数据输入的界面元素。它们允许用户通过图形界面与应用程序进行交互,并提供不同的数据输入方式。以下是一些常见的Input Widgets部件:
-
ComboBox (组合框): QComboBox 继承 QWidget 类,被 QFontComboBox 类继承。允许用户从下拉列表中选择一个选项。它可以是可编辑的,允许用户输入一个值,也可以是只读的。
-
FontComboBox (字体组合框): QFontComboBox 继承 QComboBox。是一种特殊的ComboBox,列出了系统中可用的字体,允许用户选择文本的字体。
-
LineEdit (单行编辑框): QLineEdit 继承 QWidget。提供了一个单行文本输入框,用户可以输入和编辑一行字符串。
-
TextEdit (文本编辑框): QTextEdit 继承 QAbstractScrollArea,被 QTextBrowser 继承。一个多行文本编辑器,支持富文本和纯文本编辑,允许用户输入和编辑多行文本,包括格式化文本。
-
PlainTextEdit (纯文本编辑框): 类似于TextEdit,但专门用于编辑纯文本,不支持文本格式化。
-
SpinBox (数字旋转框): QSpinBox 继承 QAbstractSpinBox。允许用户通过点击箭头或输入选择一个整数值。
-
DoubleSpinBox (双精度数字旋转框): QDoubleSpinBox 继承 QAbstractSpinBox。与SpinBox类似,但用于选择一个浮点数值。
-
TimeEdit (时间编辑框): QTimeEdit 继承 QDateTimeEdit。允许用户输入和选择一个特定的时间。
-
DateEdit (日期编辑框): QDateEdit 继承 QDateTimeEdit。允许用户输入和选择一个特定的日期。
-
DateTimeEdit (日期时间编辑框): 结合了DateEdit和TimeEdit的功能,允许用户输入和选择一个特定的日期和时间。
-
Dial (数字拨盘框): 提供了一个旋转拨盘控件,用于选择数值,常用于模拟选择器或调节器。
-
HorizontalScrollBar (水平滚动条): QScrollBar 继承 QAbstractSlider,下同。一种水平滚动条,允许用户通过滑动来水平导航。
-
VerticalScrollBar (垂直滚动条): 一种垂直滚动条,允许用户通过滑动来垂直导航。
-
HorizontalSlider (水平滑动条): 水平方向的滑动条,允许用户通过拖动选择一个数值。
-
VerticalSlider (垂直滑动条): 垂直方向的滑动条,允许用户通过拖动选择一个数值。
-
KeySequenceEdit (按键序列编辑框): QKeySequenceEdit 继承 QWidget。允许用户输入和编辑键盘快捷键序列。
2 如何使用Input Widgets部件
2.1 QComboBox组件-通过下拉按钮选择省份
通过点击下拉按钮的项选择省份,选择其中一项,然后打印出当前选择项的内容。按照文章新建项目(Qt教程 — 1.3 如何创建Qt项目-CSDN博客)。
(1)在头文件“mainwindow.h”修改代码,具体代码如下。1)导入QComboBox文件 —> 2)声明一个 QComboBox 对象和对应槽函数。完整代码如下。
#ifndef MAINWINDOW_H
#define MAINWINDOW_H
#include <QMainWindow>
// 引入 QComboBox
#include <QComboBox>
QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACE
class MainWindow : public QMainWindow
{
Q_OBJECT
public:
MainWindow(QWidget *parent = nullptr);
~MainWindow();
private:
Ui::MainWindow *ui;
// 声明一个 QComboBox 对象
QComboBox *comboBox;
private slots:
// 声明 QComboBox 对象的槽函数
void comboBoxIndexChanged(int);
};
#endif // MAINWINDOW_H
(2)在文件“mainwindow.cpp”修改代码,具体代码如下。1)导入QDebug文件和QStringList文件 —> 2)设置主窗体的显示位置与大小。—> 3)实例化comboBox对象,设置 comboBox 的显示位置与大小。—> 4)创建字符串列表,列出所有省份,添加省份到comboBox。—>5)信号槽连接—>6)写出槽函数,打印出选择的省份。添加完整代码如下。
#include "mainwindow.h"
#include "ui_mainwindow.h"
// 引入 QDebug
#include <QDebug>
#include <QStringList>
MainWindow::MainWindow(QWidget *parent)
: QMainWindow(parent)
, ui(new Ui::MainWindow)
{
ui->setupUi(this);
// 设置主窗体的显示位置与大小
this->setGeometry(0, 0, 800, 480);
// 实例化对象
comboBox = new QComboBox(this);
// 设置 comboBox 的显示位置与大小
comboBox->setGeometry(20, 5, 150, 30);
// 所有省份
QStringList provinces = {"广东(默认省份)", "湖南", "四川", "北京", "天津", "上海", "重庆",
"河北", "山西", "辽宁", "吉林", "黑龙江", "江苏",
"浙江", "安徽", "福建", "江西", "山东", "河南",
"湖北", "广西", "海南", "贵州", "云南", "西藏",
"陕西", "甘肃", "青海", "宁夏", "新疆", "内蒙古",
"香港", "澳门", "台湾"};
// 添加省份到comboBox
for (const QString &province : provinces) {
comboBox->addItem(province);
}
// 信号槽连接
connect(comboBox, SIGNAL(currentIndexChanged(int)), this, SLOT(comboBoxIndexChanged(int)));
}
MainWindow::~MainWindow()
{
delete ui;
}
void MainWindow::comboBoxIndexChanged(int index)
{
// 打印出选择的省份
qDebug() << "您选择的省份是" << comboBox->itemText(index) << endl;
}
(3)程序编译运行的结果如下,当点击下拉选择框选择省份时,槽函数将打印出您选择的省份。可以看到列表超出了窗口边界,后续会进一步优化。
2.2 QFontComboBox组件-通过下拉选项打印出指定字体文本
(1)在头文件“mainwindow.h”修改代码,具体代码如下。1)导入<QFontComboBox>文件和 <QLabel>文件—> 2)声明一个QFontComboBox和Label对象和对应槽函数。完整代码如下(注意:代码为本节可单独运行的代码,实验结果为和前节结合的代码,后同)。
#ifndef MAINWINDOW_H
#define MAINWINDOW_H
#include <QMainWindow>
// 引入QFontComboBox
#include <QFontComboBox>
// 引入QLable
#include <QLabel>
QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACE
class MainWindow : public QMainWindow
{
Q_OBJECT
public:
MainWindow(QWidget *parent = nullptr);
~MainWindow();
private:
// 声明一个 QFontComboBox 对象
QFontComboBox *fontComboBox;
// 声明一个 Label 对象,用于显示当前字体变化
QLabel *label;
private slots:
// 声明 QFontComboBox 对象使用的槽函数
void fontComboBoxFontChanged(QFont);
};
#endif // MAINWINDOW_H
(2)在文件“mainwindow.cpp”修改代码,具体代码如下。 1)设置主窗体的显示位置与大小。—> 3)实例化FontComboBox和label对象,设置fontComboBox 和label的显示位置与大小。—>5)信号槽连接—>6)写出槽函数,打印指定字体文本。添加完整代码如下。
#include "mainwindow.h"
#include "ui_mainwindow.h"
// 引入 QDebug
#include <QDebug>
#include <QStringList>
MainWindow::MainWindow(QWidget *parent)
: QMainWindow(parent)
, ui(new Ui::MainWindow)
{
ui->setupUi(this);
// 设置主窗体的显示位置与大小
this->setGeometry(0, 0, 800, 480);
// 设置 comboBox 的显示位置与大小
comboBox->setGeometry(20, 5, 140, 30);
comboBox->setMaxVisibleItems(10); // 设置最大可见项数为10
// 实例化对象
fontComboBox = new QFontComboBox(this);
label = new QLabel(this);
// 设置显示的位置与大小
fontComboBox->setGeometry(200, 5, 200, 30);
label->setGeometry(200, 55, 300, 50);
// 信号与槽连接
connect(fontComboBox, SIGNAL(currentFontChanged(QFont)), this, SLOT(fontComboBoxFontChanged(QFont)));
}
MainWindow::~MainWindow()
{
delete ui;
}
//fontComboBoxFontChanged槽函数实现
void MainWindow::fontComboBoxFontChanged(QFont font)
{
// 将 label 里的文本内容设置为所选择的字体
label->setFont(font);
// 定义一个字符串接收当前项的字体
QString str = "我爱中国!\n 设置的字体为: " +fontComboBox->itemText(fontComboBox->currentIndex());
// 将字符串的内容作为 label 的显示内容
label->setText(str);
}
(3)程序编译运行的结果如下,当点击 AR PL UKai CNa 字体组合框选择字体后, Label 标签显示的字体将改变为当前所选择的字体。
2.3 QLineEdit组件-打印出当前单行输入框的内容
通过点击下拉按钮的项,单行输入框,选择其中一项,然后打印出当前选择项的内容。
(1)在头文件“mainwindow.h”修改代码,具体代码如下。1)导入<QDebug>文件和<QStringList>文件—> 2)声明QLineEdit、QPushButton和QLabell对象和对应槽函数。完整代码如下。
#ifndef MAINWINDOW_H
#define MAINWINDOW_H
#include <QMainWindow>
// 引入QLable
#include <QLabel>
// 引入QLineEdit和QPushButton
#include <QLineEdit>
#include <QPushButton>
QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACE
class MainWindow : public QMainWindow
{
Q_OBJECT
public:
MainWindow(QWidget *parent = nullptr);
~MainWindow();
private:
Ui::MainWindow *ui;
// 声明一个 QLineEdit 对象
QLineEdit *lineEdit;
// 声明一个 QPushButton 对象
QPushButton *pushButton;
// 声明一个 QLabel 对象
QLabel *label_1;
private slots:
// 声明一个槽函数,响应 pushButton 的 clicked 事件
void pushButtonClicked();
};
#endif // MAINWINDOW_H
(2)在文件“mainwindow.cpp”修改代码,具体代码如下。 1)设置主窗体的显示位置与大小。—> 2)实例化QLineEdit和QPushButtonl对象,设置lineEdit和pushButton的显示位置与大小。—>3)设置确认按钮和打印文字—>4)信号槽连接—>5)写出槽函数,打印输入文本。添加完整代码如下。
#include "mainwindow.h"
#include "ui_mainwindow.h"
MainWindow::MainWindow(QWidget *parent)
: QMainWindow(parent)
, ui(new Ui::MainWindow)
{
ui->setupUi(this);
// 设置主窗体的显示位置与大小
this->setGeometry(0, 0, 800, 480);
/***** 3 *****/
// 实例化对象
lineEdit = new QLineEdit(this);
pushButton = new QPushButton(this);
// 设置显示的位置与大小
lineEdit->setGeometry(450, 10, 200, 30);
pushButton->setGeometry(650, 10, 50, 30);
//设置确认按钮和打印文字
pushButton->setText("确认");
label = new QLabel(this);
label->setGeometry(450, 40, 400, 30);
label->setText("您输入的内容是: ");
// 信号槽连接
connect(pushButton,SIGNAL(clicked()), this, SLOT(pushButtonClicked()));
}
MainWindow::~MainWindow()
{
delete ui;
}
void MainWindow::pushButtonClicked()
{
// 字符串变量
QString str;
str = "您输入的内容是: ";
str += lineEdit->text();
// 设置 label 里的文本显示内容
label->setText(str);
// 在点击了确认键之后清空 lineEdit 单行输入框
lineEdit->clear();
}
(3)程序编译运行的结果如下,当在QLineEdit单行输入框内输入文本内容后,单击QPushButton
确认按钮后, QLabel 的文本内容将显示您所输入的内容。然后 QLineEdit 将清空,可再次输入。
2.4 QTextEdit组件-演示文本的输入
用一个 QTextEdit 来演示文本的输入,用两个QPushButton 来模拟文本编辑的全选与清除。在 QTextEdit 里也可用键盘的快捷键(如 Ctrl+A)来完成全选,复制,粘贴等操作。 Qt 提供了全选,复制粘贴等这一类的函数方便用户操作,下面用简单的实例来演示。
(1)在头文件“mainwindow.h”修改代码,具体代码如下。1)导入<QTextEdit>、<QMainWindow>文件和<QPushButton>文件—> 2)声明QTextEdit和两个QPushButton对象和对应槽函数。完整代码如下。
#ifndef MAINWINDOW_H
#define MAINWINDOW_H
#include <QMainWindow>
#include <QTextEdit>
#include <QPushButton>
#include <QMainWindow>
QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACE
class MainWindow : public QMainWindow
{
Q_OBJECT
public:
MainWindow(QWidget *parent = nullptr);
~MainWindow();
private:
Ui::MainWindow *ui;
/* 声明一个 QTextEdit 对象 */
QTextEdit *textEdit;
/* 声明两个 QPushButton 对象 */
QPushButton *pushButtonSelectAll;
QPushButton *pushButtonClearAll;
private slots:
// 声明两个槽函数,响应按钮点击响应的事件
void pushButtonSelectAllClicked();
void pushButtonClearAllClicked();
};
#endif // MAINWINDOW_H
(2)在文件“mainwindow.cpp”修改代码,具体代码如下。 1)设置主窗体的显示位置与大小。—> 2)实例化QLineEdit和QPushButtonl对象,设置lineEdit和pushButton的显示位置与大小。—>3)设置确认按钮和打印文字—>4)信号槽连接—>5)写出槽函数,打印输入文本。添加完整代码如下。
#include "mainwindow.h"
#include "ui_mainwindow.h"
MainWindow::MainWindow(QWidget *parent)
: QMainWindow(parent)
, ui(new Ui::MainWindow)
{
ui->setupUi(this);
// 设置主窗体的显示位置与大小
this->setGeometry(0, 0, 800, 480);
/***** 4 *****/
// 实例和对象,设置位置和显示大小
textEdit = new QTextEdit(this);
textEdit->setGeometry(0, 100, 200, 100);
// 实例和对象,设置位置和显示大小,设置文本
pushButtonSelectAll = new QPushButton(this);
pushButtonSelectAll->setGeometry(50, 200, 50, 20);
pushButtonSelectAll->setText("全选");
// 实例和对象,设置位置和显示大小,设置文本
pushButtonClearAll = new QPushButton(this);
pushButtonClearAll->setGeometry(100, 200, 50, 20);
pushButtonClearAll->setText("清除");
// 信号槽连接
connect(pushButtonSelectAll, SIGNAL(clicked()), this,SLOT(pushButtonSelectAllClicked()));
connect(pushButtonClearAll, SIGNAL(clicked()), this,SLOT(pushButtonClearAllClicked()));
}
MainWindow::~MainWindow()
{
delete ui;
}
void MainWindow::pushButtonClearAllClicked()
{
// 清空 textEdit 里的文本内容
textEdit->clear();
}
(3)程序编译运行的结果如下,在编辑框里输入文字后,点击按钮全选,点击清除则清除编辑
框内的全部内容。如下图为点击全选的效果
2.5 QPlainTextEdit组件-文本浏览编辑器
用一个 QPlainTextEdit 来读取本当前工程里的一个文件,并用一个 RadioButton 里将 QPlainTextEdit 设为只读。
(1)在头文件“mainwindow.h”修改代码,具体代码如下。1)导入<QPlainTextEdit>、<QRadioButton>文件和<QMainWindow>文件—> 2)声明QPlainTextEdit和QPlainTextEdit对象和对应槽函数。完整代码如下。
#ifndef MAINWINDOW_H
#define MAINWINDOW_H
#include <QMainWindow>
//引入QPlainTextEdit和QRadioButton
#include <QPlainTextEdit>
#include <QRadioButton>
QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACE
class MainWindow : public QMainWindow
{
Q_OBJECT
public:
MainWindow(QWidget *parent = nullptr);
~MainWindow();
private:
Ui::MainWindow *ui;
// 声明对象
QPlainTextEdit *plainTextEdit;
QRadioButton *radioButton;
private slots:
// 声明槽函数
void radioButtonClicked();
};
#endif // MAINWINDOW_H
(2)在文件“mainwindow.cpp”修改代码,具体代码如下。1)引入<QDir>、<QTextStream>和<QCoreApplication>文件—>2)设置主窗体的显示位置与大小。—> 3)实例化QPlainTextEdit
和QRadioButton对象,设置plainTextEdit和plainTextEdit的显示位置与大小。—>3)读取指定文件—>4)信号槽连接—>5)写出槽函数,打印输入文本。添加完整代码如下。
#include "mainwindow.h"
#include "ui_mainwindow.h"
// 引入QDir、QTextStream和QCoreApplication
#include <QDir>
#include <QTextStream>
#include <QCoreApplication>
MainWindow::MainWindow(QWidget *parent)
: QMainWindow(parent)
, ui(new Ui::MainWindow)
{
ui->setupUi(this);
// 设置主窗体的显示位置与大小
this->setGeometry(0, 0, 800, 480);
/***** 5 *****/
plainTextEdit = new QPlainTextEdit(this);
plainTextEdit->setGeometry(200, 100, 200, 100);
radioButton = new QRadioButton(this);
radioButton->setGeometry(250, 200, 100, 20);
radioButton->setText("只读模式");
// 打开可执行程序目录里的 moc_mainwindow.cpp
QFile file("moc_mainwindow.cpp");
// 以只读模式打开,但是可以在 plainTextEdit 里编辑
file.open((QFile::ReadOnly | QFile::Text));
// 加载到文件流
QTextStream in(&file);
// 从文本流中读取全部
plainTextEdit->insertPlainText(in.readAll());
// 信号槽连接
connect(radioButton, SIGNAL(clicked()), this, SLOT(radioButtonClicked()));
}
MainWindow::~MainWindow()
{
delete ui;
}
void MainWindow::radioButtonClicked()
{
// 检查 radioButton 是否选中
if(radioButton->isChecked()) {
// 设置为只读模式/
plainTextEdit->setReadOnly(true);
} else {
// 设置为非只读模式
plainTextEdit->setReadOnly(false);
}
}
(3)程 序 编 译 运 行 的 结 果 如 下 , 当 程 序 正 常 运 行 后 会 打 开 程 序 当 前 路 径 下 的 ”
moc_mainwindow.cpp” 文 件 , 且在 QPlainTextEdit 编辑框下是可编辑的, 当选中程序界面上的只读模式时, QPlainTextEdit 编辑框就不可以再编辑。相反可以取消只读模式则可以再编辑。