Qt 上位机 UI 美化实践：从 Ant Design 到 QSS

碎碎念¶

我前段时间开发了一个上位机，JYSWJ，在我的 github 和 gitee 都能直接搜到。

• https://gitee.com/snqx-lqh/JYSWJ。

• https://github.com/snqx-lqh/JYSWJ。

这个上位机是一个轻量、模块化的 Qt 上位机软件，支持串口／网络通信、X/Y-Modem 协议、简单仿终端调试与数据波形显示，适用于设备调试、通信测试、协议调试等场景。具体内容可以看我的开源介绍。

但是开发这么久，觉得界面不咋好看，按钮还是灰扑扑的，界面也是土土的，自己的审美也不太行，就想找找有没有别人的干净、克制、有现代感的UI设计作为参考。找来找去，找到了一种比较好看的UI。Ant Design，这个 UI 一般是使用在 Web 后台界面的，所以他用的语法是 JS 或者 TS。但是可以参考他们的界面。

最后我找到了一个参考 ANT 设计的 C# 上位机项目，AntdUI，这个UI在Gitee上有开源，可以直接使用。

AntdUI 基于 Ant Design 设计语言的 WinForm UI 界面库，致力于将现代美观的前端设计风格带入到桌面应用程序中。采用纯GDI绘图，不需任何图片资源，全面支持AOT，最低兼容 .NET Framework 4.0。

但是他是 C# ,也不符合我的设计需求，我是使用 Qt。

然后我就把这个项目下载下来，然后使用 Ai 帮我分析了一下这个库，然后提需求，让 Ai 分别生成 HTML 和 CSS，然后我去查看他生成的网页，如果符合自己的风格，就让他生成对应的 QSS，生成后，就可以复制到 QT 中，然后再根据实际情况简易调整。

我对Ai的提问如下：

• 分析一下这个ANTDUI-MAIN工程，阅读全部代码实现。

• 建立一个新文件夹，里面建立一个网页源代码文件夹，一个分析文件夹，分析文件夹中写入你的分析

• 在网页展示中，以HTML，CSS的文件分开，帮我实现一个AntduiD的按钮

• 再新建一个.qss文件，我想把这个按钮风格用到qt的qss样式中，你帮我实现一下。

• 我在使用的时候，怎么知道这是primaryButton还是dangerButton，这个，怎么用qt附加属性？

• 帮我生成一个Ant风格的combobox，包含html，css演示，和QSS的生成。

其他的控件提问就像 combobox 这个一样了。

大家可以看看我的项目修改效果，我用在我的项目 JYSWJ 上，这个项目可以直接在 Github 或者 Gitee 中直接搜索，下面就是一个简易的展示，还是比较简陋，但是感觉把我的上位机也算是简单美化了一下，后面也许会参考这个设计，做更多的美化。