企业官网建设流程全解析

1. 为什么做 XUI

我做客户端开发有十来年了，做界面是工作里躲不开的一部分。就算项目是 B/S，也不可能所有界面都交给前端：小弹窗再去联调很费时间，安装卸载这种程序，纯 C++ 界面往往更合适。

流行的开源界面库大多要手写 XML。架构各不一样，又不是真的所见即所得。用了多年，手写和来回预览还是慢，赶进度就得加班。

MFC 那种拖拽其实挺好，能看见结果。缺点是控件属性太弱，改个背景色都要自绘，复杂界面像一座山，好看的界面做得慢，后面也不好维护。工业软件如果对界面没要求，可能感觉不到；一旦要皮肤、圆角、换肤，就很不友好。这也是很多人慢慢不用 MFC 做界面的原因。

所以我想做一套带设计器的界面库：拖拽、改外观，就能把界面做出来，再像 MFC 一样自动生成窗体类、控件变量和消息映射，把时间留给业务。它以前叫 DUIThink，现在叫 XUI。

2. XUI 是什么

XUI 是带可视化设计器的跨平台界面开发框架。它可以像 MFC 一样自动生成窗体类、控件变量和消息映射，并带上线程池、文件、网络、监听等常用开发部件，用来直接做应用。运行时库开源，许可证是 LGPL-2.1，设计器单独提供。

控件没有自己的窗口句柄，整棵界面挂在一个窗口上绘制。Windows 走 Win32，不需要 SDL。Linux、macOS、Android 走 SDL3。四个平台都能看 Demo、下包。

3. 自绘 Edit

做客户端几乎都会碰到输入框。我早期用别的界面库时，Edit 多半是包了一层系统控件，问题很具体：

• 透明、异形窗口上不好用
• 子窗口和父窗口抢焦点
• 从显示切到编辑，文字会跳一下
• 文字不能垂直居中，也不好做富文本和字体阴影
• 插很多 Gif 会卡
• 绑在系统控件上，跨不了平台

后来做成了自绘 Edit。文本、图片、动图和透明通道都在控件自己的绘制里完成，聊天输入和普通文本编辑直接调控件接口，不用再绕系统 API、系统消息或 COM。它现在是 XUI 的一部分。

4. 设计器和菜单

设计器负责把界面做成看得见、改得动的结果。绑定 Visual Studio 的解决方案之后，可以像 MFC 一样生成窗体类、控件变量和控件事件代码。拖放、对齐、改属性都会立刻反映到界面上。图片、字体、颜色放在一起看。控件树里用 Shift + Up / Down 调 Z 序，也能把一块界面复制到另一个视图。有 MFC 经验的话，会更好上手。

菜单同样是可视化的，可以按一级、二级、三级往下编。我之前用几分钟模拟过迅雷看看那种圆角、带图标的多级菜单，视频在这里：https://www.bilibili.com/video/BV1fUG9zaEj6/

更多操作可以看 B 站空间里的教程：https://space.bilibili.com/322458488

5. 库里有什么

布局和绘制：

1. 靠上、靠下、靠左、靠右、居中、相对、绝对
2. 固定宽高、最大最小宽高、按文本或子控件自动调整
3. 背景颜色、图片、圆角、渐变，以及自定义 Bitmap
4. SVG，覆盖比常见看图工具和部分开源库更全的格式
5. RichText：同一段文字分字体、分颜色，支持多行，靠左、靠右、靠上、靠下、居中
6. DPI 切换一行代码，设计器里可以预览各 DPI
7. 窗体特效、控件水波纹，一行代码换肤

控件：

1. Clone 复制出相同控件；Attach / Detach 随意挂到父节点
2. 自绘 Edit，可插入图片、动图和带透明通道的文字
3. 自绘 IP、日历、Clock、3D 旋转菜单
4. ComboBox 支持梯度子项滑动，类似以前 QQ 登录选账号的效果
5. Animate 支持 Gif 和序列帧
6. ListView 改一个属性即可在 List、Grid、TileH、TileV 之间切换，子项可以拖动换位
7. 树控件：带选中按钮、无选中按钮、表头树、单选树，改属性即可切换

这些之外，还有线程池、文件、网络、文件监听、注册表监听、拖拽、命令行、磁吸、内存池和字符串。与其只把它当成界面库，不如当成一套能直接做应用的框架。

6. 怎么开始

源码在：

https://github.com/miaomiaoyule/XUI

https://gitee.com/miaomiaokeji/XUI.git

先跑Demo/XUIDemo_C++。Windows 用 Visual Studio 打开XUI.2017.sln，配置选 Release_Unicode | Win32，先编库，再编 Demo。DuiPlatformSDL保持默认关闭，这一端不需要 SDL。Linux、macOS、Android 用 CMake 打开XUI_PLATFORM_SDL，需要 SDL3。各平台的 Demo 视频和安装包在官网。

• 官网：http://49.235.209.245/XUI
• 视频教程：https://space.bilibili.com/322458488

官网有视频，跟着做一遍就能上手。后面有时间我也会继续更教程。使用上的问题，欢迎进群一起交流。