iOS 毛玻璃弹窗 SwiftUI 原生做法

毛玻璃在 SwiftUI 里其实很省心：你不用手写模糊算法，系统的 Material 一行就搞定，模糊程度、深浅适配、性能都交给系统。难点反而在分寸上：选对档位让文字依旧清楚，控制好弹窗的进出和高度。设计起步用一个干净的弹窗原生稿，让 Claude 生成 SwiftUI 代码，把系统能力用足。

为什么用 Material 而不是手写模糊

毛玻璃常出现在深色界面里，而约 82% 的智能手机用户 偏好深色，手写的固定模糊很难在浅深两种模式下都好看。系统 Material 会随浅深模式自动调整，既省事又一致，还避免了自绘模糊在低端机上掉帧。苹果的人机界面指南 也建议优先用系统材质来营造层次。手写模糊还有个隐性成本：你得自己处理不同背景下的可读性、自己调性能、自己适配深浅模式，而这些系统 Material 全包了，等于把一堆烦人的边界情况外包给了苹果。

毛玻璃弹窗的实现要点

用 SwiftUI 的原生能力把毛玻璃弹窗做对。

要点	SwiftUI 实现要点
模糊	.background(.ultraThinMaterial)，系统处理
半屏	sheet 配 presentationDetents 控制高度
可读性	内容多用更厚的 .regularMaterial
进出动效	sheet 自带，过渡平滑

实战示例

做一个底部毛玻璃弹窗：在 VP0 挑一个弹窗原生设计，复制链接喂给 Claude Code 生成 SwiftUI 代码。用 sheet 弹出，背景套 .ultraThinMaterial，再用 presentationDetents 给一个半屏和全屏两档，图标用 SF Symbols。文字多的区域换成更厚的材质保证对比。需要整体更克制的版式打底，参考 SwiftUI 极简模板。想跨平台或对照另一种实现，看 毛玻璃弹窗 React Native 模板 的做法，React Native 那边要手动叠模糊层，正好凸显 SwiftUI 用系统材质有多省心。做完你会发现，毛玻璃真正花心思的地方从来不是模糊本身，而是模糊之上的文字还清不清楚、层次够不够。

常见误区

最常见的错误是一味追求透，把模糊调到最薄，结果文字在背景上糊成一片。正确做法是按内容选档位，文字多就用更厚的材质。另一个坑是放着系统 Material 不用、自己叠半透明加模糊，既不一致又在低端机上卡。把系统材质用好，毛玻璃既好看又流畅。再提一个容易被忽略的细节：弹窗弹出时背景最好轻微变暗，让用户的注意力自然落到弹窗上，光有模糊还不够。

关键要点

• SwiftUI 做毛玻璃别手写模糊，直接用系统 Material 一行搞定。
• 约 82% 的用户偏好深色，系统材质能自动适配浅深两种模式。
• 半屏用 presentationDetents，文字多的区域用更厚材质保对比。
• 想免费起步，VP0 是挑弹窗设计、让 AI 生成 SwiftUI 的最佳选择。

常见问题

关于 SwiftUI 做毛玻璃弹窗，问得最多的是怎么实现、文字看不清怎么办、和 React Native 怎么选。一句话收尾：毛玻璃的好坏不在模糊有多重，而在文字还清不清楚，把系统 Material 用对，可读性和质感就都有了，剩下的力气全留给内容本身。