不用客气咱们直接上干货。Qt Design Studio 这个词很多人一听就觉得是“给设计用的工具跟我写代码的关系不大”但实际上它正好是卡在设计师和开发者中间的那层胶水。我最早接触它的时候也以为只是个画界面的玩具后来自己完整跑通了一个从设计图到 QML 工程落地的流程才意识到这个工具的价值在哪。这篇就跟你好好聊聊Qt Design Studio 到底是什么、怎么从零开始把界面做出来以及你在做的过程中最容易踩的那些坑。如果你正想把 Figma 或者 Sketch 里的一稿 UI 变成真正能跑的界面或者你是 Qt 开发出身、但一直觉得手写 QML 排版太磨叽那这篇文章很适合你。它会告诉你 Qt Design Studio 在整个 UI 生产链路里扮演什么角色从环境准备到组件搭建再到状态切换、动画时间轴和最后的工程导出每一步该怎么做、为什么要这么做我都会拆开来写清楚。1. 先搞清楚 Qt Design Studio 到底在解决什么问题1.1 为什么我会觉得它不只是“画板的升级版”很多人第一次打开 Qt Design Studio第一反应是“这不就是个画界面工具吗跟 Photoshop 差不多”。这个判断只说对了一半。它和传统设计工具最大的区别在于它操作的底层对象不是像素而是真正的 Qt Quick 控件和 QML 元素。你在画布上拖一个按钮出来它背后对应的就是一个Button {}组件你调整圆角改的是这个控件的radius属性你在时间轴上拉一个位移动画最后导出去是一段 QML 代码里的PropertyAnimation。这意味着什么意味着你画的每一笔落下去都带着“可运行”的属性。它不需要像传统流程那样设计师画完图开发再照着图重新用代码“画”一遍。Qt Design Studio 存在的最核心价值就是让你在设计阶段离最终可运行的代码更近让设计和开发之间的翻译成本降到最低。我实际用下来最舒服的一个场景是这样的设计师在 Qt Design Studio 里把页面排好、状态都定义清楚、动效也调好然后导出工程给开发。开发拿到的不是一张张标注图而是一个可以直接编译的 .ui.qml 文件。这份文件里控件的层级、间距、动画曲线、状态切换关系全都保留着开发要做的只是把界面逻辑和真正的业务数据接上去。所以不要把它当成一个孤立的设计工具来看它是连接“设计想法”和“真实界面运行”的桥梁。理解了这层你再去看它那些功能模块就会觉得每一块都顺理成章。1.2 它能做出来的“炫酷 UI”到底指什么标题里的“炫酷 UI”不是那种加了大量特效闪瞎眼的风格而是指界面有明确的层次、有合理的状态反馈、有流畅的转场动画。比如一个侧边栏的滑入滑出一个卡片点击后的缩放反馈一个页面切换的淡入淡出一个进度值变化时伴随的渐变色变化这些通通可以用 Qt Design Studio 搭出来。我做过一个智能家居的面板界面最核心的页面是几个功能卡片每个卡片上有图标、名称、状态开关和一个圆形的数值进度环。如果全部手写 QML光调一个环形进度动画就要花不少心思但在 Qt Design Studio 里你可以直接用Arc或者自定义圆形控件用状态和时间轴把“数值变化”变成一段可控的动画整个过程所见即所得。还有人关心“这个工具是不是只能做桌面端界面”其实不是。Qt Design Studio 面向的是整个 Qt 生态它可以输出到桌面应用、嵌入式设备界面、车载系统 HMI甚至一些工业控制面板。只要底层是 Qt Quick / QML 渲染它就能覆盖到。这也是为什么很多汽车仪表盘、智能家电屏幕的 UI 团队会在流程里加入 Qt Design Studio 的原因。1.3 桌面端、嵌入式、还是纯 UI 设计选型时先看这份清单我在知乎和群里经常看到有人纠结“我到底要不要学 Qt Design Studio” 这个问题不能一概而论建议你先对号入座看看属于哪类场景。如果你是桌面软件开发比如用 Qt Widgets 写传统桌面程序那我要老实说一句Qt Design Studio 帮不上太多忙。它产出的是 QML 界面适合在 Qt Quick 体系下运行的场景。Qt Widgets 和 Qt Quick 是两套技术栈如果你是 Widgets 老玩家学它更多是为了往 Qt Quick 方向迁移做准备。如果你是做嵌入式或车载 HMI 开发那 Qt Design Studio 对你是很有价值的。因为这类界面本质上是“效果图 → 可运行界面”的模式而且往往需要和设计团队紧密配合。用这个工具可以把设计稿快速转成带有可交互属性按钮高亮、页面切换、动画反馈的原型比静态图强太多了。如果你是 UI 设计师想找一个能把设计稿变成可运行原型的工具Qt Design Studio 同样合适。但你需要先理解一个概念它不是用来画视觉稿的不像 Figma 那样自由。你最好是先在 Figma / Sketch 里定好视觉效果再到 Qt Design Studio 里还原和搭建交互骨架或者直接用它做高保真原型验证。所以拿它之前先问自己一句我的目标是 Qt Quick / QML 体系下的界面开发吗如果是可以冲如果你只是想要一个类似前端开发那样的组件库管理工具那思路得换一换。2. 从零到一安装项目环境和理解核心工作流2.1 安装时容易忽略的三个细节Qt Design Studio 的安装跟在官网下载维护工具就行但这里有几个细节很多人没注意头一次装完一脸懵。第一个是版本匹配。Qt Design Studio 通常对应一个 Qt 版本安装之前看清楚你本地的 Qt 环境是什么版本保持两者尽量一致。不一致不是不能用但导出工程到 Qt Creator 里编译时可能会出现版本库对不上的情况。我平时习惯用官方维护工具里自带的版本配套方案装这样省心。第二个是安装组件选择。默认的安装里不一定会把所有需要的模块都勾上。如果你要做实时预览或者连到设备调试建议在安装时额外勾选 Qt Quick 相关的开发模块还有 Qt Design Studio 自带的示例资源和模拟器组件。不想重装的话维护工具里后续可以补但提前勾上能省一次下载等待。第三个是许可证模式。Qt Design Studio 分商业许可和社区许可社区版可以免费体验但有些高级功能包括部分导出和协作模块是商业版才解锁的。安装前我先说清楚这件事免得你辛辛苦苦做完了一个工程发现导出按钮是灰的。装完之后打开你会看到几个入口新建项目、打开示例、打开最近项目。第一次建议把官方自带的示例跑一遍尤其是那个带有仪表盘和动画的示例。我自己的经验是把示例完整跑起来之后能满足你对它能力边界一半以上的好奇心比自己瞎拖控件要快得多。2.2 工作界面里最值钱的四个面板Qt Design Studio 的工作界面布局跟很多设计工具类似但有几个面板的用途和名字你得先记住。它们分别是“导航面板”、“表单编辑器”、“连接编辑器”和“时间轴”。导航面板类似你设计工具里的图层面板。它可以清楚地看到整个界面的嵌套结构哪个页面是由哪个组件组成的哪个元素是哪个元素的子节点。这个面板非常重要因为 QML 里的布局逻辑就是从上到下嵌套的。很多新手在画布上拖了一堆控件最后不知道谁是谁的孩子到后面连改一个属性都不知道去哪改就是因为没养成看导航面板的习惯。表单编辑器就是属性面板。你选中画布上的某个元素时它会把该元素的所有可配置属性列出来比如坐标、宽度、高度、颜色、圆角、字体、对齐方式。这是你操作最频繁的区域我建议你花一点时间把常用属性和 QML 里的属性名对应起来后面看代码时会非常轻松。连接编辑器是信号与槽的可视化编辑工具。你可以把某个按钮的clicked信号连接到页面的某个状态或者连接到某个字段更新的逻辑。对于不熟悉编码的设计师来说这个面板很友好你不需要写一行代码就能建立起界面元素之间的交互关系。时间轴是用来做动效的核心区域。它跟视频编辑软件里的时间轴类似你可以选择某个元素给它加关键帧然后 Qt Design Studio 会自动生成中间的插值动画。做 UI 动效时很多细腻的缓动曲线就是在这里调出来的。这四个面板配合起来就是 Qt Design Studio 的日常在导航面板里理结构在画布上选元素在表单编辑器里改属性在时间轴里做动效在连接编辑器里处理交互。逻辑非常清晰。2.3 项目文件、UI 文件、QML 之间的关系理解 Qt Design Studio 的文件结构能帮你少走很多弯路。一个 Qt Design Studio 项目里最核心的东西有两类.qmlproject工程文件和.ui.qml界面文件。.qmlproject是 Qt Quick 项目的工程描述文件类似前端项目里的 package.json。它记录了项目包含哪些资源、哪个文件是入口、编译预览时用哪个 Qt 版本。这个文件一般不用手动改Qt Design Studio 会自动维护。.ui.qml是界面文件的格式。它不是纯 QML而是把 UI 结构化的格式。.ui.qml里的内容只能描述界面层级、属性、状态、动画不能写复杂的业务逻辑。这样做的好处是设计师在 Qt Design Studio 里修改不会碰掉代码里的业务逻辑开发者可以把逻辑写在对应的普通.qml文件里两个文件通过 id 关联。我第一次看到.ui.qml的时候还疑惑为什么系统和普通的.qml长得不太一样。实际上.ui.qml本质上是一种“限定的 QML 子集”它只包含 UI 表现的声明不能包含 JavaScript 函数和动态逻辑。这种分离模式你在团队协作时会觉得非常香设计做设计开发做开发互不干扰。实际项目里通常是一个界面一个.ui.qml比如MainPage.ui.qml、SettingsPage.ui.qml然后有一个Main.qml作为应用入口加载初始页面并处理页面跳转逻辑。3. 核心实操搭界面、做状态和动效的具体方法3.1 如何从一张空白画布快速搭出首屏框架新建一个项目后你会获得一个默认的空页面。这时候先别急着到处拖控件我建议你先想清楚“这一屏的结构是什么”。我拿一个典型的 App 个人主页来举例从上到下通常是顶栏带标题和返回按钮、内容区包含用户头像、昵称、数据统计、底部标签栏三个 Tab。在 Qt Design Studio 里你应该先用布局容器把层级框出来。比如顶栏用一个RowLayout内容区用一个ColumnLayout底部标签栏再放一个RowLayout。在导航面板里建好这几层后再往布局里填充具体控件。这样做的好处是界面整体是流式布局的窗口尺寸变化时控件能自动适应不会出现一拉伸就全乱掉的情况。具体操作上你可以在“组件库”面板里搜索 Container 相关的布局组件拖到画布。等你有了一个基础结构再往里拖按钮、图像、文本字段。我记得第一次用的时候犯过一个错一开始就拖了一堆按钮放到画布上结果我想调整它们之间的间距时只能一个个手动改坐标没有联动。后来才明白布局容器的工作得放在前面。我建议你练习时先建一个不含具体内容的空布局骨架体会一下拖入RowLayout后再向其内部添加子元素时位置和大小是如何自动排布的。理解了这个你会觉得 UI 搭建的效率一下就上来了。3.2 属性设置里的核心参数锚点、边距和大小策略属性设置是 UI 搭建的核心但很多人被“锚点”这个概念拦住了。锚点可以理解为你希望当前元素对齐父容器或其他元素的哪条边。比如你有一个弹出面板你希望它始终贴住窗口左下角那你就可以把面板的left和bottom锚点设置到父容器的left和bottom再加一个边距值。在 Qt Design Studio 的表格编辑器里你可以直接设置锚点的对齐方式不用手写代码。但我想强调一下锚点是 Qt Quick 布局系统的核心它和前端 CSS 里的 Flex 布局、Grid 布局是完全不同的思路你越早理解它越能发挥 Qt Quick 的布局优势。还有一个重要概念是大小策略。控件在布局里是否随窗口缩放是固定大小还是自适应这些由Layout.fillWidth、Layout.fillHeight、Layout.preferredWidth这些属性决定。在表单编辑器里这些属性集中在“布局”分类下。我的经验是顶层容器尽量用自适应底层控件根据内容需求混合使用固定和弹性尺寸千万不要全都固定死。举个例子一个底部标签栏通常高度固定 56 或者 60但宽度要均匀撑开。这时候把三个 Tab 放进一个RowLayout每个 Tab 的Layout.fillWidth设为 true就能自动等分宽度。3.3 状态系统不是只做一版布局而是做多个“形态”态系统是 Qt Design Studio 颇为亮眼的部分。如果你是做界面的免不了要处理“按钮按下去的样子”、“开关打开的样子”、“弹窗出现的样子”。一种古老的笨办法是复制多个页面切换时隐藏显示但这样不仅工程冗余而且容易出 bug。在 Qt Design Studio 里状态是在单个组件内部定义的“不同属性快照”。你可以在“状态”面板里添加一个状态然后切换到那个状态下去修改某些控件的属性值比如把一个按钮的背景色从灰变成蓝。这样界面就有了两个状态默认状态和“点击后”状态。切换只需要调用状态的名称系统会自动把属性过渡到目标值。状态系统跟动效结合得也很紧密。每个状态切换之间可以指定过渡动画。你切到“打开弹窗”状态时弹窗的透明度从 0 变成 1x 坐标从 20 变成 100这些属性变化可以被时间轴自动补成动画不会有任何生硬的感觉。我在实际项目中常用状态来管理“空数据页”“加载页”“有数据页”之间的切换。三个状态共用一套布局容器只是内部控件展示不同。这样代码量少了很多而且页面切换时如果加上淡入淡出体验会显得很流畅。3.4 时间轴动画只做这几个操作UI 立刻灵动起来做动画我觉得没有必要一上来就研究复杂的嵌套动画先掌握三个最常用的手法就够用了。第一个是显隐动画。比如一个提示框从透明不可见变成透明可见。你在时间轴面板选择这个提示框在 0 毫秒处把opacity设为 0在 300 毫秒处把opacity设为 1然后播放。Qt Design Studio 会自动补出淡入效果。这个操作五分钟就能学会但你几乎可以在所有弹窗里用它。第二个是位置动画。比如侧滑菜单初始时把它的 x 坐标设为负数让它藏在屏幕外在时间轴 500 毫秒处把 x 改为 0。播放后菜单就像从左边滑出来一样。第三个是属性动画。比如颜色变化或者缩放变化。选中一个按钮在时间轴里让它从原始大小缩放到 0.95这在交互反馈里很常用。做时间轴动画的时候稍微需要注意缓动曲线的选择。Qt Design Studio 里默认的缓动是匀速但匀速动画在真实 UI 里看起来其实很“钝”。我一般会把关键帧的插值改成Easing.OutCubic它的效果是“起步快、结尾慢”很像现实世界的惯性。你在动画曲线编辑器里可以直接拖拽调整不用记参数名。提到一个经验动画时长别贪多。300 毫秒是很多界面转场的黄金时长。太快会看不清过程太慢会让用户觉得卡顿。尤其是在一些高频点击的按钮反馈里100 到 150 毫秒就够了。我们做界面不是在拍电影不需要每段动画都有强烈的存在感点到即止反而显得高级。3.5 图片资源和图标导入让界面不只是灰盒子光有控件界面还显得有点“素”。真实项目里一定会有图片、图标、字体等素材资源。在 Qt Design Studio 里项目提供了一个assets文件夹你可以直接把图片拖进去。然后在画布中使用Image组件选择对应的图片资源就能显示出来。图标这块我的建议是尽量使用 SVG 格式。Qt Quick 对 SVG 支持得还可以而且 SVG 是矢量的缩放不失真还能通过修改色调来适配主题。如果你手上是 PNG 图标最好能在导入前确认分辨率足够高否则在高分屏下会糊。还有一个实用小技巧如果一张图片只是作为背景且不参与交互就用Image控件把z值调成负数避免遮挡其他控件的点击事件。如果图片上有文字笔刷之类的装饰建议直接在图片设计软件里把文字栅格化不要试图在 Qt 里用图片和文本动态叠加去做横幅维护成本会高出不少。素材资源管理我有过惨痛教训不重命名的图片时间长了根本不知道哪个是哪个。我后来的习惯是图片资源都按icon_、img_、bg_前缀分类这样在资源管理器里一眼就能看出来用途。4. 交互和数据的衔接让界面真正“活”起来4.1 用连接编辑器给界面加上基础交互Qt Design Studio 里你不需要懂 JavaScript也能给界面加上交互。比如有一个按钮我点击它时想切换到一个新状态这在连接编辑器里很容易实现。操作方法是选中你的按钮然后在连接编辑器窗口里新建一条连接。连接左侧是“事件”选clicked右侧是“响应”选择你要实现的动作例如“切换状态到 xxx”。保存后切换到 Preview 模式去点这个按钮就会看到界面变化。这些可视化的连接最终会生成 QML 里的信号处理器代码。对开发来说这部分是透明的后面可以在代码里继续做更复杂的逻辑不会破坏 UI 的基本交互。注意一点连接编辑器能拖出来的交互主要是基础交互。比如打开页面、切换状态、控制动画播放。如果要做更复杂的逻辑判断比如网络请求后 UI 根据结果展示那必须找开发在代码里配合。把 Qt Design Studio 理解成“高保真可点击原型”更合适一些。4.2 演示数据与数据绑定如何让界面显示动态内容做界面不能只写死文本。Qt Design Studio 里虽然也可以直接双击文本改成固定值但如果你想验证不同长度、不同数据下的UI表现最好用数据绑定来模拟。数据绑定是 QML 里很强的特性。简单来说你可以定义一些“属性”或者“动态属性”比如property string userName: 张三然后让界面上的文本text属性绑定到这个属性上。当属性值变化时界面会自动刷新。在 Qt Design Studio 里你可以在表单编辑器的某个属性旁边找到绑定按钮点开后输入表达式比如parent.width / 2就能让元素宽度始终等于父容器的一半。更实用的是联机编辑里提供示例数据面板你可以直接指定模型数据和字段内容然后拖拽到界面上生成重复项。这对于做列表页非常节省时间。我做过一个设备列表页先定义了一个ListModel里面放了几条设备数据然后在设计界面里用一个Repeater或者ListView绑定到这个模型上每一条卡片自动重复字段自动填充。页面瞬间像真实数据的样子。这里要专门提醒一句数据绑定写错表达式时Qt Design Studio 的预览会比较安静不弹错误你只能发现界面没变化或者显示undefined。排查时多看看表单编辑器下方黄色叹号区域点击能看到详细错误信息。4.3 从设计原型到真实工程的职责划分很多团队会问Qt Design Studio 里要做多少剩下的交给开发按照我所在的团队的流程Qt Design Studio 这边的职责大概到“可交互且带演示数据”的原型为止。设计师会完成页面的结构搭建、状态定义、动画调整和视觉细节用模拟数据把整体效果撑起来。开发的工作是把演示数据替换成真实接口数据把信号连接到业务逻辑必要时对某些性能瓶颈做优化。这种协作模式最大的好处是开发拿到的不是一个半成品而是已经跑得起来的界面骨架。开发不需要去 QML 文件里重新排界面也不需要逐行调属性只需要专注在逻辑层以及处理真实数据可能带来的边界情况。如果你是一个人开发这个分工可以简化先在 Qt Design Studio 里把界面打磨到满意再导出工程到 Qt Creator 中补充逻辑。这样做会比直接在 Qt Creator 里边想界面边写逻辑更容易保持设计一致性。5. 实际项目里会遇到的问题和排查技巧5.1 打开工程却一片空白常见原因是什么刚把工程从 A 电脑拷贝到 B 电脑打开时偶尔会遇到预览一片空白。这通常不是工程文件坏了而是资源路径没对上。Qt Design Studio 在加载图片资源时如果图片文件被移动过位置或者删除了界面上就会显示空白。解决办法是检查资源文件夹assets 目录里的图片是否还在再打开“资源管理器”面板看看有没有显示红色感叹号的失效资源。把资源路径统一整理成相对路径别用绝对路径。绝对路径在换机器后很容易断。还有一种情况是 QML 语法错误但不明显比如某个属性值写错导致整个组件拒绝加载。可以在“工具”菜单里打开 Qt 调试输出看运行时有没有报错。这一步看起来简单但能省去大量猜谜时间。5.2 预览和导出后运行效果不一致为什么预览效果看起来很好但导出到 Qt Creator 里跑起来字体变大了或者间距变了这类问题经常出现在不同设备的分辨率和缩放比上。Qt Quick 界面的逻辑分辨率与实际屏幕像素密度是两回事设计预览窗口的默认缩放比不一定跟你目标设备的一致。我的经验是在 Qt Design Studio 里布置界面时尽量使用布局和锚点避免直接把元素定位在绝对坐标上。绝对坐标在批量适配不同屏幕时会非常痛苦。同时在设计阶段就把目标屏幕的长宽比填到预览配置里用目标配置做预览这样导出去之后的效果基本不会走样。如果差异出现在字体上检查一下目标环境是否安装了你在工程里使用的字体文件。开发机的系统字体和你的设计机上往往不一样为了避免字体缺失时被替换成默认字体我会把字体文件一并打包到工程资源目录中用 QML 的 FontLoader 注册确保目标设备上字体始终一致。5.3 界面卡顿、动画掉帧第一优先级排查哪些点之前热搜词里也有“ui界面卡顿”可见这是很多人头疼的问题。Qt Quick 界面卡顿的常见原因排序靠前的通常是大量图片直接全尺寸加载、动画过程中反复计算布局、列表里堆了太多复杂控件、过度用阴影模糊特效。先说图片。一张分辨率是手机屏幕两倍大的图直接放进Image且不做缩放处理内存和 GPU 负担都会很高。在 Qt Design Studio 里最好在资源导入时就把大图按实际显示尺寸生成多倍分辨率版本。如果你发现某个页面静态显示时滚动卡优先检查是不是图片资源过大。再说动画。动画过程中如果动画属性是x、width这类会触发布局重算的属性性能开销会比耗时更大。相比之下尽量使用transform里的translate和scale这类纯图形属性不会影响附近元素的位置。我这几次经验对比下来同样是移动一张卡片用x和用translate在性能上差距挺明显的。阴影和模糊是视觉效果担当但也是性能杀手。大面积高斯模糊盖在滚动列表上卡顿几乎无法避免。我更推荐的做法是模糊效果尽量只用于静态定位、且不常更新的层滚动内容上的模糊能用透明度渐变模拟就让模拟来。5.4 排查工具怎么用Debug View 和 Info 输出Qt Design Studio 提供了一些调试能力其中我觉得最有用的是场景图调试。你在预览窗口里可以打开 Debug View它会显示当前渲染的每一个节点以及节点的边界框和绘制耗时。通过观察哪些节点在变化哪些节点重绘次数比较多你能快速定位到卡顿高发区。还有一个手段是利用 console 输出。如果你在代码里加了console.log()打点输出会显示在 Qt Design Studio 下方日志面板。这在检查状态切换的是否触发、动画是否结束时非常管用。我给一个简单有效的用法在某个复杂的页面里先关掉一半的图片和特效跑起来看是否流畅。如果流畅了再逐个放开很快就能找到元凶。这个方法听起来很原始但我每次优化 UI 性能时都会先用它排除变量。5.5 五个常见问题的速查表为了方便你以后排查我把 Qt Design Studio 初学者最常遇到的 5 个情况整理成了一张速查表。你可以把它截图存进自己的笔记也可以在碰到类似问题时直接对号入座。问题可能原因解决方法预览窗口空白资源路径失效、QML 语法报错打开资源管理器修失效文件查看调试输出定位语法错误导出的界面宽高比例不对未按目标屏幕配置预览参数在项目设置里明确目标设备分辨率与缩放比图片显示模糊原图分辨率不足或未做多倍数切图替换高分辨率资源导入时按显示尺寸生成对应倍率点击按钮没有反应按钮被其他元素遮挡或连接没建好检查层级和 z 值确认连接编辑器中已保存信号连接动画掉帧明显动画触发布局重算或大量使用阴影将动画属性改为 transform 相关属性减少大面积层特效6. 我自己常用的一些创作习惯和后续扩展思路讲到这Qt Design Studio 的核心工作流差不多已经交代清楚了。最后我想借这块地方放下几个我做项目时一直在用的个人习惯供你参考。第一个习惯是“结构先行”。我每次新建页面第一件事不是拖具体控件而是在导航面板里把结构层级先建出来哪怕只是用占位矩形代表内容区。等整体结构确认无误后再往里补细节。这样到最后调整布局时才不会出现牵一发而动全身的混乱。第二个习惯是“状态驱动”。遇到一个界面里有很多交互形态时我尽量用 Qt Design Studio 的状态系统去表达而不是复制页面。状态系统的可读性好而且状态切换动画在同一个组件内就能定义后面维护时看一眼状态列表整个界面的交互逻辑就清楚了。第三个习惯是“动画克制”。很多人刚接触动效时恨不得每样东西都动一下。但真实产品里动画是用来解释层级、引导注意力、补充过渡信息的不是为了炫技。在做动效之前先明确这段动画要给用户透露什么信息再动手去调。没有目的的动画删掉也不可惜。关于后续扩展如果你想在 Qt Design Studio 的道路上走更深建议尝试接入手写 QML 和 JavaScript 逻辑。你可以从一个小功能开始比如说一个可搜索的列表。在 Qt Design Studio 里完成列表界面后再到代码里给它接过滤函数。这种探索方式不会太陡峭同时能让你体会到 Qt Design Studio“所见即所得”和手写代码“灵活可控”两种模式之间怎么协作。我个人的体会是Qt Design Studio 不是一个可以替代你写代码思维的工具也不是一个只能做静态原型的玩具。它是那种你越深入越能感觉到厚度的工具。刚开始你可能只把它当成拖控件出界面的软件等你把状态、动画、数据衔接这些东西都用顺了它会慢慢变成你整个 UI 工作流的一个中枢。界面的炫酷并不难难的是让炫酷有逻辑、有秩序而这恰恰是 Qt Design Studio 能帮你把握住的那部分。