从零开始的Qt开发指南（六）Qt 常用控件之 QWidget（下）：从交互细节到颜值定制，打造专业级界面

前言

在上一篇文章中，我们已经掌握了 QWidget 的基础属性，比如控制控件启用禁用的enabled、管理位置尺寸的geometry，还有给窗口加 “名字” 和 “头像” 的windowTitle与windowIcon。但 Qt 界面开发的精髓远不止于此 —— 用户鼠标悬停时的光标变化、文本显示的字体样式、操作提示的 toolTip、控件焦点的获取规则，以及让界面颜值飙升的样式表，这些细节才是让程序从 “能用” 到 “好用又好看” 的关键。今天这篇《Qt 常用控件之 QWidget（下）》，就带大家深入这些核心属性，用代码实战打通 Qt 界面开发的 “任督二脉”！

一、回顾：QWidget 的 “属性家族”

在正式开始前，先快速回顾一下 QWidget 的定位 —— 它是所有 Qt 可视化控件的 “老祖宗”，无论是按钮、输入框还是复杂的表格，都直接或间接继承自它。上一篇我们讲了 5 个基础属性，今天要解锁的是 5 个更偏向 “交互体验” 和 “视觉样式” 的核心属性：

• cursor：控制鼠标悬停在控件上时的光标形状；
• font：定制控件中文本的字体、大小、粗细等样式；
• toolTip：鼠标悬停时显示的提示信息，提升用户体验；
• focusPolicy：管理控件如何获取焦点，确保键盘操作正常；
• styleSheet：用 CSS 语法美化控件，实现个性化界面。

这些属性看似独立，却能相互配合打造出专业级的交互效果。接下来，我们逐个拆解，用代码实战让每个知识点都落地。

二、cursor：给鼠标换 “皮肤”，提升交互辨识度

当用户把鼠标移到不同控件上时，光标形状的变化能直观告诉用户 “这里能做什么”—— 比如悬停在按钮上显示 “手型”，悬停在输入框显示 “竖线”，悬停在加载中的区域显示 “沙漏”。cursor属性就是 Qt 中控制光标形状的核心，支持系统内置光标和自定义图片光标两种模式。

2.1 核心 API：掌控光标的 “三大武器”

2.2 实战 1：给按钮设置系统内置光标

Qt 内置了 20 多种常用光标形状，比如箭头、沙漏、手型、十字等，我们可以直接通过Qt::CursorShape枚举调用。比如给按钮设置 “等待光标”（沙漏形状），代码如下：

步骤 1：在 Qt Designer 中拖入一个按钮

按钮的objectName保持默认（pushButton），文本设为 “悬停我看光标变化”。

步骤 2：通过代码设置光标

// widget.cpp
#include "widget.h"
#include "ui_widget.h"
#include <QPushButton>
#include <QCursor>  // 需包含QCursor头文件

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    
    // 1. 获取界面上的按钮（也可以用new动态创建）
    QPushButton* btn = ui->pushButton;
    
    // 2. 设置光标为“等待形状”（沙漏）
    // Qt::WaitCursor是系统内置的光标枚举值
    btn->setCursor(QCursor(Qt::WaitCursor));
    
    // 拓展：如果想设置全局光标（比如加载时）
    // QGuiApplication::setOverrideCursor(QCursor(Qt::WaitCursor));
    // 注意：全局光标使用后需手动恢复，否则会一直生效
    // QGuiApplication::restoreOverrideCursor();
}

Widget::~Widget()
{
    delete ui;
}

步骤 3：运行效果

当鼠标悬停在按钮上时，光标会从默认的箭头变成 “沙漏”形状；移开按钮后，光标恢复默认形状。如果使用了setOverrideCursor，整个程序的光标都会变成沙漏，直到调用restoreOverrideCursor恢复。

2.3 实战 2：自定义光标（用图片做鼠标 “皮肤”）

系统内置光标不够个性？Qt 支持用任意图片作为光标，比如用 “滑稽表情包” 做光标。实现步骤如下：

步骤 1：准备图片并添加到 qrc 资源

1. 准备一张 PNG 图片（推荐尺寸 64x64，太大的图片会显示不全），命名为anno.png；
2. 在项目中创建 qrc 资源文件（右键项目→新建→Qt Resource File），添加前缀/，并将anno.png添加到资源中（确保图片在项目目录下）。

步骤 2：代码实现自定义光标

// widget.cpp
#include "widget.h"
#include "ui_widget.h"

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    //访问到图片文件
    QPixmap pixmap(":/anno.png");
    pixmap.scaled(10, 10);  //缩放图片
    //构造光标对象
    QCursor cursor(pixmap, 10, 10);
    //把光标设置进去
    this->setCursor(cursor);
}

Widget::~Widget()
{
    delete ui;
}

步骤 3：关键说明

• 热点（Hot Spot）：光标点击时真正生效的位置，比如默认箭头光标，热点在箭头尖端。如果不设置，默认是图片左上角（0,0），可能导致点击位置与视觉位置偏差；
• 图片格式：推荐使用 PNG 格式（支持透明背景），避免光标出现黑色边框；

2.4 常用系统光标枚举值

Qt 内置的Qt::CursorShape枚举包含多种常用光标，这里列出高频使用的几种：

在代码中按住Ctrl键点击枚举值（如Qt::WaitCursor），可以跳转到 Qt 源码查看所有内置光标。

三、font：定制文本样式，让界面更有 “设计感”

文本是界面中传递信息的核心元素，字体的选择直接影响用户的阅读体验 —— 比如标题用粗体大号字体，正文用清晰的常规字体。font属性通过QFont类管理文本样式，支持字体家族、大小、粗细、倾斜、下划线等多种设置。

3.1 核心 API 与 QFont 属性

QFont类包含多个控制文本样式的属性，常用的如下：

3.2 实战 1：在 Qt Designer 中可视化设置字体

对于静态界面，直接在 Qt Designer 中设置字体更高效：

1. 拖入一个QLabel（文本显示控件），文本设为 这是一段文本！”；

1. 选中QLabel，在右侧 “属性编辑器” 中找到font属性，点击右侧的 “...” 按钮；

1. 在弹出的 “字体” 对话框中，设置：
   • 字体家族：微软雅黑；
   • 点大小：20；
   • 样式：倾斜；
   • 效果：下划线、删除线；

   

2. 点击 “确定”，在 Designer 中可以实时看到文本样式变化。

3.3 实战 2：通过代码设置字体

代码设置字体的优势在于可以根据业务逻辑动态调整（比如夜间模式切换字体颜色）。示例如下：

#include "widget.h"
#include "ui_widget.h"
#include <QLabel>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    QLabel* label = new QLabel(this);
    label->setText("这是一段文本");

    //创建字体对象
    QFont font;
    font.setFamily("仿宋");
    font.setPixelSize(30);
    font.setBold(true);
    font.setItalic(true);
    font.setUnderline(true);
    font.setStrikeOut(true);

    //把font对象设置到label中
    label->setFont(font);
}

Widget::~Widget()
{
    delete ui;
}

运行效果：

3.4 开发小贴士

1. 字体兼容性：不同系统默认安装的字体不同（比如 Windows 的 “微软雅黑” 在 Linux 中可能没有），建议优先使用跨平台字体（如 “Arial”“Times New Roman”），或通过 qrc 资源嵌入字体文件；
2. 字体大小单位：pointSize是 “磅”（1 磅≈0.35 毫米），pixelSize是像素，推荐用pointSize，因为它在不同分辨率屏幕上显示更一致；
3. 批量设置字体：如果想给整个窗口的所有控件设置统一字体，可以给窗口Widget设置字体，子控件会继承父控件的字体属性（除非单独设置）。

四、toolTip：给控件加 “提示标签”，降低用户理解成本

当用户对某个控件的功能不确定时，鼠标悬停时显示的提示信息（toolTip）能快速解答疑惑 —— 比如按钮上只放了图标，toolTip 可以说明 “点击下载文件”。toolTip属性支持设置提示文本和显示时长，是提升用户体验的 “小而美” 功能。

4.1 核心 API

4.2 实战：给按钮设置 toolTip

我们实现一个场景：两个按钮分别对应 “确认” 和 “取消” 操作，鼠标悬停时显示提示，且 “确认” 按钮的提示显示 3 秒，“取消” 按钮的提示一直显示。

步骤 1：界面准备

拖入两个按钮，objectName分别为pushButton_yes（文本 “Yes”）和pushButton_no（文本 “No”）。

步骤 2：代码实现

#include "widget.h"
#include "ui_widget.h"

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    //设置这两个按钮的toolTips
    ui->pushButton_yes->setToolTip("这是一个yes按钮");
    ui->pushButton_yes->setToolTipDuration(3000);

    ui->pushButton_no->setToolTip("这是一个no按钮");
    ui->pushButton_no->setToolTipDuration(7000);
}

Widget::~Widget()
{
    delete ui;
}

步骤 3：运行效果

• 鼠标悬停 “确认” 按钮：显示加粗的 “确认操作” 和两行列表，3 秒后自动消失；
• 鼠标悬停 “取消” 按钮：显示普通文本提示，直到鼠标移开才消失；
• 富文本支持：toolTip的文本可以用 HTML 标签（如<b>加粗、<br>换行），让提示更易读；
• 限制显示时间：通过setToolTipDuration方法设置toolTip的显示持续时间，如Yes按钮的toolTip在显示3000ms后消失，No则在显示7000ms后消失。

4.3 进阶：statusTip 与 whatThis（其他提示类型）

除了toolTip，QWidget 还支持另外两种提示：

statusTip：鼠标悬停时在窗口状态栏显示的提示（需要窗口有状态栏，如 QMainWindow）；

// 设置statusTip
ui->pushButton_confirm->setStatusTip("正在准备保存数据...");

whatThis：按下Alt+F1后鼠标点击控件显示的详细帮助（弹出窗口）；

// 设置whatThis
ui->pushButton_confirm->setWhatsThis(
    "确认按钮：\n"
    "功能：保存当前页面的所有修改到数据库\n"
    "注意：保存后无法撤销，请确认数据无误后点击"
);

这两种提示在复杂软件中很有用，但日常开发中toolTip最常用。

五、focusPolicy：管理控件 “焦点”，确保键盘操作正常

“焦点” 是 GUI 中的核心概念 —— 拥有焦点的控件会接收键盘输入（比如输入框有焦点时，按键盘能输入文字；按钮有焦点时，按 Enter 能触发点击）。focusPolicy属性控制控件如何获取焦点，避免出现 “按键盘没反应” 的尴尬场景。

5.1 核心概念与 API

核心 API：

5.2 Qt::FocusPolicy 枚举值详解

Qt::FocusPolicy包含 5 种策略，覆盖了大部分交互场景：

5.3 实战：理解不同焦点策略的差异

我们用 4 个单行输入框（QLineEdit）演示不同焦点策略的效果，帮助大家直观理解。

步骤 1：界面准备

拖入 4 个QLineEdit，objectName分别为lineEdit_1到lineEdit_4，依次设置它们的focusPolicy：

• lineEdit_1：Qt::StrongFocus（默认）；
• lineEdit_2：Qt::NoFocus；
• lineEdit_3：Qt::TabFocus；
• lineEdit_4：Qt::ClickFocus。

步骤 2：代码验证（可选）

如果不想在 Designer 中手动设置，也可以用代码批量设置：

// widget.cpp
#include "widget.h"
#include "ui_widget.h"

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    
    // 设置4个输入框的焦点策略
    ui->lineEdit_1->setFocusPolicy(Qt::StrongFocus);  // Tab+点击
    ui->lineEdit_2->setFocusPolicy(Qt::NoFocus);     // 不接收焦点
    ui->lineEdit_3->setFocusPolicy(Qt::TabFocus);     // 仅Tab
    ui->lineEdit_4->setFocusPolicy(Qt::ClickFocus);   // 仅点击
    
    // 给输入框设置提示文本
    ui->lineEdit_1->setPlaceholderText("StrongFocus（Tab+点击）");
    ui->lineEdit_2->setPlaceholderText("NoFocus（无法获取焦点）");
    ui->lineEdit_3->setPlaceholderText("TabFocus（仅Tab）");
    ui->lineEdit_4->setPlaceholderText("ClickFocus（仅点击）");
}

Widget::~Widget()
{
    delete ui;
}

步骤 3：运行测试

1. 测试 lineEdit_2（NoFocus）：无论用鼠标点击还是按 Tab 键，输入框都不会出现光标，无法输入文字；
2. 测试 lineEdit_1（StrongFocus）：点击输入框或按 Tab 键切换，都能出现光标，支持输入；
3. 测试 lineEdit_3（TabFocus）：按 Tab 键能切换到该输入框（出现光标），但鼠标点击无法获取焦点；
4. 测试 lineEdit_4（ClickFocus）：鼠标点击能获取焦点，但按 Tab 键无法切换到该输入框。

5.4 开发避坑指南

输入控件必须有焦点：QLineEdit、QTextEdit 等输入类控件，默认focusPolicy是StrongFocus，不要轻易改成NoFocus，否则用户无法输入；

焦点顺序：按 Tab 键切换焦点的顺序，默认是控件在 Designer 中的创建顺序，可以通过setTabOrder手动调整；

// 设置Tab顺序：lineEdit_1 → lineEdit_3 → lineEdit_4 → lineEdit_1
this->setTabOrder(ui->lineEdit_1, ui->lineEdit_3);
this->setTabOrder(ui->lineEdit_3, ui->lineEdit_4);
this->setTabOrder(ui->lineEdit_4, ui->lineEdit_1);

动态设置焦点：用setFocus()方法可以强制给控件设置焦点（前提是focusPolicy允许）；

// 程序启动时，让lineEdit_1获取焦点
ui->lineEdit_1->setFocus();

六、styleSheet：用 CSS 语法给控件 “化妆”，颜值飙升

如果说前面的属性是 “基础护肤”，那styleSheet（简称 QSS）就是 “高级化妆”—— 它借鉴了网页开发的 CSS 语法，支持给控件设置背景色、边框、圆角、渐变等样式，让 Qt 界面从 “朴素” 变 “精致”。

6.1 核心概念：QSS 与 CSS 的关系

• QSS：Qt Style Sheet，是 Qt 对 CSS 的扩展，语法基本兼容 CSS2.1，但不支持 CSS3 的部分特性（如弹性布局）；
• 选择器：指定要美化的控件（如QPushButton表示所有按钮，#pushButton_confirm表示指定objectName的按钮）；
• 属性：控制控件的样式（如background-color设置背景色，border-radius设置圆角）。

6.2 常用 QSS 属性与选择器

6.2.1 常用选择器

6.2.2 常用样式属性

6.3 实战 1：给按钮设置基础样式

我们先从简单的按钮美化入手，实现 “默认灰色、悬停蓝色、点击红色” 的交互效果。

步骤 1：界面准备

拖入一个按钮，objectName为pushButton_style，文本设为 “QSS 样式演示”。

步骤 2：代码实现 QSS

// widget.cpp
#include "widget.h"
#include "ui_widget.h"

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    
    // 1. 编写QSS样式字符串
    QString btnStyle = R"(
        /* 默认状态 */
        QPushButton {
            background-color: #E0E0E0;  /* 浅灰色背景 */
            color: #333333;            /* 深灰色文本 */
            border: none;              /* 取消默认边框 */
            border-radius: 8px;        /* 8px圆角 */
            font-family: "微软雅黑";    /* 字体 */
            font-size: 14px;           /* 字体大小 */
            padding: 8px 16px;         /* 内边距：上下8px，左右16px */
        }
        
        /* 鼠标悬停状态 */
        QPushButton:hover {
            background-color: #2196F3;  /* 蓝色背景 */
            color: white;               /* 白色文本 */
        }
        
        /* 鼠标点击状态 */
        QPushButton:pressed {
            background-color: #F44336;  /* 红色背景 */
            padding: 9px 15px 7px 17px; /* 点击时轻微偏移，模拟按压效果 */
        }
        
        /* 禁用状态（可选） */
        QPushButton:disabled {
            background-color: #F5F5F5;  /* 更浅的灰色 */
            color: #BDBDBD;             /* 灰色文本 */
        }
    )";
    
    // 2. 给按钮应用QSS
    ui->pushButton_style->setStyleSheet(btnStyle);
    
    // 拓展：给整个窗口设置背景色
    this->setStyleSheet("background-color: #FAFAFA;");
}

Widget::~Widget()
{
    delete ui;
}

步骤 3：运行效果

• 默认状态：按钮浅灰色，深灰色文本，圆角无边框；

• 鼠标悬停：按钮变蓝色，文本变白色；

• 鼠标点击：按钮变红色，内边距轻微调整（模拟按压凹陷）；

• 如果禁用按钮（setEnabled(false)）：按钮变浅灰，文本变灰，无法交互。

6.4 实战 2：实现 “日间 / 夜间模式” 切换

用 QSS 实现模式切换是开发中的常见需求，我们通过两个按钮控制窗口在 “日间模式”（浅色背景、深色文本）和 “夜间模式”（深色背景、浅色文本）之间切换。

步骤 1：界面准备

1. 拖入一个PlainTextEdit（多行输入框，objectName为plainTextEdit），用于显示文本；
2. 拖入两个按钮，objectName分别为pushButton_light（文本 “日间模式”）和pushButton_dark（文本 “夜间模式”）。

步骤 2：代码实现模式切换

// widget.cpp
#include "widget.h"
#include "ui_widget.h"

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
}

Widget::~Widget()
{
    delete ui;
}


void Widget::on_pushButton_light_clicked()
{
    //设置窗口的样式
    this->setStyleSheet("background-color:rgb(240, 240, 240);");
    //设置输入框的样式
    ui->plainTextEdit->setStyleSheet("background-color:white; color:black");
    //设置按钮的样式
    ui->pushButton_light->setStyleSheet("color:black");
    ui->pushButton_dark->setStyleSheet("color:black");
}

void Widget::on_pushButton_dark_clicked()
{
    //设置窗口的样式
    this->setStyleSheet("background-color:black;");
    //设置输入框的样式
    ui->plainTextEdit->setStyleSheet("background-color:black; color:white");
    //设置按钮的样式
    ui->pushButton_light->setStyleSheet("color:white");
    ui->pushButton_dark->setStyleSheet("color:white");
}

步骤 3：运行效果

• 点击 “日间模式”：窗口背景浅灰，输入框白色背景，深色文本；

• 点击 “夜间模式”：窗口背景黑色，输入框深灰背景黑色，文本白色；

• 所有控件的样式同步切换，视觉一致性强。

6.5 QSS 开发技巧

使用 R"(...)" 包裹 QSS 字符串：C++11 及以上支持原始字符串字面量，避免转义字符（如"不需要写成\"）；

分层管理 QSS：复杂界面可以将 QSS 按控件类型拆分（如btnStyle、editStyle），或放到单独的.qss文件中，用QFile读取后应用；

// 从文件读取QSS
QFile qssFile(":/style.qss");
if (qssFile.open(QFile::ReadOnly)) {
    QString qss = QLatin1String(qssFile.readAll());
    this->setStyleSheet(qss);
    qssFile.close();
}

调试 QSS：Qt Designer 的 “编辑样式表” 对话框支持实时预览，可先在 Designer 中调试样式，再复制到代码中；

优先级：如果一个控件同时被多个 QSS 选择器匹配，ID 选择器优先级最高，其次是状态选择器，最后是类选择器。

总结

Qt 界面开发的核心思路是 “先功能后样式”—— 先通过基础属性实现控件的交互逻辑，再用styleSheet美化外观。后续文章中，我们会基于 QWidget 的基础，讲解按钮类（QPushButton、QRadioButton）、显示类（QLabel、QProgressBar）等具体控件的用法，逐步构建完整的 Qt 界面开发知识体系。 如果你在学习过程中有任何问题，或者有想看的 Qt 知识点，欢迎在评论区留言交流！觉得有用的话，别忘了点赞 + 收藏，关注我，持续更新 Qt 开发干货～