swiftui-liquid-glass

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

SwiftUI Liquid Glass

Overview

概述

Use this skill to build or review SwiftUI features that fully align with the iOS 26+ Liquid Glass API. Prioritize native APIs (

glassEffect

GlassEffectContainer

, glass button styles) and Apple design guidance. Keep usage consistent, interactive where needed, and performance aware.

使用本技能构建或评审完全符合iOS 26+ Liquid Glass API的SwiftUI功能。优先使用原生API（

glassEffect

、

GlassEffectContainer

、玻璃按钮样式）并遵循Apple设计指南。确保使用方式一致、必要时具备交互性，同时兼顾性能。

Workflow Decision Tree

工作流决策树

Choose the path that matches the request:

选择与请求匹配的路径：

1) Review an existing feature

1) 评审现有功能

Inspect where Liquid Glass should be used and where it should not.
Verify correct modifier order, shape usage, and container placement.
Check for iOS 26+ availability handling and sensible fallbacks.

检查应使用和不应使用Liquid Glass的场景。
验证修饰符顺序、形状使用和容器放置是否正确。
检查iOS 26+兼容性处理是否到位，以及是否有合理的降级方案。

2) Improve a feature using Liquid Glass

2) 使用Liquid Glass改进现有功能

Identify target components for glass treatment (surfaces, chips, buttons, cards).
Refactor to use
```
GlassEffectContainer
```
where multiple glass elements appear.
Introduce interactive glass only for tappable or focusable elements.

确定需要应用玻璃效果的目标组件（表面、芯片、按钮、卡片）。
当存在多个玻璃元素时，重构为使用
```
GlassEffectContainer
```
。
仅为可点击或可聚焦的元素添加交互式玻璃效果。

3) Implement a new feature using Liquid Glass

3) 使用Liquid Glass实现新功能

Design the glass surfaces and interactions first (shape, prominence, grouping).
Add glass modifiers after layout/appearance modifiers.
Add morphing transitions only when the view hierarchy changes with animation.

首先设计玻璃表面和交互逻辑（形状、突出度、分组）。
在布局/外观修饰符之后添加玻璃修饰符。
仅当视图层级随动画变化时，添加形态转换效果。

Core Guidelines

核心指南

Prefer native Liquid Glass APIs over custom blurs.
Use
```
GlassEffectContainer
```
when multiple glass elements coexist.
Apply
```
.glassEffect(...)
```
after layout and visual modifiers.
Use
```
.interactive()
```
for elements that respond to touch/pointer.
Keep shapes consistent across related elements for a cohesive look.
Gate with
```
#available(iOS 26, *)
```
and provide a non-glass fallback.

优先使用原生Liquid Glass API而非自定义模糊效果。
当存在多个玻璃元素时，使用
```
GlassEffectContainer
```
。
在布局和视觉修饰符之后应用
```
.glassEffect(...)
```
。
为响应触摸/指针的元素使用
```
.interactive()
```
。
保持相关元素的形状一致，以实现连贯的视觉效果。
使用
```
#available(iOS 26, *)
```
进行版本控制，并提供非玻璃效果的降级方案。

Review Checklist

评审检查清单

Availability:
```
#available(iOS 26, *)
```
present with fallback UI.
Composition: Multiple glass views wrapped in
```
GlassEffectContainer
```
.
Modifier order:
```
glassEffect
```
applied after layout/appearance modifiers.
Interactivity:
```
interactive()
```
only where user interaction exists.
Transitions:
```
glassEffectID
```
used with
```
@Namespace
```
for morphing.
Consistency: Shapes, tinting, and spacing align across the feature.

兼容性：存在
```
#available(iOS 26, *)
```
并提供降级界面。
组合方式：多个玻璃视图被包裹在
```
GlassEffectContainer
```
中。
修饰符顺序：
```
glassEffect
```
在布局/外观修饰符之后应用。
交互性：仅在存在用户交互的地方使用
```
interactive()
```
。
转场效果：结合
```
@Namespace
```
使用
```
glassEffectID
```
实现形态转换。
一致性：相关元素的形状、色调和间距保持一致。

Implementation Checklist

实现检查清单

Define target elements and desired glass prominence.
Wrap grouped glass elements in
```
GlassEffectContainer
```
and tune spacing.

Use

.glassEffect(.regular.tint(...).interactive(), in: .rect(cornerRadius: ...))

as needed.

Use

.buttonStyle(.glass)

.buttonStyle(.glassProminent)

for actions.

Add morphing transitions with
```
glassEffectID
```
when hierarchy changes.
Provide fallback materials and visuals for earlier iOS versions.

确定目标元素和所需的玻璃效果突出度。
将分组的玻璃元素包裹在
```
GlassEffectContainer
```
中并调整间距。

根据需要使用

.glassEffect(.regular.tint(...).interactive(), in: .rect(cornerRadius: ...))

。

为操作按钮使用

.buttonStyle(.glass)

.buttonStyle(.glassProminent)

。

当视图层级变化时，使用
```
glassEffectID
```
添加形态转换效果。
为早期iOS版本提供替代材质和视觉效果。

Quick Snippets

快速代码片段

Use these patterns directly and tailor shapes/tints/spacing.

swift

if #available(iOS 26, *) {
    Text("Hello")
        .padding()
        .glassEffect(.regular.interactive(), in: .rect(cornerRadius: 16))
} else {
    Text("Hello")
        .padding()
        .background(.ultraThinMaterial, in: RoundedRectangle(cornerRadius: 16))
}

swift

GlassEffectContainer(spacing: 24) {
    HStack(spacing: 24) {
        Image(systemName: "scribble.variable")
            .frame(width: 72, height: 72)
            .font(.system(size: 32))
            .glassEffect()
        Image(systemName: "eraser.fill")
            .frame(width: 72, height: 72)
            .font(.system(size: 32))
            .glassEffect()
    }
}

swift

Button("Confirm") { }
    .buttonStyle(.glassProminent)

直接使用以下模式，并根据需要调整形状/色调/间距。

swift

if #available(iOS 26, *) {
    Text("Hello")
        .padding()
        .glassEffect(.regular.interactive(), in: .rect(cornerRadius: 16))
} else {
    Text("Hello")
        .padding()
        .background(.ultraThinMaterial, in: RoundedRectangle(cornerRadius: 16))
}

swift

GlassEffectContainer(spacing: 24) {
    HStack(spacing: 24) {
        Image(systemName: "scribble.variable")
            .frame(width: 72, height: 72)
            .font(.system(size: 32))
            .glassEffect()
        Image(systemName: "eraser.fill")
            .frame(width: 72, height: 72)
            .font(.system(size: 32))
            .glassEffect()
    }
}

swift

Button("Confirm") { }
    .buttonStyle(.glassProminent)

Resources

资源

Reference guide:
```
references/liquid-glass.md
```
Prefer Apple docs for up-to-date API details.

参考指南：
```
references/liquid-glass.md
```
优先查阅Apple文档获取最新的API细节。