1. 项目概述为什么QT6界面美化是开发者的必修课如果你用QT做过项目尤其是那些需要交付给最终用户使用的桌面应用你一定有过这样的经历功能明明都实现了逻辑也跑得挺顺但客户或者产品经理看了一眼眉头一皱说“这界面太丑了”、“看着像上个世纪的软件”、“用户体验不好”。那一刻你可能会觉得委屈毕竟代码没bug啊。但现实是在软件同质化严重的今天界面美观度和用户体验UX已经和功能稳定性、性能一起成为了评价一个软件是否成功的核心指标。QT6作为一套成熟的跨平台C框架其强大的功能背后默认的界面风格尤其是Windows上的Fusion或原生风格往往显得过于“朴素”甚至“老旧”直接使用很难满足现代用户的审美和交互预期。因此这个“QT6界面美化与用户体验”的主题绝不是简单的“换换颜色、调调字体”的锦上添花而是一个从“能用”到“好用”、“爱用”的系统性工程。它涉及到对QT样式表QSS的深度掌握、对自定义控件的灵活运用、对动画与过渡效果的巧妙设计以及对整个应用交互逻辑的流畅性打磨。无论是开发商业软件、内部工具还是个人作品一套精心美化过的界面能显著提升软件的专业感、信任度和用户粘性。接下来我将结合自己多年的踩坑经验从设计思路到实操细节为你拆解如何系统性地提升QT6应用的“颜值”与“手感”。2. 核心设计思路从“功能实现”到“体验设计”的思维转变在动手写一行美化代码之前我们首先要完成一次思维上的升级。传统的QT开发思维是“控件驱动”的需要一个按钮就放一个QPushButton需要输入就放一个QLineEdit。而界面美化要求我们转向“体验驱动”的设计思维。2.1 确立统一的设计语言与规范美化不是漫无目的地堆砌效果而是需要一套贯穿始终的设计语言。这就像写代码要遵循编码规范一样。你需要提前定义好以下几个核心要素色彩体系Color Palette确定主色、辅助色、成功/警告/错误色、背景色、文字色等。主色不宜过多通常1-2个用于关键操作和品牌标识。例如你可以定义--primary-color: #1890ff;科技蓝--success-color: #52c41a;成功绿。字体系统Typography选择一套清晰易读的字体族如思源黑体、微软雅黑、San Francisco并定义好各级标题、正文、辅助文字的字体大小、字重和行高。确保在不同DPI缩放比例下都有良好表现。间距与圆角Spacing Border-Radius定义一套基于某个基数如4px或8px的间距系统margin, padding和统一的圆角值。这能带来视觉上的秩序感和节奏感。例如所有按钮的圆角统一为6px卡片的内边距统一为16px。阴影与深度Shadow Elevation通过微妙的阴影来区分元素的层级关系。例如悬浮的按钮可以有轻微阴影对话框的阴影可以更深一些以模拟“浮起”的效果。实操心得强烈建议在项目初期创建一个名为DesignSystem.qss或theme_constants.h的文件用CSS变量或C常量将上述规范定义下来。这样在编写QSS或代码时可以直接引用保证了全局一致性后期修改主题也只需改动这一个文件。2.2 理解QT的样式渲染机制QSS与QStyleQT提供了两种主要的界面定制方式QSSQT Style Sheets和QStyle。它们是美化的两把利器但适用场景不同。QSSQT Style Sheets这是最常用、最快捷的美化方式。其语法类似于CSS可以通过选择器为控件设置样式颜色、边框、背景、内边距等。它的优点是声明式、易于上手、修改方便且能实现大部分视觉效果。核心原理是QSS会覆盖控件由当前QStyle绘制出的基础样式。QStyle这是QT底层绘制控件的引擎。不同的平台有对应的QStyle子类如QWindowsStyle,QFusionStyle。如果你想完全自定义一个控件的绘制行为比如画一个完全圆形的进度条或者实现QSS无法达到的复杂交互状态绘制就需要继承QStyle或QProxyStyle来自定义绘制。核心原理是QStyle定义了“如何画”一个控件如按钮的按下、悬浮、禁用状态分别怎么画。对于90%的美化需求QSS已经足够。但当QSS遇到瓶颈时例如需要自定义QScrollBar的滑块形状或者修改QComboBox下拉箭头的绘制逻辑就需要考虑使用QStyle。本教程将主要聚焦于QSS的深度应用并在必要时提及QStyle的扩展思路。2.3 组件化思维构建可复用的美化控件库不要每次都在不同的窗口里重复写相似的按钮样式。应该将美化后的控件封装成可复用的组件。例如创建一个StyledButton类继承自QPushButton在其构造函数中设置好默认的QSS并暴露一些关键属性如primary,danger供动态切换样式。创建一个CardWidget类继承自QFrame预置好带阴影、圆角和内边距的样式作为信息卡片的容器。这样在UI设计时你就像搭积木一样使用这些预制好的精美组件既能大幅提升开发效率也能保证整个应用界面风格的高度统一。3. 核心细节解析QSS高级技巧与避坑指南掌握了设计思路我们来深入QSS的实战细节。很多人觉得QSS简单但真想做出精致的效果里面门道不少。3.1 选择器的精准使用与优先级QSS选择器的优先级规则与CSS类似理解它才能精准控制样式。类型选择器QPushButton选中所有QPushButton实例。类选择器.QPushButton注意有点在实际使用中与类型选择器效果类似但在多类名场景下有用。ID选择器QPushButton#okButton选中对象名为okButton的按钮。慎用因为它破坏了样式的可复用性。属性选择器QPushButton[flattrue]选中flat属性为true的按钮。非常强大可用于根据控件状态应用样式。子控件选择器QComboBox::drop-down选中组合框的下拉箭头部分。这是美化复杂控件的关键。伪状态选择器QPushButton:hover选中鼠标悬浮时的按钮。QPushButton:checked选中被选中的按钮如可勾选的按钮。优先级计算通常ID选择器 类/属性选择器 类型选择器。更具体的选择器优先级更高。!important声明可以强制提升优先级但应尽量避免使用以免导致样式管理混乱。避坑指南样式不生效的常见原因。选择器优先级被覆盖检查是否有更具体的选择器定义了相同属性。使用QT Creator的“样式表编辑器”或运行时输出控件的styleSheet()属性来调试。属性名拼写错误QSS属性名基本沿用CSS但并非全部。例如border-radius有效但background-color中的-color有时在特定子控件上需要省略直接写background。最可靠的方法是查阅QT官方文档关于“可样式化Styleable”的控件列表及其支持的属性。样式设置在错误的时机在控件构造之后、显示之前设置样式是最稳妥的。如果在构造函数中设置样式要确保父控件的样式不会覆盖它因为子控件会继承父控件的部分样式。3.2 复杂控件的深度美化以QComboBox和QScrollBar为例默认的QComboBox和QScrollBar往往是界面颜值的“重灾区”。我们来彻底改造它们。美化QComboBox目标实现一个现代感的、带圆角和清晰下拉箭头的组合框。/* 主框体 */ QComboBox { border: 1px solid #d9d9d9; /* 边框色 */ border-radius: 6px; /* 圆角 */ padding: 8px 32px 8px 12px; /* 上右下左内边距右侧为下拉箭头留空间 */ background: white; color: #333; font-size: 14px; min-height: 32px; /* 最小高度 */ } /* 鼠标悬浮 */ QComboBox:hover { border-color: #1890ff; /* 主色 */ } /* 按下/展开状态 */ QComboBox:on { /* 注意打开下拉列表时的状态是 :on */ border-color: #1890ff; border-bottom-left-radius: 0; /* 下拉时下边框角变直角与下拉列表衔接 */ border-bottom-right-radius: 0; } /* 禁用状态 */ QComboBox:!editable, QComboBox::drop-down:editable { background: #f5f5f5; } /* 下拉箭头部分 */ QComboBox::drop-down { subcontrol-origin: padding; subcontrol-position: top right; width: 30px; /* 箭头区域宽度 */ border-left: 1px solid #d9d9d9; /* 左侧分隔线 */ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } /* 下拉箭头图标 */ QComboBox::down-arrow { image: url(:/icons/arrow-down.svg); /* 使用SVG矢量图标清晰 */ width: 12px; height: 12px; } /* 下拉列表QAbstractItemView */ QComboBox QAbstractItemView { border: 1px solid #1890ff; /* 与主框体激活时边框同色 */ border-top: none; /* 上边框隐藏与主框体无缝衔接 */ border-radius: 0 0 6px 6px; /* 只圆下角 */ background: white; selection-background-color: #e6f7ff; /* 选中项背景色 */ outline: 0; /* 移除选中时的虚线框 */ padding: 4px 0; } /* 下拉列表中的每一项 */ QComboBox QAbstractItemView::item { min-height: 32px; /* 项的最小高度 */ padding: 0 12px; }美化QScrollBar目标制作一个细长、圆角、带有悬浮效果的现代滚动条。/* 垂直滚动条整体 */ QScrollBar:vertical { border: none; background: transparent; /* 轨道背景透明 */ width: 10px; /* 滚动条宽度 */ margin: 0px; } /* 垂直滚动条的滑块 */ QScrollBar::handle:vertical { background: #bfbfbf; /* 默认颜色 */ border-radius: 5px; /* 使滑块两端变圆 */ min-height: 30px; /* 滑块最小高度 */ } /* 滑块悬浮效果 */ QScrollBar::handle:vertical:hover { background: #8c8c8c; } /* 滑块按下效果 */ QScrollBar::handle:vertical:pressed { background: #595959; } /* 垂直滚动条的上、下箭头通常隐藏 */ QScrollBar::up-arrow:vertical, QScrollBar::down-arrow:vertical { border: none; background: none; height: 0px; /* 高度设为0以隐藏 */ } /* 垂直滚动条的增量和减量区域滑块两端的空白区域 */ QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical { background: none; } /* 水平滚动条同理修改 width/height 等属性 */ QScrollBar:horizontal { height: 10px; } QScrollBar::handle:horizontal { min-width: 30px; }3.3 使用资源文件与SVG图标确保高DPI显示清晰在4K、5K屏普及的今天使用位图png, jpg图标很容易模糊。SVG可缩放矢量图形是解决此问题的最佳方案。将SVG文件添加到QT资源系统.qrc。在QSS中引用SVGimage: url(:/icons/user.svg);。SVG会自动缩放以适应控件大小在任何分辨率下都保持锐利。动态换色有时我们需要根据主题色改变图标颜色。一种方法是使用单色黑色或白色的SVG然后在QSS中结合background-color和mask属性或者更高级地在代码中使用QIcon::addPixmap和QPainter来重新着色。对于简单的颜色替换也可以准备多套不同颜色的SVG资源。注意事项QT对SVG的支持通过QtSvg模块实现。确保在.pro文件中添加了QT svg并且在代码中需要显示SVG图片时使用QSvgWidget或QIcon来加载。4. 实操过程构建一个现代化登录窗口让我们综合运用以上知识从头构建一个具有现代感的登录界面。这个界面将包含Logo、输入框、密码可见性切换按钮、记住我复选框、登录按钮以及底部链接。4.1 界面布局与控件选择我们使用QWidget作为主窗口采用垂直布局QVBoxLayout作为主骨架。顶部区域一个QLabel用于显示Logo使用SVG。中部表单区域一个QFormLayout或嵌套的QVBoxLayout包含QLineEdit用于用户名输入左侧可放置一个用户图标。QLineEdit用于密码输入设置其echoMode为QLineEdit::Password。在其右侧添加一个QToolButton作为“显示/隐藏密码”的切换按钮。这里我们需要将密码输入框和这个按钮放在一个水平布局QHBoxLayout中模拟一个复合控件。QCheckBox用于“记住我”。底部区域一个QPushButton作为登录按钮以及若干QLabel设置为可点击链接样式作为“注册”、“忘记密码”等链接。4.2 分步样式实现与代码集成步骤1创建并加载全局样式表在main.cpp或主窗口的构造函数中读取并设置全局QSS文件。// MainWindow.cpp 构造函数中 MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent) { setupUi(this); // 假设使用UI文件 // 加载样式表 QFile styleFile(:/styles/main.qss); if (styleFile.open(QIODevice::ReadOnly | QIODevice::Text)) { QString styleSheet QLatin1String(styleFile.readAll()); this-setStyleSheet(styleSheet); styleFile.close(); } }步骤2编写main.qss样式表/* 全局字体和背景 */ * { font-family: Microsoft YaHei, Segoe UI, sans-serif; font-size: 14px; color: #333; } QWidget#MainWindow { /* 假设主窗口对象名为MainWindow */ background-color: #f8f9fa; } /* 美化QLineEdit */ QLineEdit { border: 1px solid #dcdcdc; border-radius: 8px; padding: 12px 16px; background-color: white; selection-background-color: #1890ff; /* 选中文本的背景色 */ } QLineEdit:focus { border-color: #1890ff; outline: none; /* 移除默认的焦点虚线框 */ } QLineEdit[echoMode2] { /* 密码输入框echoMode2是Password */ font-family: Segoe UI Symbol; /* 使用一个能显示圆点密码的字体或保持默认 */ } /* 密码输入框容器包含输入框和眼睛按钮 */ .password-container { /* 这个类名需要在实际的容器widget上通过setProperty设置 */ } .password-container QLineEdit { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: none; /* 与按钮连接处无边框 */ } .password-container QToolButton { border: 1px solid #dcdcdc; border-left: none; border-top-right-radius: 8px; border-bottom-right-radius: 8px; background-color: white; width: 40px; /* 固定按钮宽度 */ } .password-container QToolButton:hover { background-color: #f5f5f5; } .password-container QToolButton:pressed { background-color: #e8e8e8; } /* 美化QCheckBox */ QCheckBox { spacing: 8px; /* 文本和复选框之间的间距 */ } QCheckBox::indicator { width: 18px; height: 18px; border: 1px solid #d9d9d9; border-radius: 4px; background: white; } QCheckBox::indicator:hover { border-color: #1890ff; } QCheckBox::indicator:checked { background-color: #1890ff; border-color: #1890ff; } /* 自定义复选框的对勾可以使用图片这里用border绘制一个简易对勾 */ QCheckBox::indicator:checked { image: none; /* 清除默认图片 */ background-color: #1890ff; border: 1px solid #1890ff; } QCheckBox::indicator:checked { /* 利用border绘制一个对勾这是一个技巧 */ border: 2px solid white; /* 白色边框 */ border-top: none; border-right: none; width: 10px; height: 6px; margin: 4px; /* 调整位置 */ background-color: #1890ff; } /* 美化主按钮 */ QPushButton#loginButton { /* 假设登录按钮对象名为loginButton */ background-color: #1890ff; color: white; border: none; border-radius: 8px; padding: 14px; font-weight: bold; font-size: 16px; min-height: 48px; } QPushButton#loginButton:hover { background-color: #40a9ff; } QPushButton#loginButton:pressed { background-color: #096dd9; } QPushButton#loginButton:disabled { background-color: #bae7ff; color: #8c8c8c; } /* 链接样式 */ QLabel[linktrue] { /* 通过属性选择器 */ color: #1890ff; text-decoration: none; } QLabel[linktrue]:hover { color: #40a9ff; text-decoration: underline; cursor: pointer; }步骤3C代码中的逻辑与样式配合// 在MainWindow的初始化函数中 void MainWindow::initUI() { // ... 创建控件 ... ui-usernameEdit-setPlaceholderText(请输入用户名/邮箱); ui-passwordEdit-setPlaceholderText(请输入密码); ui-passwordEdit-setEchoMode(QLineEdit::Password); // 创建一个容器Widget来包裹密码框和眼睛按钮 QWidget *pwdContainer new QWidget(this); QHBoxLayout *pwdLayout new QHBoxLayout(pwdContainer); pwdLayout-setContentsMargins(0, 0, 0, 0); pwdLayout-setSpacing(0); pwdLayout-addWidget(ui-passwordEdit); QToolButton *togglePwdBtn new QToolButton(pwdContainer); togglePwdBtn-setIcon(QIcon(:/icons/eye-closed.svg)); // 初始为闭眼图标 togglePwdBtn-setCheckable(true); // 设置为可切换状态 pwdLayout-addWidget(togglePwdBtn); // 将这个容器插入到原本密码框所在的位置需要调整布局 // ... 布局调整代码 ... // 关键为容器设置一个属性以便QSS选择器能定位到它 pwdContainer-setProperty(class, password-container); // 连接眼睛按钮的切换信号 connect(togglePwdBtn, QToolButton::toggled, this, [this, togglePwdBtn](bool checked) { ui-passwordEdit-setEchoMode(checked ? QLineEdit::Normal : QLineEdit::Password); togglePwdBtn-setIcon(QIcon(checked ? :/icons/eye-open.svg : :/icons/eye-closed.svg)); }); // 设置链接标签 ui-forgotPwdLabel-setText(a href\#\ style\color: #1890ff; text-decoration: none;\忘记密码/a); ui-forgotPwdLabel-setOpenExternalLinks(false); // 禁用自动打开我们自己处理点击 ui-forgotPwdLabel-setProperty(link, true); // 设置属性用于QSS选择器 connect(ui-forgotPwdLabel, QLabel::linkActivated, this, MainWindow::onForgotPwdClicked); // 登录按钮 ui-loginButton-setObjectName(loginButton); // 设置对象名用于QSS的ID选择器 connect(ui-loginButton, QPushButton::clicked, this, MainWindow::onLoginClicked); }通过以上步骤一个具有现代扁平化设计风格、包含交互细节的登录界面就完成了。它不仅有美观的视觉还有良好的交互反馈悬浮、按下、焦点状态。5. 进阶技巧动画与过渡效果提升用户体验静态的美化之后流畅的动画能极大提升界面的“高级感”和用户体验。QT提供了QPropertyAnimation和动画框架来实现。5.1 使用QPropertyAnimation实现简单动画例如为登录按钮添加一个点击时的轻微缩放反馈。#include QPropertyAnimation void MainWindow::onLoginClicked() { QPushButton *btn ui-loginButton; // 创建缩放动画目标对象是按钮属性是“缩放” (scale) 需要自定义这里我们用geometry模拟 // 更优雅的做法是使用QGraphicsEffect或重写paintEvent这里演示一个简单版本 QPropertyAnimation *anim new QPropertyAnimation(btn, geometry, this); anim-setDuration(100); // 动画时长100ms anim-setKeyValueAt(0, btn-geometry()); // 计算一个稍微缩小的矩形 QRect shrunkRect btn-geometry(); shrunkRect.adjust(2, 2, -2, -2); // 四周各向内缩2像素 anim-setKeyValueAt(0.5, shrunkRect); anim-setEndValue(btn-geometry()); anim-start(QAbstractAnimation::DeleteWhenStopped); // 动画结束后自动删除 // 实际登录逻辑... // QTimer::singleShot(100, this, [this](){ doLogin(); }); // 可以延迟执行 }更专业的做法是使用QGraphicsScale效果但代码稍复杂。对于简单的状态过渡如颜色、大小QPropertyAnimation结合样式表变化也很有效。5.2 结合状态机QStateMachine管理复杂界面状态对于有多个状态如登录中、登录成功、登录失败的界面使用QStateMachine可以清晰地管理状态和过渡动画。#include QStateMachine #include QState #include QFinalState #include QSignalTransition void MainWindow::setupStateMachine() { QStateMachine *machine new QStateMachine(this); QState *idleState new QState(); // 空闲状态 QState *loggingInState new QState(); // 登录中状态 QState *successState new QState(); // 成功状态 QState *errorState new QState(); // 错误状态 // 为状态设置属性这些属性变化可以驱动动画 idleState-assignProperty(ui-loginButton, text, 登录); idleState-assignProperty(ui-loginButton, enabled, true); loggingInState-assignProperty(ui-loginButton, text, 登录中...); loggingInState-assignProperty(ui-loginButton, enabled, false); successState-assignProperty(ui-statusLabel, text, 登录成功); errorState-assignProperty(ui-statusLabel, text, 登录失败请重试); // 定义状态转换 idleState-addTransition(ui-loginButton, QPushButton::clicked, loggingInState); // 假设登录完成后会发出loginFinished信号并带一个bool参数表示成功与否 loggingInState-addTransition(this, MainWindow::loginFinished, successState); // 需要连接信号 loggingInState-addTransition(this, MainWindow::loginFinished, errorState); // 如何根据参数判断需要用到带条件的转换 // 更精确的转换使用QSignalTransition和条件判断 QSignalTransition *trans new QSignalTransition(this, MainWindow::loginFinished); trans-setTargetState(successState); // 需要重写eventTest方法来判断信号参数这里简化处理实际应用可能需要自定义Transition类 // 从成功或错误状态一段时间后回到空闲状态 successState-addTransition(new QTimerTransition(2000, idleState)); // 自定义一个定时器转换 errorState-addTransition(new QTimerTransition(3000, idleState)); machine-addState(idleState); machine-addState(loggingInState); machine-addState(successState); machine-addState(errorState); machine-setInitialState(idleState); machine-start(); }使用状态机可以将界面逻辑与业务逻辑更好地解耦使状态流转和对应的UI变化一目了然。6. 常见问题与排查技巧实录在实际美化过程中你会遇到各种稀奇古怪的问题。这里记录一些典型问题和解决方法。6.1 样式不生效或部分生效问题现象设置的QSS完全没有效果。排查首先检查文件路径是否正确样式表是否被成功加载。可以在设置后打印widget-styleSheet()来确认。其次检查选择器是否写错比如控件类名拼写错误QPushbutton是错误的应为QPushButton。问题现象样式部分生效某些属性被忽略。排查这是最常见的问题。原因是QT的某些控件或子控件对QSS属性支持有限。必须查阅官方文档。在Qt Assistant中搜索 “Style Sheet Reference” 和 “List of Stylable Widgets”里面有每个控件支持哪些伪状态、子控件以及属性的完整列表。例如QScrollBar::handle支持background但不一定支持background-image的所有模式。问题现象自定义控件继承自QWidget设置背景色无效。排查默认的QWidget没有背景填充。你需要在自定义控件的paintEvent中自己绘制背景或者设置setAttribute(Qt::WA_StyledBackground, true);这个属性告诉QT使用样式表来绘制背景。6.2 性能问题与优化问题现象界面复杂、样式表很长时窗口显示或缩放有明显卡顿。优化1减少选择器复杂度。避免使用过于复杂或深层嵌套的选择器。尽量使用类选择器或对象名选择器。优化2避免使用border-image或大图背景特别是可伸缩的border-image绘制开销较大。优先使用纯色、渐变或简单的CSS绘制属性如border-radius,box-shadow的简单模拟。优化3对大量重复的项如QListWidget、QTableView的项使用代理Delegate进行样式设置而不是为每一项单独设置样式表。在代理的paint函数中绘制效率更高。优化4将静态的、全局的样式表在应用启动时一次性设置而不是在运行时动态修改。动态修改会触发全局样式重算和重绘。6.3 高DPI屏幕适配问题现象在4K屏上界面布局错乱字体和控件显得特别小。解决方案QT6对高DPI的支持已经很好。确保做到以下几点在main.cpp中在创建QApplication对象之前设置环境变量或属性QApplication::setHighDpiScaleFactorRoundingPolicy(Qt::HighDpiScaleFactorRoundingPolicy::PassThrough);或使用QApplication::setAttribute(Qt::AA_EnableHighDpiScaling);Qt5兼容方式。在样式表中使用px单位时需注意。对于字体、边框等使用px通常没问题QT会自动缩放。但对于图标、固定大小的控件建议使用dp密度无关像素的逻辑可以通过计算屏幕的逻辑DPI来动态设置大小。更简单的方法是使用SVG图标它天生是矢量的。在布局中尽量避免设置固定的像素大小setFixedSize多使用sizePolicy和布局的拉伸因子来让控件自适应。6.4 样式表与代码绘制的冲突有时你需要用QPainter在paintEvent里画一些自定义图形同时又设置了样式表。这时绘制顺序很重要样式表的绘制发生在QWidget::paintEvent的默认实现中。如果你重写了paintEvent并且没有调用基类的paintEvent()那么样式表就会失效。正确的做法是void CustomWidget::paintEvent(QPaintEvent *event) { // 先让基类绘制样式表定义的背景、边框等 QStyleOption opt; opt.initFrom(this); QPainter p(this); style()-drawPrimitive(QStyle::PE_Widget, opt, p, this); // 然后进行你自己的自定义绘制 p.setBrush(Qt::red); p.drawEllipse(rect().center(), 10, 10); }调用style()-drawPrimitive(QStyle::PE_Widget, ...)是触发样式表绘制的关键。界面美化是一个持续迭代和打磨的过程没有一劳永逸的方案。最好的学习方式就是多看优秀的设计如Material Design、Fluent Design等规范多动手实践从一个按钮、一个输入框开始逐步构建起自己的一套QT UI组件库。当你能游刃有余地控制QT界面的每一个像素和每一次交互反馈时你交付的将不再只是一个软件而是一件令人愉悦的产品。