Qt 入门简洁笔记：常用控件

一、控件概述
- [1. 控件的发展阶段](#1. 控件的发展阶段)
- [2. 控件的层次结构（ASCII 示意图）](#2. 控件的层次结构（ASCII 示意图）)
[二、QWidget 核心属性简介](#二、QWidget 核心属性简介)
- [2.1 enabled ------ 控件可用状态](#2.1 enabled —— 控件可用状态)
- [2.2 geometry ------ 控件位置与大小](#2.2 geometry —— 控件位置与大小)
- [2.3 windowTitle / windowIcon](#2.3 windowTitle / windowIcon)
- [2.4 windowOpacity ------ 透明度](#2.4 windowOpacity —— 透明度)
- [2.5 cursor ------ 鼠标样式](#2.5 cursor —— 鼠标样式)
- [2.6 font ------ 字体属性](#2.6 font —— 字体属性)
- [2.7 toolTip ------ 悬停提示](#2.7 toolTip —— 悬停提示)
- [2.8 focusPolicy ------ 焦点策略](#2.8 focusPolicy —— 焦点策略)
- [2.9 styleSheet ------ 控件样式（QSS）](#2.9 styleSheet —— 控件样式（QSS）)
三、常用控件简介
- [3.1 QPushButton ------ 按钮控件](#3.1 QPushButton —— 按钮控件)
- [3.2 QLabel ------ 文本显示](#3.2 QLabel —— 文本显示)
- [3.3 QLineEdit ------ 单行输入框](#3.3 QLineEdit —— 单行输入框)
- [3.4 QTextEdit ------ 多行文本框](#3.4 QTextEdit —— 多行文本框)
- [3.5 QRadioButton / QCheckBox ------ 单选与复选框](#3.5 QRadioButton / QCheckBox —— 单选与复选框)
- [3.6 QComboBox ------ 下拉选择框](#3.6 QComboBox —— 下拉选择框)
- [3.7 QListWidget ------ 列表控件](#3.7 QListWidget —— 列表控件)
- [3.8 QTreeWidget ------ 树形控件](#3.8 QTreeWidget —— 树形控件)
- [3.9 QTableWidget ------ 表格控件](#3.9 QTableWidget —— 表格控件)
[四、QSS 美化技巧](#四、QSS 美化技巧)
五、总结

一、控件概述

在 Qt 中，Widget（控件） 是 GUI 界面的基础元素。无论是按钮、输入框、文本框还是列表，都是由 QWidget 派生而来的。

通俗地讲：

QWidget 是一切控件的"祖宗"，而 QPushButton、QLabel、QLineEdit 等控件，都是它的"孩子"。

控件是构建图形化界面的砖瓦，Qt Designer 里能拖拽的每一个组件，最终都继承自 QWidget。

1. 控件的发展阶段

控件并不是 Qt 独有的概念。它是 GUI（图形界面开发）普遍存在的抽象。

阶段	特征	举例
第一阶段	没有控件，需要手动绘制按钮与输入框	早期的 DOS 或 Lava 平台
第二阶段	有基本控件，但功能单一	HTML 原生控件、Win32 SDK
第三阶段	完善的控件体系，能覆盖常见 GUI 场景	Qt、MFC、JavaFX、Android SDK

如今，Qt 已经提供了数百种常用控件，足以满足大部分桌面应用的需求。

2. 控件的层次结构（ASCII 示意图）

复制代码

QObject
  └── QWidget
        ├── QDialog
        ├── QMainWindow
        ├── QPushButton
        ├── QLabel
        ├── QLineEdit
        ├── QTextEdit
        ├── QListWidget
        ├── QTableWidget
        └── ...

几乎所有界面控件都直接或间接继承自 QWidget。

二、QWidget 核心属性简介

QWidget 是所有控件的基类，它定义了 GUI 控件的通用属性与行为。

下面列出一些最常见的属性：

属性名	含义
enabled	控件是否可用
geometry	控件的位置和大小
windowTitle	窗口标题
windowIcon	窗口图标
windowOpacity	窗口透明度
cursor	鼠标悬停时的光标样式
font	字体
toolTip	鼠标悬停提示
focusPolicy	控件焦点策略
styleSheet	控件样式（QSS）

下面我们分小节讲解每一个重要属性。

2.1 enabled ------ 控件可用状态

函数接口：

cpp 复制代码

bool isEnabled() const;
void setEnabled(bool enable);

效果说明：

如果一个控件被禁用，则它无法接收用户的任何输入，外观会变成灰色。

示例：点击按钮2切换按钮1的启用状态

cpp 复制代码

void Widget::on_pushButton_2_clicked() {
    bool flag = ui->pushButton->isEnabled();
    ui->pushButton->setEnabled(!flag);
}

运行后点击按钮2，即可切换按钮1是否灰化。

2.2 geometry ------ 控件位置与大小

geometry 属性由四个参数组成：x, y, width, height。

这些值相对于父控件的左上角计算。

函数接口：

cpp 复制代码

QRect geometry() const;
void setGeometry(int x, int y, int w, int h);

例：移动目标按钮

cpp 复制代码

void Widget::on_pushButton_up_clicked() {
    QRect rect = ui->pushButton_target->geometry();
    ui->pushButton_target->setGeometry(rect.x(), rect.y() - 5, rect.width(), rect.height());
}

坐标系说明（ASCII 图示）：

复制代码

(0,0) ───────► x
  │
  │
  ▼
  y

左上角为原点，向右为 x 正方向，向下为 y 正方向。

2.3 windowTitle / windowIcon

设置窗口标题：
cpp 复制代码
```
this->setWindowTitle("这是标题");
```

设置窗口图标：

cpp 复制代码

QIcon icon(":/images/rose.jpg");
this->setWindowIcon(icon);

注意：图标文件通常通过 .qrc 资源文件管理，防止路径丢失问题。

2.4 windowOpacity ------ 透明度

范围 0.0 ~ 1.0，0.0 表示完全透明，1.0 表示不透明。

cpp 复制代码

float opacity = this->windowOpacity();
this->setWindowOpacity(opacity - 0.1);

2.5 cursor ------ 鼠标样式

Qt 提供了多种预设光标：

cpp 复制代码

button->setCursor(QCursor(Qt::WaitCursor));

常用光标类型包括：

类型	含义
Qt::ArrowCursor	普通箭头
Qt::WaitCursor	沙漏
Qt::PointingHandCursor	手形
Qt::CrossCursor	十字

2.6 font ------ 字体属性

字体由 QFont 控制：

cpp 复制代码

QFont font("仿宋", 18, QFont::Bold);
font.setItalic(true);
ui->label->setFont(font);

常用属性：

family()：字体族；
pointSize()：字号；
bold()、italic()、underline()、strikeOut()。

cpp 复制代码

ui->pushButton->setToolTip("点击此按钮开始计算");
ui->pushButton->setToolTipDuration(3000);

当鼠标悬停时会弹出提示，3 秒后自动消失。

2.8 focusPolicy ------ 焦点策略

控制控件能否通过键盘或鼠标获得焦点。

策略	含义
`Qt::NoFocus`	不接收焦点
`Qt::TabFocus`	Tab 键切换获得焦点
`Qt::ClickFocus`	鼠标点击获得焦点
`Qt::StrongFocus`	鼠标 + 键盘皆可（默认）

cpp 复制代码

ui->lineEdit->setFocusPolicy(Qt::ClickFocus);

2.9 styleSheet ------ 控件样式（QSS）

Qt 的 QSS（Qt Style Sheet）类似于网页的 CSS。

可以直接用来修改控件的样式：

cpp 复制代码

ui->label->setStyleSheet("color: blue; font-size: 20px;");

示例：切换夜间模式

cpp 复制代码

void Widget::on_pushButton_dark_clicked() {
    this->setStyleSheet("background-color: #333;");
    ui->textEdit->setStyleSheet("background-color: #333; color: #fff;");
}

三、常用控件简介

3.1 QPushButton ------ 按钮控件

按钮是最常用的交互控件。

基本用法：

cpp 复制代码

QPushButton *btn = new QPushButton("确定", this);
connect(btn, &QPushButton::clicked, this, &Widget::handleClick);

带图标按钮：

cpp 复制代码

ui->pushButton->setIcon(QIcon(":/doge.png"));
ui->pushButton->setIconSize(QSize(50, 50));

快捷键绑定：

cpp 复制代码

ui->pushButton->setShortcut(QKeySequence("Ctrl+S"));

3.2 QLabel ------ 文本显示

标签控件用于显示文本、图片。

示例：

cpp 复制代码

ui->label->setText("欢迎学习 Qt");
ui->label->setAlignment(Qt::AlignCenter);
ui->label->setPixmap(QPixmap(":/logo.png"));

QLabel 可显示：

纯文本；
富文本（HTML）；
图片；
超链接。

3.3 QLineEdit ------ 单行输入框

用于输入单行文本。

基本设置：

cpp 复制代码

ui->lineEdit->setPlaceholderText("请输入用户名");
ui->lineEdit->setEchoMode(QLineEdit::Password);

常见属性：

方法	功能
`setText()`	设置内容
`text()`	获取内容
`setPlaceholderText()`	占位提示
`setEchoMode()`	设置显示模式（Normal/Password等）

3.4 QTextEdit ------ 多行文本框

可编辑多行文本或展示富文本。

cpp 复制代码

ui->textEdit->setPlainText("Hello, Qt!");
ui->textEdit->append("下一行文本");

支持复制、粘贴、撤销、富文本格式（HTML）。

3.5 QRadioButton / QCheckBox ------ 单选与复选框

示例：

cpp 复制代码

if (ui->radioButton_male->isChecked()) qDebug() << "男";
if (ui->checkBox_agree->isChecked()) qDebug() << "已同意";

控件区别：

控件	特性
QRadioButton	多个中只能选一个
QCheckBox	可单独多选

3.6 QComboBox ------ 下拉选择框

使用示例：

cpp 复制代码

ui->comboBox->addItem("北京");
ui->comboBox->addItems({"上海", "广州", "深圳"});

QString city = ui->comboBox->currentText();

可以绑定 currentIndexChanged() 信号来响应变化。

3.7 QListWidget ------ 列表控件

示例：

cpp 复制代码

ui->listWidget->addItem("苹果");
ui->listWidget->addItem("香蕉");
ui->listWidget->addItem("橘子");

connect(ui->listWidget, &QListWidget::itemClicked,
        [](QListWidgetItem *item){ qDebug() << item->text(); });

3.8 QTreeWidget ------ 树形控件

常用于显示层级结构，如文件目录。

cpp 复制代码

QTreeWidgetItem *root = new QTreeWidgetItem(ui->treeWidget);
root->setText(0, "父节点");

QTreeWidgetItem *child = new QTreeWidgetItem(root);
child->setText(0, "子节点");

3.9 QTableWidget ------ 表格控件

用于显示二维数据。

cpp 复制代码

ui->tableWidget->setRowCount(2);
ui->tableWidget->setColumnCount(3);
ui->tableWidget->setHorizontalHeaderLabels({"姓名", "性别", "年龄"});
ui->tableWidget->setItem(0, 0, new QTableWidgetItem("小明"));

四、QSS 美化技巧

QSS 是 Qt 的样式语言，可以轻松实现按钮圆角、颜色、悬停等效果。

示例：

css 复制代码

QPushButton {
    background-color: #4CAF50;
    color: white;
    border-radius: 8px;
    padding: 5px 10px;
}
QPushButton:hover {
    background-color: #45A049;
}

QSS 可直接写入：

cpp 复制代码

ui->pushButton->setStyleSheet("background-color: #4CAF50; color: white;");

五、总结

本章简洁讲解了 Qt 的控件体系与核心属性，如果需要深入学习，应当搜寻更加详细的资料进行学习，而非停留在表面。

在你掌握这些知识之后，应该能：

熟练使用 Qt Designer 构建界面；
通过代码动态控制控件属性；
应用 QSS 美化界面；
理解 QWidget 的继承关系与行为特征。

免责声明

本文内容仅供学习与参考使用，文中涉及的代码示例、技术方法及相关说明，均基于作者个人理解与实验环境整理。

在不同的开发环境、操作系统或 Qt 版本下，可能存在差异或兼容性问题。
读者在实际项目中应用本文内容所产生的任何直接或间接后果（包括但不限于程序异常、数据丢失、性能问题等），作者概不承担任何责任。

封面图来源于网络，如有侵权，请联系删除！

Qt 入门简洁笔记：常用控件

目录

一、控件概述

1. 控件的发展阶段

2. 控件的层次结构（ASCII 示意图）

二、QWidget 核心属性简介

2.1 enabled ------ 控件可用状态

2.2 geometry ------ 控件位置与大小

2.3 windowTitle / windowIcon

2.4 windowOpacity ------ 透明度

2.5 cursor ------ 鼠标样式

2.6 font ------ 字体属性

2.7 toolTip ------ 悬停提示

2.8 focusPolicy ------ 焦点策略

2.9 styleSheet ------ 控件样式（QSS）

三、常用控件简介

3.1 QPushButton ------ 按钮控件

3.2 QLabel ------ 文本显示

3.3 QLineEdit ------ 单行输入框

3.4 QTextEdit ------ 多行文本框

3.5 QRadioButton / QCheckBox ------ 单选与复选框

3.6 QComboBox ------ 下拉选择框

3.7 QListWidget ------ 列表控件

3.8 QTreeWidget ------ 树形控件

3.9 QTableWidget ------ 表格控件

四、QSS 美化技巧

五、总结