简介：这份资源是一套基于QT框架复刻QQ经典界面的完整工程源码，面向具备C++基础、希望深入掌握QT桌面开发与界面美化的开发者，可用于学习即时通讯类软件UI的搭建思路。压缩包共89个文件，约3.15MB，包含15个cpp源文件、8个头文件、2个ui界面文件及1个pro工程文件，另有36张png与3张jpg图片资源用于头像、图标与背景，并附带qrc资源脚本、Makefile及可执行程序，工程结构完整可直接编译运行。项目覆盖QT Widgets组件、自定义部件绘制、布局管理、信号与槽通信、QGraphicsScene图形场景等核心知识点，好友列表、气泡消息、状态指示等模块均有对应实现。目前已有7815人学习下载，适合作为QT界面开发的实战参考，帮助读者理解从控件布局到资源组织的完整流程，并在此基础上扩展网络通信与数据库等功能。
1. 高仿QQ界面到底在仿什么：从一次翻车说起
很多人第一次用 QT 做高仿 QQ 界面，都是被那张截图骗进来的：左侧一条深色窄边栏，中间会话列表，右侧聊天区，顶部搜索框，底部输入框，看起来结构清晰、控件规整，感觉两三天就能拼出来。真动手才发现，难点根本不在“画出来”，而在“像不像”和“动起来顺不顺”。静态截图能骗过眼睛，一拖动窗口、一滚动列表、一切换会话，圆角错位、阴影发灰、头像拉伸、滚动条突兀，整套界面立刻露馅。
这个标题讲的是用 QT 复刻一套即时通讯客户端的桌面界面，核心是布局体系、自绘控件、样式表和无边框窗口这几件事的组合。它适合两类人：一类是想练 QT 界面能力、拿一个完整度高的小项目练手的开发者；另一类是要给内部工具做一套聊天式交互界面、想直接抄一套成熟视觉结构的工程师。它不解决网络通信和消息协议，重点全在界面层。下面按我实际做过的顺序，把选型、搭建、参数和坑一条条讲清楚。
2. 先定技术路线：QWidget 还是 QML，样式表还是自绘
2.1 两条路线的取舍，别一上来就选错
QT 做这类界面有两条主流路线。一条是 QWidget + QSS（Qt Style Sheets），另一条是 QML + Qt Quick。高仿 QQ 这种偏传统桌面客户端、控件密度高、需要精细控制每个像素的场景，我一般会选 QWidget 路线。原因是 QSS 的盒模型和 CSS 接近，写起来上手快，QWidget 的布局管理器对固定结构支持成熟，调试时还能用 Qt Designer 直接看效果。
QML 的优势在动画和自定义渲染，做那种大面积滑动、粒子、流畅转场更舒服，但它的控件体系和桌面原生控件差异大，做高密度列表和复杂输入框反而更费劲。如果你的目标是“像 QQ 那样规整的桌面客户端”，QWidget 是更稳的选择；如果你要做的是偏移动端风格、动画很重的界面，再考虑 QML。
选型确定后，第二个决策是：哪些部分用 QSS，哪些部分必须自绘。我的经验是，纯色背景、边框、圆角、字体、间距这类，QSS 完全够用；但涉及不规则形状、渐变阴影、头像圆形裁剪、气泡尖角、自定义滚动条滑块，QSS 要么做不到，要么在不同平台表现不一致，这时候就得靠 QPainter 自绘。把这两者混用是常态，关键是划清边界，别在一个控件里既写一大堆 QSS 又重写 paintEvent，后期维护会很痛苦。
2.2 工程骨架与最小可运行结构
先给一个能跑起来的最小骨架，把主窗口、无边框、圆角、阴影这几件事一次性搭好。下面这段是主窗口的初始化代码。
// mainwindow.cpp #include "mainwindow.h" #include <QPainter> #include <QGraphicsDropShadowEffect> MainWindow::MainWindow(QWidget *parent) : QWidget(parent) { // 去掉系统边框，自己画标题栏和圆角 setWindowFlags(Qt::FramelessWindowHint | Qt::WindowMinMaxButtonsHint); setAttribute(Qt::WA_TranslucentBackground); // 背景透明，才能露出圆角外的阴影 // 整体尺寸按 QQ 桌面端常见比例来，宽高比约 1.6 resize(1000, 640); // 给根容器加阴影，注意阴影是加在内部容器上，不是加在顶层窗口 QWidget *root = new QWidget(this); root->setObjectName("rootContainer"); root->setGeometry(12, 12, width() - 24, height() - 24); // 留出 12px 给阴影扩散 QGraphicsDropShadowEffect *shadow = new QGraphicsDropShadowEffect(root); shadow->setBlurRadius(24); shadow->setOffset(0, 4); shadow->setColor(QColor(0, 0, 0, 60)); root->setGraphicsEffect(shadow); } // 自绘圆角背景，QSS 的 border-radius 在无边框窗口上会有锯齿 void MainWindow::paintEvent(QPaintEvent *event) { QPainter painter(this); painter.setRenderHint(QPainter::Antialiasing, true); QPainterPath path; path.addRoundedRect(rect().adjusted(12, 12, -12, -12), 8, 8); painter.fillPath(path, QColor("#FFFFFF")); }这段代码有三个关键点。第一，FramelessWindowHint去掉系统标题栏，但保留了最小化/最大化按钮的窗口标志，方便后续自己实现按钮。第二，WA_TranslucentBackground必须开，否则圆角外的区域会是黑色或白色实心，阴影根本透不出来。第三，阴影加在内部root容器上而不是顶层窗口，因为顶层窗口一旦透明，直接给它加阴影会失效。setGeometry里留出的 12px 就是给阴影扩散用的，这个值要和blurRadius配合，一般取 blurRadius 的一半左右。
2.3 布局拆分：三栏结构怎么切才不打架
QQ 主界面本质是三栏：最左侧窄工具条（头像、消息、联系人、设置），中间会话/联系人列表，右侧聊天区。我的做法是用一个水平布局装三个容器，左侧固定宽度，中间可调，右侧自适应。
// 三栏布局初始化 QHBoxLayout *mainLayout = new QHBoxLayout(root); mainLayout->setContentsMargins(0, 0, 0, 0); mainLayout->setSpacing(0); // 左侧工具条：固定 60px，QQ 实际就是这个量级 m_sideBar = new SideBar(root); m_sideBar->setFixedWidth(60); // 中间列表：默认 260px，允许拖动调整 m_sessionList = new SessionList(root); m_sessionList->setMinimumWidth(200); m_sessionList->setMaximumWidth(400); // 右侧聊天区：吃掉剩余空间 m_chatArea = new ChatArea(root); mainLayout->addWidget(m_sideBar); mainLayout->addWidget(m_sessionList); mainLayout->addWidget(m_chatArea, 1); // 拉伸因子 1，让它优先占满这里有个容易翻车的点：中间列表要支持拖动改宽度，就不能用固定宽度，得配合QSplitter或者自己处理鼠标事件。我一般用QSplitter包住中间和右侧，把handleWidth设成 1，再通过 QSS 把分割线颜色调成和背景一致，视觉上就看不出来，但拖动功能还在。左侧工具条用setFixedWidth锁死，因为 QQ 的左侧栏从来不参与拉伸。
3. 会话列表和聊天气泡：自绘控件的参数怎么调
3.1 会话列表项：QListWidget 还是自定义 delegate
会话列表每一项包含头像、昵称、最后一条消息、时间、未读红点。用QListWidget加自定义QStyledItemDelegate是最省事的做法，因为滚动、选中、键盘导航这些 QT 都帮你处理好了。自己从零写一个滚动列表，光惯性滚动和滚动条同步就够调半天。
下面是一个 delegate 的paint核心逻辑。
// sessiondelegate.cpp void SessionDelegate::paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &index) const { painter->save(); painter->setRenderHint(QPainter::Antialiasing, true); QRect r = option.rect; bool selected = option.state & QStyle::State_Selected; // 选中态背景：QQ 用的是浅灰蓝，不是纯灰 if (selected) { painter->setBrush(QColor("#E9F0FD")); painter->setPen(Qt::NoPen); painter->drawRoundedRect(r.adjusted(4, 2, -4, -2), 6, 6); } // 头像：圆形裁剪，固定 40x40，左边距 12 QRect avatarRect(r.left() + 12, r.top() + 10, 40, 40); QPixmap avatar = index.data(AvatarRole).value<QPixmap>(); QPainterPath clip; clip.addEllipse(avatarRect); painter->setClipPath(clip); painter->drawPixmap(avatarRect, avatar.scaled(40, 40, Qt::KeepAspectRatioByExpanding, Qt::SmoothTransformation)); painter->setClipping(false); // 昵称：14px，深色；消息预览：12px，灰色 QRect nameRect(avatarRect.right() + 10, r.top() + 12, r.width() - 90, 20); painter->setPen(QColor("#1A1A1A")); QFont nameFont = painter->font(); nameFont.setPixelSize(14); painter->setFont(nameFont); painter->drawText(nameRect, Qt::AlignLeft | Qt::AlignVCenter, index.data(NameRole).toString()); QRect msgRect(avatarRect.right() + 10, r.top() + 34, r.width() - 90, 18); painter->setPen(QColor("#999999")); QFont msgFont = painter->font(); msgFont.setPixelSize(12); painter->setFont(msgFont); painter->drawText(msgRect, Qt::AlignLeft | Qt::AlignVCenter, index.data(LastMsgRole).toString()); painter->restore(); }参数上要盯住几个值。头像 40x40 是 QQ 桌面端的实际尺寸，圆角列表项的内边距用adjusted(4, 2, -4, -2)，这样选中背景不会贴到列表边缘。昵称和消息预览的左边距都是头像右边加 10px，这个间距太小会显得挤，太大又浪费横向空间。字体用setPixelSize而不是setPointSize，因为像素尺寸在不同 DPI 下更可控，配合 QT 的高 DPI 缩放策略不容易糊。
3.2 聊天气泡：尖角、圆角、最大宽度三个参数
气泡是这类界面里最容易做丑的部分。核心就三件事：圆角半径、尖角位置、最大宽度。圆角我一般用 8px，尖角用 QPainterPath 在气泡一侧画一个小三角，最大宽度设成聊天区宽度的 60% 左右，超过就换行。
// 绘制一个左侧气泡（对方发来的消息） void ChatBubble::paintEvent(QPaintEvent *event) { QPainter painter(this); painter.setRenderHint(QPainter::Antialiasing, true); int radius = 8; int arrowW = 8; // 尖角宽度 int arrowH = 12; // 尖角高度 QRect bodyRect = rect().adjusted(arrowW, 0, 0, 0); QPainterPath path; path.addRoundedRect(bodyRect, radius, radius); // 在左侧中间偏上位置加尖角 QPainterPath arrow; int arrowY = 16; arrow.moveTo(bodyRect.left(), arrowY); arrow.lineTo(bodyRect.left() - arrowW, arrowY + arrowH / 2); arrow.lineTo(bodyRect.left(), arrowY + arrowH); arrow.closeSubpath(); path = path.united(arrow); painter.setPen(Qt::NoPen); painter.setBrush(QColor("#FFFFFF")); painter.drawPath(path); // 文字区域要避开尖角，左边距至少 arrowW + 12 QRect textRect = bodyRect.adjusted(12, 8, -12, -8); painter.setPen(QColor("#1A1A1A")); painter.drawText(textRect, Qt::TextWordWrap, m_text); }尖角高度 12px、宽度 8px 是我试出来比较接近的比例，太小看不出是尖角，太大显得笨重。尖角的纵向位置固定在距顶部 16px 处，这样无论气泡多高，尖角都对着头像中心附近。文字区域的左边距必须大于尖角宽度，否则第一行文字会被尖角压住。气泡背景用纯白，配合聊天区的浅灰背景#F5F5F5，层次就出来了。
3.3 输入框和发送按钮的联动细节
输入框用QTextEdit，但要去掉默认边框和滚动条，自己控制高度。发送按钮的可用状态跟着输入内容走，空内容时置灰。
// 输入框内容变化时更新发送按钮状态 connect(m_inputEdit, &QTextEdit::textChanged, this, [this]() { QString text = m_inputEdit->toPlainText().trimmed(); m_sendBtn->setEnabled(!text.isEmpty()); // 输入框高度随内容增长，但不超过 120px int docHeight = m_inputEdit->document()->size().height(); int targetHeight = qBound(40, int(docHeight) + 16, 120); m_inputEdit->setFixedHeight(targetHeight); });qBound(40, ..., 120)把输入框高度锁在 40 到 120 之间，低于 40 显示不全，高于 120 会挤占聊天区。document()->size().height()拿到的是文档实际高度，加 16 是上下内边距。这个联动不做的话，用户输入多行时要么看不到内容，要么输入框把整个布局撑变形。
4. 避坑与排查：高仿界面最容易翻车的五个地方
4.1 无边框窗口拖动卡顿、最大化后错位
现象是拖动标题栏时窗口跟手延迟明显，最大化后圆角和阴影位置全乱。原因是拖动逻辑写在了mouseMoveEvent里直接move()，没有做节流，而且最大化时窗口几何变了但内部容器的setGeometry没跟着更新。解决办法是用frameGeometry和pos的差值来算偏移，并且在changeEvent里监听WindowStateChange，最大化时把内部容器的边距改成 0，还原时再改回 12。
4.2 圆角处出现锯齿或黑边
现象是圆角边缘有一圈灰黑色。原因是只开了Antialiasing但没开SmoothPixmapTransform，或者顶层窗口透明属性没设。检查两点：setAttribute(Qt::WA_TranslucentBackground)是否在resize之前调用；paintEvent里是否用了QPainterPath而不是直接drawRoundedRect。直接drawRoundedRect在某些平台上圆角抗锯齿会失效。
4.3 列表滚动时头像闪烁
现象是快速滚动会话列表时头像一闪一闪。原因是 delegate 里每次都重新scaled头像，开销大且没缓存。解决办法是在 model 里预先存好缩放后的QPixmap，delegate 只负责画。另外把QListWidget的setUniformItemSizes(true)打开，滚动性能会明显提升。
4.4 高 DPI 屏上字体和控件比例失调
现象是在 4K 屏上界面整体偏小或模糊。原因是没启用高 DPI 缩放。在main函数里，QApplication构造之前设置QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling)，并且所有尺寸尽量用逻辑像素，图片资源准备 2x 版本。如果用的是 QT 5.14 以上，还可以设setHighDpiScaleFactorRoundingPolicy来控制缩放取整策略。
4.5 QSS 和自绘冲突导致样式不生效
现象是给某个控件写了 QSS 但没反应，或者自绘之后 QSS 背景被覆盖。原因是 QSS 和paintEvent自绘同时作用于同一个控件时，QSS 先画、自绘后画，自绘会把 QSS 盖掉。解决办法是二选一：要么全用 QSS，要么在自绘控件上不要写背景相关的 QSS。如果必须混用，在自绘里先调用QStyleOption走一遍默认绘制，再叠加自定义内容。
5. 让界面真正像 QQ 的两个进阶技巧
第一个技巧是消息气泡的“尾巴”跟随。QQ 的气泡尖角不是固定位置，而是跟着头像垂直居中。实现方式是在气泡控件里根据自身高度动态计算尖角的 y 坐标，而不是写死 16px。具体做法是在resizeEvent里更新尖角位置，然后update()触发重绘。这样无论气泡是一行还是十行，尖角始终对着头像中心，视觉上就自然了。
第二个技巧是会话列表的未读红点。红点本身简单，难的是数字超过 99 时的显示和红点与昵称的对齐。我的做法是把红点画在 delegate 的右上角区域，宽度根据数字位数动态算：一位数用 16x16 圆形，两位数用 20x16 圆角矩形，超过 99 显示“99+”。红点的右边距固定 12px，和列表右边缘对齐。这个细节做对了，整个列表的精致度会提升一个档次。
还有一个我踩过的坑：窗口缩放时，聊天区的消息列表要保持在底部。做法是在resizeEvent里记录滚动条是否已经在底部，如果是，缩放后重新滚到底；如果用户手动往上翻了，就不要强制拉回底部。这个逻辑不加的话，每次调整窗口大小，聊天记录都会跳回顶部，体验很差。
我自己的习惯是，每做完一个自绘控件，先在 100%、125%、150% 三种缩放下各截一张图对比，肉眼看比例有没有走样。这个动作花不了几分钟，但能提前发现大部分高 DPI 问题。界面这东西，参数差几个像素，整体气质就变了，别嫌麻烦。希望帮到你。
本文还有配套的精品资源，点击获取
