Qt基本控件使用：按钮、标签、文本框等

一、为啥要学习基本控件？

各位小伙伴，开发Qt应用程序就像搭积木，而基本控件就是我们的"积木块"。按钮、标签、文本框这些控件是构成界面的基础，掌握它们的使用，我们才能搭建出功能丰富、交互友好的应用程序。接下来，我们就一起学习这些常用控件的用法。

二、QLabel（标签）

QLabel控件主要用于显示文本或图片，是最简单的控件之一。

1. 基本用法

#include <QLabel>// 创建标签并设置文本
QLabel *label = new QLabel("Hello World!", this);// 设置标签的位置和大小
label->setGeometry(50, 50, 200, 30);// 设置对齐方式（居中对齐）
label->setAlignment(Qt::AlignCenter);// 设置样式表（改变字体颜色和大小）
label->setStyleSheet("color: blue; font-size: 16px;");

2. 显示图片

#include <QLabel>
#include <QPixmap>// 创建标签
QLabel *imageLabel = new QLabel(this);// 加载图片
QPixmap pixmap(":/images/logo.png"); // 从资源文件加载// 调整图片大小以适应标签
pixmap = pixmap.scaled(200, 200, Qt::KeepAspectRatio);// 在标签上显示图片
imageLabel->setPixmap(pixmap);

三、QPushButton（按钮）

QPushButton是最常用的按钮控件，用户点击后会触发相应的操作。

1. 基本用法

#include <QPushButton>// 创建按钮
QPushButton *button = new QPushButton("点击我", this);// 设置按钮位置和大小
button->setGeometry(100, 100, 100, 30);// 连接按钮的点击信号到槽函数
connect(button, &QPushButton::clicked, [=]() {// 按钮被点击后执行的代码qDebug() << "按钮被点击了";
});

2. 设置图标

#include <QIcon>// 设置按钮图标
button->setIcon(QIcon(":/images/button_icon.png"));// 设置图标大小
button->setIconSize(QSize(20, 20));

3. 扁平按钮

// 设置为扁平按钮（无边框）
button->setFlat(true);

四、QLineEdit（单行文本框）

QLineEdit用于输入单行文本，比如用户名、密码等。

1. 基本用法

#include <QLineEdit>// 创建文本框
QLineEdit *lineEdit = new QLineEdit(this);// 设置位置和大小
lineEdit->setGeometry(100, 150, 200, 30);// 设置提示文本
lineEdit->setPlaceholderText("请输入用户名");// 获取文本框中的内容
QString text = lineEdit->text();// 设置文本框中的内容
lineEdit->setText("默认文本");// 监听文本变化信号
connect(lineEdit, &QLineEdit::textChanged, [=](const QString &text) {qDebug() << "文本已变化:" << text;
});

2. 密码输入

// 设置为密码输入模式（显示圆点）
lineEdit->setEchoMode(QLineEdit::Password);

3. 文本验证

#include <QRegularExpressionValidator>// 创建正则表达式验证器（只允许输入数字）
QRegularExpressionValidator *validator = new QRegularExpressionValidator(QRegularExpression("[0-9]+"), this);// 设置验证器
lineEdit->setValidator(validator);

五、QTextEdit（多行文本框）

QTextEdit用于输入和显示多行文本，可以包含富文本（如HTML）。

1. 基本用法

#include <QTextEdit>// 创建多行文本框
QTextEdit *textEdit = new QTextEdit(this);// 设置位置和大小
textEdit->setGeometry(100, 200, 300, 150);// 设置文本
textEdit->setText("这是一个多行文本框\n可以输入多行内容");// 获取文本
QString text = textEdit->toPlainText();// 设置HTML内容
textEdit->setHtml("<h1>标题</h1><p>这是一段HTML文本</p>");

2. 监听文本变化

connect(textEdit, &QTextEdit::textChanged, [=]() {qDebug() << "文本已变化";
});

六、QComboBox（下拉列表框）

QComboBox用于提供一组选项供用户选择。

1. 基本用法

#include <QComboBox>// 创建下拉列表框
QComboBox *comboBox = new QComboBox(this);// 设置位置和大小
comboBox->setGeometry(100, 380, 200, 30);// 添加选项
comboBox->addItem("选项1");
comboBox->addItem("选项2");
comboBox->addItem("选项3");// 添加带图标的选项
comboBox->addItem(QIcon(":/images/icon.png"), "带图标的选项");// 获取当前选中的选项
QString currentText = comboBox->currentText();
int currentIndex = comboBox->currentIndex();// 监听选项变化
connect(comboBox, &QComboBox::currentIndexChanged, [=](int index) {qDebug() << "选中了第" << index << "项:" << comboBox->itemText(index);
});

2. 设置为可编辑

// 设置为可编辑模式（用户可以输入自定义内容）
comboBox->setEditable(true);

七、QCheckBox（复选框）

QCheckBox用于提供二选一或多选一的选择。

1. 基本用法

#include <QCheckBox>// 创建复选框
QCheckBox *checkBox = new QCheckBox("我同意条款", this);// 设置位置
checkBox->setGeometry(100, 420, 200, 30);// 检查复选框是否被选中
bool isChecked = checkBox->isChecked();// 监听状态变化
connect(checkBox, &QCheckBox::stateChanged, [=](int state) {if (state == Qt::Checked) {qDebug() << "复选框被选中";} else {qDebug() << "复选框被取消选中";}
});

2. 半选中状态

// 设置为可半选中状态
checkBox->setTristate(true);// 获取半选中状态
Qt::CheckState state = checkBox->checkState();
if (state == Qt::PartiallyChecked) {qDebug() << "半选中状态";
}

八、QRadioButton（单选按钮）

QRadioButton用于在一组选项中选择一个。

1. 基本用法

#include <QRadioButton>
#include <QButtonGroup>// 创建单选按钮组
QButtonGroup *buttonGroup = new QButtonGroup(this);// 创建单选按钮
QRadioButton *radio1 = new QRadioButton("选项A", this);
QRadioButton *radio2 = new QRadioButton("选项B", this);
QRadioButton *radio3 = new QRadioButton("选项C", this);// 设置位置
radio1->setGeometry(100, 460, 100, 30);
radio2->setGeometry(220, 460, 100, 30);
radio3->setGeometry(340, 460, 100, 30);// 将单选按钮添加到按钮组
buttonGroup->addButton(radio1, 0);
buttonGroup->addButton(radio2, 1);
buttonGroup->addButton(radio3, 2);// 设置默认选中项
radio1->setChecked(true);// 监听选中状态变化
connect(buttonGroup, QOverload<int>::of(&QButtonGroup::buttonClicked),[=](int id) {qDebug() << "选中了选项" << id;
});

九、QSpinBox和QSlider（数值选择控件）

1. QSpinBox（数字选择框）

#include <QSpinBox>// 创建数字选择框
QSpinBox *spinBox = new QSpinBox(this);// 设置位置和大小
spinBox->setGeometry(100, 500, 100, 30);// 设置范围和步长
spinBox->setRange(0, 100);  // 范围0-100
spinBox->setSingleStep(5);  // 步长为5// 设置当前值
spinBox->setValue(50);// 监听值变化
connect(spinBox, QOverload<int>::of(&QSpinBox::valueChanged),[=](int value) {qDebug() << "当前值:" << value;
});

2. QSlider（滑块）

#include <QSlider>// 创建滑块（水平方向）
QSlider *slider = new QSlider(Qt::Horizontal, this);// 设置位置和大小
slider->setGeometry(220, 500, 200, 30);// 设置范围
slider->setRange(0, 100);// 设置当前值
slider->setValue(50);// 监听值变化
connect(slider, &QSlider::valueChanged, [=](int value) {qDebug() << "滑块值:" << value;
});

十、综合示例：用户登录界面

下面我们用这些基本控件做一个简单的用户登录界面。

#include <QApplication>
#include <QMainWindow>
#include <QLabel>
#include <QLineEdit>
#include <QPushButton>
#include <QCheckBox>
#include <QMessageBox>int main(int argc, char *argv[])
{QApplication a(argc, argv);// 创建主窗口QMainWindow window;window.setWindowTitle("用户登录");window.resize(400, 300);// 创建标题标签QLabel *titleLabel = new QLabel("用户登录", &window);titleLabel->setGeometry(150, 30, 100, 30);titleLabel->setAlignment(Qt::AlignCenter);titleLabel->setStyleSheet("font-size: 20px; font-weight: bold;");// 创建用户名标签和文本框QLabel *usernameLabel = new QLabel("用户名:", &window);usernameLabel->setGeometry(80, 90, 60, 30);QLineEdit *usernameEdit = new QLineEdit(&window);usernameEdit->setGeometry(150, 90, 180, 30);usernameEdit->setPlaceholderText("请输入用户名");// 创建密码标签和文本框QLabel *passwordLabel = new QLabel("密码:", &window);passwordLabel->setGeometry(80, 130, 60, 30);QLineEdit *passwordEdit = new QLineEdit(&window);passwordEdit->setGeometry(150, 130, 180, 30);passwordEdit->setPlaceholderText("请输入密码");passwordEdit->setEchoMode(QLineEdit::Password);// 创建记住密码复选框QCheckBox *rememberBox = new QCheckBox("记住密码", &window);rememberBox->setGeometry(150, 170, 100, 30);// 创建登录按钮QPushButton *loginButton = new QPushButton("登录", &window);loginButton->setGeometry(150, 210, 100, 30);// 连接登录按钮的点击事件QObject::connect(loginButton, &QPushButton::clicked, [&]() {QString username = usernameEdit->text();QString password = passwordEdit->text();if (username == "admin" && password == "123456") {QMessageBox::information(&window, "登录成功", "欢迎回来，管理员！");} else {QMessageBox::warning(&window, "登录失败", "用户名或密码错误！");}});window.show();return a.exec();
}

十一、总结

通过这篇文章，我们学习了Qt中几种常用的基本控件：QLabel（标签）、QPushButton（按钮）、QLineEdit（单行文本框）、QTextEdit（多行文本框）、QComboBox（下拉列表框）、QCheckBox（复选框）、QRadioButton（单选按钮）、QSpinBox和QSlider（数值选择控件）。这些控件是构成Qt应用程序界面的基础，掌握它们的使用方法，我们就能开发出功能丰富、交互友好的应用程序。在实际开发中，我们还可以根据需要自定义控件的外观和行为，让应用程序更加个性化。