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应用程序界面的基础，掌握它们的使用方法，我们就能开发出功能丰富、交互友好的应用程序。在实际开发中，我们还可以根据需要自定义控件的外观和行为，让应用程序更加个性化。