企业官网建设流程全解析

🪶Raven是一个用 C 语言编写的轻量级多线程 GUI 库，专为编辑器和开发者工具设计。本文带你掌握 Raven 窗口层的三大高级能力：自定义标题栏（CustomHeader）、透明窗口（Transparent）与系统级背景模糊（Backdrop Blur）。只需在窗口创建时设置一个标志位、或写一行 XML 属性，就能让程序拥有类似 Windows 11 / macOS 的现代毛玻璃视觉——无需自己处理 Win32 或 X11 的系统 API。

一、Raven 窗口控制提供了什么？

Raven 的所有窗口能力集中在 raven_window.h 的RWindowFlags中，与本文相关的有三个核心标志：

三者可以组合使用，下面逐个拆解。

二、自定义标题栏：一个属性替换系统标题栏

设置CustomHeader="true"后，系统不再绘制标题栏，你的内容直接覆盖整个窗口。最省事的做法是在内容顶部放一个HeaderBar组件，它会自动显示窗口标题、最小化/最大化/关闭按钮，并且：

• 拖拽它可以移动窗口，双击可最大化；
• 窗口边缘依然可以缩放，Windows 上靠边吸附（snapping）、系统菜单、shake 手势全部保留——这些由窗口系统自己完成。

看官方示例 examples/notepad/notepad.xml：

<Window Title="Raven Notepad" Width="980" Height="640" MinWidth="560" MinHeight="320" CustomHeader="true"> <VBox> <HeaderBar Name="header"> <MenuBar>…</MenuBar> <ComboBox Name="language" Slot.HAlign="Right" …/> </HeaderBar> <TextEditor Name="editor" Slot.Fill="1"/> </VBox> </Window>

HeaderBar就是一个普通组件：左侧子元素从左边排，带Slot.HAlign="Right"的从右侧排（放在窗口按钮之前）。还可以按平台习惯调整——ButtonSide="Left"会变成 macOS 风格的左侧三色圆点按钮，TitleStyle="Notch"让标题悬在顶边一个深色小页签里。完整属性说明见 docs/XML.md 的HeaderBar条目。

如果连标题栏都不想要，也可以把任意组件变成拖动把手：XML 里写WindowDrag="true"，或调用 Rwidget_set_window_drag。例如 examples/workspace/workspace.xml 就用了「无边框 HeaderBar + Island 悬浮胶囊」的组合，效果非常像一个专业工作站：

💡 头文件 raven_shell.h 的注释里附了一份完整的HeaderBar用法速查，是入门自定义标题栏的最佳文档。

三、透明窗口：让桌面「透」过来

给R_WINDOW_TRANSPARENT加一个Transparent="true"，Raven 会向窗口系统申请带 alpha 通道的窗口。从此之后：

• 没有组件绘制的位置，屏幕后面是什么就显示什么（桌面、其他应用）；
• 窗口不会用主题色清屏，主题壁纸也不会绘制，「只有你画的组件才挡得住屏幕」；
• 配合Rwindow_set_opacity(0.6f)还能让整个窗口（含边框）整体变半透明。

官方示例 examples/overlay/overlay.xml 只用了两个属性就做出悬浮面板：

<Window Title="Raven - overlay" Width="640" Height="420" Transparent="true" Backdrop="Blur" Borderless="true">

再配合一个带圆角的BackgroundBlur面板、WindowDrag="true"把手，就得到一个可以拖着走的毛玻璃悬浮层，正是 examples/overlay/main.c 中演示的效果：

四、系统级模糊：四种 Backdrop 怎么选？

透明窗口创建后，可以用 Rwindow_set_backdrop（XML 属性Backdrop="…"）告诉系统如何对待透过去的内容：

各平台实际能做到的效果一览（摘自 raven_window.h）：

• Windows 11：全部支持；
• Windows 10：TRANSPARENT、BLUR、ACRYLIC（Mica 会退化为 Acrylic）；
• macOS：只有TRANSPARENT，其余回退为透明；
• X11：有合成器才有效；Mica/Acrylic 回退为BLUR，无合成器则窗口保持不透明。

系统不一定会满足你的请求——它做不到时窗口会保持原样。所以稳妥的做法是设置后立刻用Rwindow_get_backdrop查询实际结果并提示用户，overlay 示例里就是这么做的（main.c 第 35 行 把「实际获得的背景」直接显示在界面上）。

⚠️ 一个容易忽略的细节：透明窗口的像素是预乘 alpha（premultiplied）的，渲染后端创建 surface 时会自动处理，你通常不需要关心。

五、进阶：Glass 主题与 BackgroundBlur 组件

除了系统级模糊，Raven 内置的 Glass 主题（R_THEME_GLASS_DARK/R_THEME_GLASS_LIGHT）能把所有控件变成玻璃质感，分三档材料（见 examples/glass/glass.xml 注释）：

• Glass：透明玻璃，背后内容清晰可见，边缘有折射；
• FrostedGlass：磨砂玻璃，只透出颜色不露形状；
• TintedGlass：磨砂+主题染色，可读性最好。

另外BackgroundBlur组件提供四种模糊风格：Native在窗口上「开洞」让系统模糊桌面；Plain/Frosted/Glass则模糊Raven 自己绘制的内容——不依赖合成器，任何平台都有毛玻璃。overlay 示例里那四个并排的彩色卡片就是这四种风格的直观对比。

六、实战小贴士 🛠️

1. 平台探测优先：先Rwindow_get_backdrop/RnativeWindow.transparent确认能力，再决定 UI 走向，overlay 示例是标准模板；
2. 自定义标题栏 + 透明可叠加：CustomHeader窗口依然有系统阴影和缩放手柄，视觉和可用性不妥协；
3. 整窗透明度是独立开关：Rwindow_set_opacity控制包含边框的整体透明度，和Backdrop互不干扰，适合做「悬浮工具窗」；
4. 多线程渲染不阻塞：Raven 是 multithreaded 设计，窗口与布局绘制不在主线程，模糊窗口滚动依然流畅。

总结

Raven 把「自定义标题栏、透明窗口、系统级模糊」这三件在原生开发中最繁琐的事，收敛成了三个窗口标志和几个组件属性：CustomHeader换掉系统标题栏，Transparent打开通道，Backdrop选择系统效果。配合HeaderBar、BackgroundBlur与 Glass 主题，几行 XML 就能做出前面几张截图级别的现代界面。想动手试试？从 examples/notepad/ 和 examples/overlay/ 两个官方示例入手即可。