QT入门第三天：常用控件详解与表单实战 | 零基础学QT

QT入门第三天：常用控件详解与表单实战

前言

前两天我们学习了QT环境搭建和信号与槽机制，今天我们来学习QT中最常用的控件。

做GUI界面就像搭积木，而控件就是一块块积木。掌握了常用控件，你就能拼出各种各样的界面了！

今天我们会学习6个最常用的控件，最后用它们做一个完整的用户注册表单。

一、QLabel - 标签控件

1.1 什么是QLabel

QLabel是最基础的控件，用来显示文本或图片。它不能被用户编辑，纯展示用。

常见用途：

• 显示提示文字（如"用户名："）
• 显示图片
• 显示超链接

1.2 基本用法

#include <QLabel>

// 创建标签
QLabel *label = new QLabel("我是一个标签", this);

// 设置文本
label->setText("新的文本内容");

// 获取文本
QString text = label->text();

// 设置对齐方式（居中）
label->setAlignment(Qt::AlignCenter);

// 设置字体
QFont font("微软雅黑", 16, QFont::Bold);
label->setFont(font);

// 设置文字颜色
label->setStyleSheet("color: red;");

1.3 显示图片

QLabel *imageLabel = new QLabel(this);
imageLabel->setPixmap(QPixmap(":/images/logo.png"));
imageLabel->setScaledContents(true);  // 图片自适应标签大小

1.4 常用信号

QLabel也有信号，比如点击链接时：

// 打开外部链接
label->setOpenExternalLinks(true);
label->setText("<a href='https://www.qt.io'>访问QT官网</a>");

二、QLineEdit - 单行输入框

2.1 什么是QLineEdit

QLineEdit是单行文本输入框，用户可以在里面输入一行文字。

常见用途：

• 用户名输入
• 密码输入
• 搜索框
• 手机号、邮箱等短文本输入

2.2 基本用法

#include <QLineEdit>

// 创建输入框
QLineEdit *edit = new QLineEdit(this);

// 设置提示文字（灰色占位符）
edit->setPlaceholderText("请输入用户名");

// 设置/获取内容
edit->setText("默认内容");
QString text = edit->text();

// 清空内容
edit->clear();

// 设置最大输入长度
edit->setMaxLength(20);

// 设置只读
edit->setReadOnly(true);

2.3 密码模式

这是非常实用的功能，输入密码时用：

QLineEdit *passwordEdit = new QLineEdit(this);
passwordEdit->setEchoMode(QLineEdit::Password);  // 密码模式，显示圆点

其他显示模式：

• QLineEdit::Normal：正常显示（默认）
• QLineEdit::Password：密码模式，显示圆点
• QLineEdit::NoEcho：什么都不显示
• QLineEdit::PasswordEchoOnEdit：编辑时显示，失去焦点后变成密码模式

2.4 常用信号

// 文本变化时触发（每次输入都触发）
connect(edit, &QLineEdit::textChanged, this, [=](const QString &text){
    qDebug() << "文本变成了：" << text;
});

// 编辑完成时触发（按回车或失去焦点）
connect(edit, &QLineEdit::editingFinished, this, [=](){
    qDebug() << "编辑完成";
});

// 按下回车键时触发
connect(edit, &QLineEdit::returnPressed, this, [=](){
    qDebug() << "按下了回车键";
});

三、QTextEdit - 多行文本编辑框

3.1 什么是QTextEdit

QTextEdit是多行文本编辑器，可以显示和编辑多行文本，还支持富文本（HTML格式）。

常见用途：

• 大段文字输入（如备注、简介）
• 显示富文本内容
• 简单的HTML编辑器

3.2 基本用法

#include <QTextEdit>

// 创建文本编辑框
QTextEdit *textEdit = new QTextEdit(this);

// 设置/获取内容
textEdit->setPlainText("这是纯文本内容\n可以换行哦");
QString text = textEdit->toPlainText();

// 设置HTML内容
textEdit->setHtml("<h1>标题</h1><p>这是<b>加粗</b>的文字</p>");

// 追加内容
textEdit->append("追加一行文字");

// 清空
textEdit->clear();

3.3 常用属性

// 设置只读
textEdit->setReadOnly(true);

// 获取字符数
int count = textEdit->document()->characterCount();

// 移动光标到末尾
textEdit->moveCursor(QTextCursor::End);

四、QCheckBox - 复选框

4.1 什么是QCheckBox

QCheckBox是复选框，用户可以勾选或取消勾选。它的特点是：多个选项之间互不影响，可以同时选中多个。

常见用途：

• 同意用户协议
• 选择兴趣爱好（可多选）
• 功能开关选项

4.2 基本用法

#include <QCheckBox>

// 创建复选框
QCheckBox *checkBox = new QCheckBox("我同意用户协议", this);

// 设置/获取选中状态
checkBox->setChecked(true);  // 设为选中
bool isChecked = checkBox->isChecked();  // 获取状态

// 设置三态（可选、不选、半选）
checkBox->setTristate(true);
checkBox->setCheckState(Qt::PartiallyChecked);  // 半选状态

4.3 常用信号

// 状态变化时触发
connect(checkBox, &QCheckBox::stateChanged, this, [=](int state){
    if (state == Qt::Checked) {
        qDebug() << "被选中了";
    } else if (state == Qt::Unchecked) {
        qDebug() << "被取消了";
    }
});

// 点击时触发
connect(checkBox, &QCheckBox::clicked, this, [=](bool checked){
    qDebug() << "点击了，当前状态：" << checked;
});

五、QRadioButton - 单选框

5.1 什么是QRadioButton

QRadioButton是单选框，它的特点是：同一组内只能选中一个，选了另一个，之前的就会自动取消。

常见用途：

• 选择性别（男/女）
• 选择年龄段
• 从多个选项中选一个

5.2 基本用法

#include <QRadioButton>

// 创建单选框
QRadioButton *radio1 = new QRadioButton("选项A", this);
QRadioButton *radio2 = new QRadioButton("选项B", this);
QRadioButton *radio3 = new QRadioButton("选项C", this);

// 设置默认选中
radio1->setChecked(true);

// 检查是否选中
if (radio1->isChecked()) {
    qDebug() << "选中了选项A";
}

💡 注意：同一个父窗口下的单选框会自动成为一组。如果需要多组单选，要用QButtonGroup或者放在不同的容器（如QGroupBox）里。

5.3 常用信号

// 点击时触发
connect(radio1, &QRadioButton::clicked, this, [=](bool checked){
    if (checked) {
        qDebug() << "选中了选项A";
    }
});

六、QComboBox - 下拉框

6.1 什么是QComboBox

QComboBox是下拉选择框，点击后会弹出一个列表，用户可以从中选择一项。它比单选框更节省空间。

常见用途：

• 选择城市/省份
• 选择学历
• 选择分类
• 选项比较多的时候

6.2 基本用法

#include <QComboBox>

// 创建下拉框
QComboBox *comboBox = new QComboBox(this);

// 添加选项
comboBox->addItem("小学");
comboBox->addItem("初中");
comboBox->addItem("高中");
comboBox->addItem("本科");
comboBox->addItem("硕士");
comboBox->addItem("博士");

// 批量添加
QStringList items;
items << "北京" << "上海" << "广州" << "深圳";
comboBox->addItems(items);

// 获取当前选中的文本
QString text = comboBox->currentText();

// 获取当前选中的索引（从0开始）
int index = comboBox->currentIndex();

// 设置当前选中
comboBox->setCurrentIndex(3);      // 按索引
comboBox->setCurrentText("本科");  // 按文本

6.3 其他常用操作

// 获取选项总数
int count = comboBox->count();

// 插入选项
comboBox->insertItem(2, "插入的选项");  // 在第3个位置插入

// 删除选项
comboBox->removeItem(2);  // 删除第3个

// 清空所有选项
comboBox->clear();

// 设置是否可编辑（用户可以自己输入）
comboBox->setEditable(true);

6.4 常用信号

// 当前选项变化时触发（传递索引）
connect(comboBox, &QComboBox::currentIndexChanged, this, [=](int index){
    qDebug() << "选中了第" << index << "项";
});

// 当前选项变化时触发（传递文本）
connect(comboBox, &QComboBox::currentTextChanged, this, [=](const QString &text){
    qDebug() << "选中了：" << text;
});

七、综合实战：用户注册表单

学了这么多控件，我们来做一个完整的用户注册表单，把今天学的控件都用上！

7.1 需求分析

我们要做一个注册界面，包含：

• 用户名输入框（QLineEdit）
• 密码输入框（QLineEdit，密码模式）
• 性别选择（QRadioButton，男/女）
• 学历选择（QComboBox，下拉框）
• 兴趣爱好（QCheckBox，多选）
• 个人简介（QTextEdit，多行）
• 同意协议（QCheckBox，必须勾选）
• 注册按钮（QPushButton）
• 标签提示（QLabel）

7.2 完整代码

创建一个新的QT Widgets项目，把mainwindow.cpp改成这样：

#include "mainwindow.h"
#include <QLabel>
#include <QLineEdit>
#include <QRadioButton>
#include <QComboBox>
#include <QCheckBox>
#include <QTextEdit>
#include <QPushButton>
#include <QMessageBox>
#include <QButtonGroup>

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
{
    setWindowTitle("用户注册");
    resize(500, 550);

    int y = 20;  // 纵坐标，用来控制每个控件的位置

    // ===== 1. 用户名 =====
    QLabel *userLabel = new QLabel("用户名：", this);
    userLabel->setGeometry(50, y, 60, 30);

    QLineEdit *userEdit = new QLineEdit(this);
    userEdit->setGeometry(120, y, 300, 30);
    userEdit->setPlaceholderText("请输入用户名");
    y += 50;

    // ===== 2. 密码 =====
    QLabel *pwdLabel = new QLabel("密  码：", this);
    pwdLabel->setGeometry(50, y, 60, 30);

    QLineEdit *pwdEdit = new QLineEdit(this);
    pwdEdit->setGeometry(120, y, 300, 30);
    pwdEdit->setPlaceholderText("请输入密码");
    pwdEdit->setEchoMode(QLineEdit::Password);  // 密码模式
    y += 50;

    // ===== 3. 性别 =====
    QLabel *genderLabel = new QLabel("性  别：", this);
    genderLabel->setGeometry(50, y, 60, 30);

    QRadioButton *maleRadio = new QRadioButton("男", this);
    maleRadio->setGeometry(120, y, 60, 30);
    maleRadio->setChecked(true);  // 默认选中男

    QRadioButton *femaleRadio = new QRadioButton("女", this);
    femaleRadio->setGeometry(200, y, 60, 30);
    y += 50;

    // ===== 4. 学历 =====
    QLabel *eduLabel = new QLabel("学  历：", this);
    eduLabel->setGeometry(50, y, 60, 30);

    QComboBox *eduCombo = new QComboBox(this);
    eduCombo->setGeometry(120, y, 300, 30);
    eduCombo->addItems(QStringList() << "高中及以下" << "大专" << "本科" << "硕士" << "博士");
    eduCombo->setCurrentIndex(2);  // 默认选中本科
    y += 50;

    // ===== 5. 兴趣爱好 =====
    QLabel *hobbyLabel = new QLabel("爱  好：", this);
    hobbyLabel->setGeometry(50, y, 60, 30);

    QCheckBox *readCheck = new QCheckBox("阅读", this);
    readCheck->setGeometry(120, y, 60, 30);

    QCheckBox *musicCheck = new QCheckBox("音乐", this);
    musicCheck->setGeometry(200, y, 60, 30);

    QCheckBox *sportCheck = new QCheckBox("运动", this);
    sportCheck->setGeometry(280, y, 60, 30);

    QCheckBox *travelCheck = new QCheckBox("旅行", this);
    travelCheck->setGeometry(360, y, 60, 30);
    y += 50;

    // ===== 6. 个人简介 =====
    QLabel *descLabel = new QLabel("简  介：", this);
    descLabel->setGeometry(50, y, 60, 30);

    QTextEdit *descEdit = new QTextEdit(this);
    descEdit->setGeometry(120, y, 300, 100);
    descEdit->setPlaceholderText("请简单介绍一下自己...");
    y += 120;

    // ===== 7. 同意协议 =====
    QCheckBox *agreeCheck = new QCheckBox("我已阅读并同意用户协议和隐私政策", this);
    agreeCheck->setGeometry(50, y, 350, 30);
    y += 50;

    // ===== 8. 注册按钮 =====
    QPushButton *registerBtn = new QPushButton("立即注册", this);
    registerBtn->setGeometry(150, y, 200, 40);
    registerBtn->setStyleSheet("background-color: #0099ff; color: white; font-size: 16px; border-radius: 5px;");

    // ===== 9. 注册逻辑 =====
    connect(registerBtn, &QPushButton::clicked, this, [=](){
        // 收集信息
        QString username = userEdit->text();
        QString password = pwdEdit->text();
        QString gender = maleRadio->isChecked() ? "男" : "女";
        QString education = eduCombo->currentText();

        // 收集爱好
        QStringList hobbies;
        if (readCheck->isChecked()) hobbies << "阅读";
        if (musicCheck->isChecked()) hobbies << "音乐";
        if (sportCheck->isChecked()) hobbies << "运动";
        if (travelCheck->isChecked()) hobbies << "旅行";

        QString description = descEdit->toPlainText();

        // 验证
        if (username.isEmpty()) {
            QMessageBox::warning(this, "提示", "请输入用户名！");
            return;
        }
        if (password.isEmpty()) {
            QMessageBox::warning(this, "提示", "请输入密码！");
            return;
        }
        if (!agreeCheck->isChecked()) {
            QMessageBox::warning(this, "提示", "请先同意用户协议！");
            return;
        }

        // 显示注册信息
        QString info = QString("注册成功！\n\n"
                               "用户名：%1\n"
                               "性别：%2\n"
                               "学历：%3\n"
                               "爱好：%4\n"
                               "简介：%5")
                           .arg(username)
                           .arg(gender)
                           .arg(education)
                           .arg(hobbies.join("、"))
                           .arg(description);

        QMessageBox::information(this, "注册成功", info);
    });
}

7.3 运行效果

按 Ctrl + R 运行，你会看到一个完整的注册表单：

• ✅ 可以输入用户名和密码
• ✅ 可以选择性别（单选）
• ✅ 可以选择学历（下拉框）
• ✅ 可以选择多个爱好（复选框）
• ✅ 可以输入个人简介（多行文本）
• ✅ 必须勾选同意协议才能注册
• ✅ 点击注册会验证并显示填写的信息

🎉 恭喜！你已经能用QT做出像样的表单界面了！

八、今日总结

今天我们学习了6个最常用的QT控件：

控件	用途	特点
QLabel	显示文本/图片	只读，纯展示
QLineEdit	单行输入	支持密码模式、占位符
QTextEdit	多行输入	支持富文本、HTML
QCheckBox	复选框	可多选
QRadioButton	单选框	同组只能选一个
QComboBox	下拉框	节省空间，选项多的时候用

还学会了：

• ✅ 每个控件的基本用法
• ✅ 常用属性和方法
• ✅ 常用信号
• ✅ 综合运用多个控件做一个完整的表单

九、明日预告

明天我们将学习布局管理器（Layout）。

今天我们是用setGeometry手动设置每个控件的位置，这样有个问题：窗口大小改变时，控件不会跟着变。

布局管理器可以帮我们自动排列控件，让界面更灵活、更美观。我们会学习：

• 水平布局（QHBoxLayout）
• 垂直布局（QVBoxLayout）
• 网格布局（QGridLayout）
• 表单布局（QFormLayout）

学会布局管理器，你的界面就专业啦！

---

📝 学习建议：今天的控件很多，建议每个控件都自己动手写一写。特别是最后的注册表单，一定要亲手敲一遍代码，理解每个控件是怎么工作的。

可以尝试扩展一下：

• 加一个"确认密码"输入框，验证两次密码是否一致
• 加一个"重置"按钮，清空所有输入
• 试试修改控件的样式，让界面更好看

明天见，继续加油！💪