Qt纯代码自绘登录界面：无边框阴影与控件细节全攻略

最近接了个活儿，要拿 Qt 写一个登录界面，视觉上要尽量贴近某款知名办公软件（大家习惯叫它 WPS 风格）的登录页。对方提了一个很硬的要求：尽量不要用 QSS 文件，不要贴外部图片素材，所有界面元素都用纯代码生成。

一开始我也觉得这是给自己找事——Qt 生态里 QSS 改外观、设计师拖控件多方便，何必绕远路。但真做下来我发现，纯代码自绘这条路不仅走得通，而且在一些场景下反而是唯一靠谱的选择。这篇文章就把整个开发过程、实现思路、以及中间踩过的几个坑完整记录下来，给同样需要"纯代码还原高保真界面"的朋友做个参考。

先说结论：用 Qt 纯代码模仿这种登录界面，核心工作分三块——无边框窗口和阴影处理、表单控件的自绘、以及字体间距这些"看起来不重要但决定像不像"的细节。三块都不难，但都有各自的坑。

1. 为什么选纯代码自绘，而不是 QSS 或 UI 文件

1.1 三种常见实现方案的对比

做 Qt 界面，常规思路有三种：集成 Qt Designer 生成的.ui文件、用 QSS 写样式表、以及纯代码构建（包含 paintevent 自绘）。先把我这次对比的结果列出来：

我这次选纯代码，最直接的原因是目标界面有大量"细节状态"：输入框聚焦时要浮现一条淡蓝色的底线，鼠标悬停在登录按钮上要渐变加深，点击要有一个微小的下压位移，密码框右侧要有眼睛图标切换明文——这些东西用 QSS 写起来很别扭，但用 QPainter 画就是几行代码的事。

另一个原因是分发形态。Qt 程序如果引用了外部 QSS 文件和图片资源，最终发布时要记得一并带上，路径稍有闪失界面就"裸奔"。纯代码把所有绘制逻辑编译进二进制，跑起来就是独立的一套，丢给谁都能直接开。

1.2 模仿的三个层次：像素级、行为级、结构级

定"像不像"的标准时，我给自己分了三个层次：

• 像素级：和原界面在相同分辨率下，各控件的位置、尺寸、圆角、颜色几乎一致。
• 行为级：交互反馈一致，比如聚焦高亮、按钮按压动画、窗口拖拽手感。
• 结构级：窗口缩放时各区域相对关系保持一致，而不是一拉伸就错位。

大多数"模仿"项目做到像素级就停了，但用户真正感知到的其实是行为级——你界面画得再像，点登录按钮没有下压反馈，看起来就"死"了。

2. 先拆后建：把登录界面拆成可绘制的四层

2.1 目标界面的视觉层级

动手写代码之前，我用截图工具把目标登录界面抠下来放大看，拆出了四个层级：

1. 最底层：窗口背景，带 20 像素左右的圆角，四周有明显阴影，整体是近乎纯白的浅色。
2. 左侧品牌区：一张浅紫色渐变配图，上面有大Logo、产品名和一句口号，这部分通常由图片构成。
3. 右侧表单区：包含"账号登录/二维码登录"页签、手机号/邮箱输入框、密码输入框、验证码条（可点击切换）、协议勾选项、超大登录按钮。
4. 底部辅助区：版本号、隐私政策、找回密码等链接，字号很小，颜色偏灰。

左侧的品牌区在原版里是个图片。我们要求纯代码，最简单的方法是用QLinearGradient画一个近似渐变，再叠加几行文字充当Logo区。如果设计稿给了精确的色值，纯代码画出来的渐变完全可以乱真。

2.2 建立坐标与间距规范

自绘最容易犯的错误是"凭感觉摆放"，一会儿这儿差 2px，一会儿那儿差 5px，等全部写完回头一比对，整个界面歪得不行。

我的做法是：先定一个基准设计尺寸。这次我选960 x 600，逻辑坐标，不考虑高分屏缩放（后面会单独处理 DPI）。然后把所有间距、字号、控件尺寸写成一个常量表，放在文件顶部：

struct LoginMetrics { int windowWidth = 960; int windowHeight = 600; int borderRadius = 20; // 圆角半径 int shadowMargin = 40; // 阴影扩展区，给 QGraphicsDropShadowEffect 留空间 int leftPanelWidth = 440; // 左侧品牌区宽度 int formMargin = 54; // 右侧表单区左右边距 int formTop = 88; // 表单区顶部到窗口顶部的距离 int inputHeight = 46; // 输入框高度 int inputSpacing = 28; // 输入框之间的垂直间距 int loginButtonHeight = 46; // 登录按钮高度 int fontSizeTitle = 24; // 标题字号 int fontSizeNormal = 14; // 正常字号 int fontSizeSmall = 12; // 辅助文字字号 };

画任何东西都不直接写数字，一律引用常量。这样调整起来方便，更关键的是算坐标的时候有依据——比如表单第一个输入框的y坐标就可以算出来：formTop + 标题高度 + 标题与输入框间距，而不是拍脑袋定一个数。

2.3 用什么承载布局

新手最常见的纠结：到底用QHBoxLayout/QVBoxLayout布局，还是直接在paintEvent里手写坐标？

我的经验是：登录弹窗这种尺寸固定、元素固定的界面，不要用布局器。布局器的优势是动态伸缩，但登录界面根本不需要伸缩（至少在线宽模式下不需要）。直接用QWidget作为容器，重写resizeEvent在窗口尺寸变化时按比例重新定位子控件，反而更可控。

右侧表单区和左侧品牌区的分界，我用了一个QWidget作为右侧容器，把输入框、按钮作为它的子控件，用setGeometry精确摆放。这样左侧自绘、右侧子控件互不干扰。

3. 无边框窗口与圆角阴影：第一个大坑

3.1 窗口无边框后的三个连锁问题

目标界面是一个圆角、带阴影的窗口，标准的 Windows 标题栏显然不甘心。所以第一步是去掉系统边框：

setWindowFlags(Qt::FramelessWindowHint); // 去边框 setAttribute(Qt::WA_TranslucentBackground); // 背景透明，阴影才能露出来

这两行设置完，连锁问题马上来：

1. 窗口拖不动了，因为标题栏没了，鼠标按哪里都由系统决定，需要手动处理mousePressEvent/mouseMoveEvent。
2. 没有最大化/最小化/关闭按钮，需要自己画右上角三个小按钮（或者放弃关闭按钮，反正登录界面用不上最大化）。
3. 背景透明会让整个窗口变"脆"，任何绘制瑕疵都会暴露无遗。

3.2 拖动与关闭按钮的手写处理

拖动逻辑很经典，按下时记录全局坐标和窗口坐标的偏移，移动时设置新位置：

void LoginWindow::mousePressEvent(QMouseEvent* e) { if (e->button() == Qt::LeftButton) { m_pressOffset = e->globalPosition().toPoint() - frameGeometry().topLeft(); } } void LoginWindow::mouseMoveEvent(QMouseEvent* e) { if (e->buttons() & Qt::LeftButton) { move(e->globalPosition().toPoint() - m_pressOffset); } }

注意一个细节：frameGeometry().topLeft()才是窗口的左上角，而不是pos()。如果窗口有透明边距（我们加了 40px 阴影区），pos()返回的仍然是外框位置，两者在本例中一致，但不保证所有平台一致，养成用frameGeometry的习惯没坏处。

关闭按钮我用了一个简单的QPushButton，重写paintEvent画一个叉，鼠标悬停时背景变浅灰。这种小按钮不值得单独造一个类，继承QPushButton重写绘制就行。

3.3 圆角背景用 painter 画，阴影用特效做

圆角背景在paintEvent里用QPainter画：

void LoginWindow::paintEvent(QPaintEvent*) { QPainter p(this); p.setRenderHint(QPainter::Antialiasing); // 抗锯齿，圆角边缘才平滑 p.setPen(Qt::NoPen); p.setBrush(QColor(255, 255, 255)); QRectF rect = QRectF(rect()).adjusted(shadowMargin, shadowMargin, -shadowMargin, -shadowMargin); p.drawRoundedRect(rect, borderRadius, borderRadius); }

重点是shadowMargin。这个 40px 的留白是给阴影特效用的——QGraphicsDropShadowEffect如果要显示完整的模糊扩散区域，窗口本身必须留出足够的边界，否则阴影会被裁剪掉。很多新人画完圆角发现"阴影只有半截"，十有八九是没留这个边距。

阴影挂在窗口的中央 widget 上，而不是窗口本身：

auto* shadow = new QGraphicsDropShadowEffect(this); shadow->setBlurRadius(34); shadow->setOffset(0, 8); shadow->setColor(QColor(0, 0, 0, 45)); ui->centralWidget->setGraphicsEffect(shadow);

这里要特别说一句：不要把阴影挂在整个窗口上，不然圆角背景和阴影会一起被模糊，效果直接崩。正确做法是窗口透明，中央 widget 画圆角背景，阴影挂在中央 widget 上。这样阴影从圆角边缘往外扩散，才符合直觉。

3.4 左侧品牌区的渐变绘制

左侧 440px 宽的区域，我用QLinearGradient画一个从左下到右上的紫色渐变，再叠加几行白色文字：

void LeftPanel::paintEvent(QPaintEvent*) { QPainter p(this); QLinearGradient g(0, height(), width(), 0); g.setColorAt(0.0, QColor(90, 68, 178)); g.setColorAt(0.6, QColor(130, 84, 212)); g.setColorAt(1.0, QColor(177, 108, 235)); p.fillRect(rect(), g); // 画 Logo 和文字 p.setPen(Qt::white); p.setFont(QFont("Microsoft YaHei", 24, QFont::Bold)); // ... }

渐变方向和色值我是照着原版截图一点点试出来的，这没什么捷径，就是比对、调整、再比对。

4. 表单控件的自绘：输入框、密码框和登录按钮

4.1 输入框：无边框 + 底部高亮线

默认的QLineEdit有内阴影，很难看。我的做法是继承QLineEdit，在paintEvent里先画一条浅灰色的底线，再根据聚焦状态决定是否加亮色。

class FlatLineEdit : public QLineEdit { protected: void paintEvent(QPaintEvent* e) override { QPainter p(this); p.setRenderHint(QPainter::Antialiasing); p.setPen(Qt::NoPen); p.setBrush(QColor(247, 248, 250)); // 画浅灰圆角背景，让输入框有"浅凹陷"感 p.drawRoundedRect(rect(), 4, 4); // 画底部线 QColor lineColor = hasFocus() ? QColor(80, 120, 255) : QColor(220, 222, 226); p.setPen(QPen(lineColor, hasFocus() ? 2 : 1)); p.drawLine(0, height() - 2, width(), height() - 2); // 文本和光标必须手动绘制，否则 QLineEdit 默认绘制会覆盖掉上面画的背景 QStyleOptionFrame opt; opt.initFrom(this); style()->drawPrimitive(QStyle::PE_FrameLineEdit, &opt, &p, this); // QLineEdit::paintEvent 需要调用，不然文本不显示 QLineEdit::paintEvent(e); } };

这里有个容易踩的坑：如果先画背景再调QLineEdit::paintEvent，默认的边框绘制会把我们画的内容盖住部分区域。所以要么像上面那样先画背景、再调父类（父类会绘制文本部分），要么干脆完全自己画文本——自己算contentRect，用drawText绘制，再把光标画出来。后者更彻底，但工作量大不少。

我最终选了折中方案：背景和底线自己画，文本部分交给父类。注意paintEvent里要先设置字体颜色和 placeholder 颜色，否则聚焦时文字颜色和背景色会冲突。

4.2 密码框的"眼睛"图标与验证码切换

密码框右边有个小眼睛图标，点击切换明文/密文。纯代码实现方式：

auto* action = new QAction(this); QIcon eyeIcon; // 用 QPainter 画一个睁眼图标，给自定义的 QIcon 生成函数 eyeIcon.addPixmap(renderEyeIcon(QColor(150,150,150))); action->setIcon(eyeIcon); edit->addAction(action, QLineEdit::TrailingPosition);

图标我用一个辅助函数renderEyeIcon(color)返回QPixmap，里面就是几段QPainter路径。点击时切换setEchoMode即可。

验证码条也是标配。我用QPainter在QPixmap上随机画了 4 个字符，加了点干扰线和噪点。点击时重新生成并强制刷新。字符需要先用QFontMetrics拿到文本宽度再居中绘制，否则每次字符宽度不同会左右乱跳。

4.3 登录按钮的渐变与按压回弹

登录按钮是最体现"手感和细节"的控件。我用一个继承QPushButton的类，内置三种状态颜色：

void LoginButton::paintEvent(QPaintEvent*) { QPainter p(this); p.setRenderHint(QPainter::Antialiasing); QColor bg; if (!isEnabled()) { bg = QColor(140, 150, 170); } else if (isDown()) { bg = QColor(58, 100, 220); // 按压时更深 } else if (underMouse()) { bg = QColor(78, 120, 235); // 悬停时亮一点 } else { bg = QColor(70, 110, 230); // 默认 } p.setBrush(bg); p.setPen(Qt::NoPen); p.drawRoundedRect(rect(), borderRadius, borderRadius); // 文字居中，按压时向下偏移 1px 模拟"下压" QRect labelRect = rect().translated(0, isDown() ? 1 : 0); p.setPen(Qt::white); p.setFont(font()); p.drawText(labelRect, Qt::AlignCenter, text()); }

按下的 1px 位移是让按钮"活"起来的点睛之笔——用户反馈特别明显。

4.4 记住密码与自动登录的联动

这俩勾选项联动逻辑很简单：勾了"自动登录"就强制勾选"记住密码"，取消"记住密码"就自动取消"自动登录"。用QCheckBox的toggled信号接一个 lambda 即可。真正的坑在样式：QCheckBox自带的勾选框在某些风格下特别粗糙，我直接隐藏了系统指示器，用setStyleSheet配合自定义图标。

ui->rememberCheckBox->setStyleSheet( "QCheckBox::indicator { width: 16px; height: 16px; }");

或者更极端一点，整个QCheckBox也自己画——但我实测下来没必要，隐藏默认指示器、加一个干净的 icon 基本就够了。

5. 布局健壮性：缩放、字体与高 DPI 适配

5.1 窗口大小可调但内容不散的实现

登录窗口本身没有必要支持任意缩放，但 Windows 上用户会拖拽窗口边缘改变大小。如果什么都不做，子控件坐标就错乱了。

我采用了"以中心为锚点"的策略：窗口宽度变化时，把右侧表单区域整体往右平移，左侧品牌区宽度保持不变；窗口高度变化时，上下间距按比例伸缩。

void LoginWindow::resizeEvent(QResizeEvent* e) { // 右侧表单容器保持在窗口右侧偏左一点的位置 int newX = (width() - shadowMargin * 2 - formWidget->width()) * 0.72; formWidget->move(newX, formWidget->y()); }

这种"伪自适应"其实比用QHBoxLayout更符合登录界面的真实感知——用户拉伸窗口，看到的是右侧表单整体挪动，左侧品牌图区跟着变宽，而不是控件被拉得七扭八歪。

5.2 高分屏缩放：Qt6 的默认行为与 Qt5 的坑

写这篇文章时我用的 Qt 6.5，Qt::AA_EnableHighDpiScaling已经默认开启，不用手动设置。但如果你是 Qt 5.15 或者更早版本，务必在main函数里加上这几行：

QApplication::setAttribute(Qt::AA_EnableHighDpiScaling); QApplication::setAttribute(Qt::AA_UseHighDpiPixmaps);

不加的后果是：在 150% 缩放的屏幕上，整个界面糊成一团，边缘发虚。加了之后，所有坐标会自动乘上缩放系数，但注意自绘代码里QPainter::drawRoundedRect的圆角半径不会自动缩放，高分屏下圆角看起来会偏小。需要自己在devicePixelRatio变化时重新计算圆角。

qreal dpr = devicePixelRatio(); int sharpRadius = qRound(borderRadius * dpr);

这不是大问题，但能注意到这个细节的人，做出来的界面就是会更"锐"一些。

5.3 字体渲染：为什么文字总是显得"飘"

文字是自绘界面最容易翻车的一环。我碰到的情况是按钮文字老是偏上 1-2px，用drawText(rect, Qt::AlignCenter, text)之后依然怪怪的——因为Qt::AlignCenter是把字体的ascent/descent框居中，而不是视觉重心居中。

解决方案是用QFontMetrics拿到文字的实际哈希高度，手动微调：

QFontMetrics fm(font()); int textHeight = fm.height(); int baselineY = rect.center().y() + (fm.ascent() - fm.descent()) / 2 - 1; p.drawText(QPointF(rect.center().x(), baselineY), Qt::AlignHCenter, text);

这个-1或-2的偏移属于玄学调优，但确实让文字更"正"。不同字体差异很大，微软雅黑和思源黑体的视觉重心就不一样，建议用一个常量统一全局微调量。

6. 调试过程中踩过的四个典型问题

6.1 回车键没有触发登录

登录界面用户肯定希望回车直接登录，但默认情况下QLineEdit的回车信号没有接到按钮上。我一开始在LineEdit里returnPressed信号连到登录函数，但发现有时候没触发——尤其是焦点在"记住密码"勾选框上时，回车会被QCheckBox吞掉。

后来我在LoginWindow里重写keyPressEvent：

void LoginWindow::keyPressEvent(QKeyEvent* e) { if (e->key() == Qt::Key_Return || e->key() == Qt::Key_Enter) { onLoginClicked(); return; } QWidget::keyPressEvent(e); }

同时给每个输入框设置setFocusPolicy(Qt::StrongFocus)，保证焦点能正确落在输入框上。

6.2 阴影被窗口边缘裁剪

这个问题前面提到过，但我想再说一次完整的排查过程。现象：窗口右下角阴影特别淡，左上角几乎看不到，把blurRadius调大后更明显。

排查链路：

1. 先怀疑是阴影颜色太浅，调了setColor透明度，无效。
2. 再怀疑是特效作用对象不对，从 window 换到 centralWidget，仍然无效。
3. 最后对比了窗口的实际尺寸和阴影的模糊范围，才发现问题：透明窗口的可见区域是从 0 到 width()，而阴影要在 x=0 到 x=blurRadius 之间扩展——如果窗口本身没有额外边界，阴影的模糊扩散部分就被窗口边界"吃"掉了。

解决就是给所有绘制区域加统一的shadowMargin，并把这个 margin 写进窗口的最小尺寸计算里。圆角矩形要adjusted(shadowMargin, ...)，子控件坐标也要基于这个 margin 的偏移算。

6.3 输入框文字颜色和背景色打架

默认的QLineEdit文字颜色跟随系统主题，浅色背景没问题，但当我画了深色聚焦底线时，文字颜色在某些 Windows 高对比度模式下会变成深色，导致看不清。后来在FlatLineEdit的构造函数里统一固定：

setStyleSheet("QLineEdit { color: #333333; background: transparent; }");

background: transparent很关键，否则我们自绘的圆角背景会被样式表背景盖掉。

6.4 抗锯齿设置不一致导致圆角边缘发白

自绘圆角矩形如果不加抗锯齿，边缘会有明显锯齿；加了抗锯齿，在浅色背景上看不出问题，但如果圆角矩形下面还有阴影，边缘会出现一条半透明白边。这是因为抗锯齿使得边缘像素的 alpha 是渐变的，如果 QPainter 的合成模式不对，边缘就会"叠"出不自然的颜色。

我自己的处理方式是：所有绘制操作都统一setRenderHint(QPainter::Antialiasing)，并且背景填充和阴影绘制所在的 widget 不要重叠太多。如果发白明显，可以试试在画圆角之前先把painter.setCompositionMode(QPainter::CompositionMode_Source)设上，不过这个操作要谨慎，会影响后续所有绘制。

7. 做完之后的几点心得

这个项目最后交付时，对方最满意的不是登录按钮的动效，也不是圆角阴影的细腻，而是打开程序一瞬间的"像"——窗口位置、尺寸、圆角、阴影、左侧品牌色的整体观感，第一眼就让人觉得"对味了"。

我自己做完最大的体会是：纯代码自绘界面，看着像是"从头画一遍"，实际上省掉了样式表和图片资源的维护成本，把界面的最终控制权完全握在自己手里。只要把布局指标抽成常量、把绘制逻辑集中到各自的paintEvent里，这套代码完全可以复制到其他项目——无非是改改颜色、改改文案。

最后再分享一个小技巧：写这类模仿界面前，先把目标截图按 100% 比例铺在一个同尺寸的空白窗体下面，关掉所有系统修饰，直接对着截图调坐标和颜色，效率比反复切窗口高得多。等你调完再把截图去掉，界面已经像了七八成了。

代码这种东西，模仿的从来不只是视觉效果，更是背后那一套对"手感"的追求。希望这篇记录能帮到正在为登录界面发愁的 Qt 开发者。