liquid-glass-design

Topics in the source

• Liquid Glass 设计系统 (iOS 26)
• 何时启用
• 核心模式 — SwiftUI
• 基本玻璃效果
• 自定义形状和色调
• 玻璃按钮样式
• 用于多个元素的 GlassEffectContainer
• 统一玻璃效果

实现苹果 Liquid Glass 的模式指南——这是一种动态材质，会模糊其后的内容，反射周围内容的颜色和光线，并对触摸和指针交互做出反应。涵盖 SwiftUI、UIKit 和 WidgetKit 集成。 为 iOS 26+ 构建或更新采用新设计语言的应用程序时 实现玻璃风格的按钮、卡片、工具栏或容器时 在玻璃元素之间创建变形过渡时 将 Liquid Glass 效果应用于小组件时 将现有的模糊/材质效果迁移到新的 Liquid Glass API 时 为任何视图添加 Liquid Glass 的最简单方法： 关键自定义选项： .regular — 标准玻璃效果 .tint(Color) — 添加颜色色调以增强突出度 .interactive() — 对触摸和指针交互做出反应 形状：.capsule（默认）、.rect(cornerRadius:)、.circle 出于性能和变形考虑，始终将多个玻璃视图包装在一个容器中： spacing 参数控制合并距离——距离更近的元素会将其玻璃形状融合在一起。 使用 glassEffectUnion 将多个视图组合成单个玻璃形状： 在玻璃元素出现/消失时创建平滑的变形效果： 要允许水平滚动内容延伸到侧边栏或检查器下方，请确保 ScrollView 内容到达容器的 leading/trailing 边缘。当布局延伸到边缘时，系统会自动处理侧边栏下方的滚动行为——无需额外的修饰符。 | 决策 | 理由 | |----------|-----------| | 使用 GlassEffectContainer 包装 | 性能优化，实现玻璃元素之间的变形 | | spacing 参数 | 控制合并距离——微调元素需要多近才能融合 | | @Namespace + glassEffectID | 在视图层次结构变化时实现平滑的变形过渡 | | interactive() 修饰符 | 明确选择加入触摸/指针反应——并非所有玻璃都应响应 | | UIKit 中的 UIGlassContainerEffect | 与 SwiftUI 保持一致的容器模式 | | 小组件中的强调色渲染模式 | 当用户选择带色调的主屏幕时，系统会应用带色调的玻璃效果 | 始终使用 GlassEffectContainer 来为多个兄弟视图应用玻璃效果——它支持变形并提高渲染性能 在其他外观修饰符（frame、font、padding）之后应用 .glassEffect() 仅在响应用户交互的元素（按钮、可切换项目）上使用 .interactive() 仔细选择容器中的间距，以控制玻璃效果何时合并 在更改视图层次结构时使用 withAnimation，以启用平滑的变形过渡 在各种外观模式下测试——浅色模式、深色模式和强调色/色调模式 确保可访问性对比度——玻璃上

This is an excerpt. Refer to the complete source and its current requirements.