液态玻璃效果#

GlassEffect、GlassEffectContainer、UIGlass 等相关 API 基于 SwiftUI 新引入的 Liquid Glass 技术，让开发者能够在脚本中以 TSX 方式使用流体化、动态的玻璃材质效果，并支持过渡动画、匹配几何、联合玻璃区域等高级特性。

1. Liquid Glass 概述#

Liquid Glass 是 iOS 26 新增的视觉效果系统，用于创建带有流动质感、半透明材质与动态边界的玻璃效果。与早期的 blur 或 material 不同，Liquid Glass 提供了：

• 动态玻璃形状（使用 Shape）
• 基于几何匹配的过渡动画
• 可交互的玻璃（interactive）
• 可指定 tint 色彩的玻璃材质
• 可组合多个视图的玻璃“联合”

2. GlassEffect 基础用法#

所有支持玻璃效果的视图，都可以通过 glassEffect 修饰符添加 Liquid Glass 材质。

属性定义#

1type GlassProps = {
2  glassEffect?: boolean | UIGlass | Shape | {
3      glass: UIGlass
4      shape: Shape
5  }
6
7  glassEffectTransition?: GlassEffectTransition
8
9  glassEffectID?: {
10      id: string | number
11      namespace: NamespaceID
12  }
13
14  glassEffectUnion?: {
15      id: string | number
16      namespace: NamespaceID
17  }
18}

2.1 glassEffect#

glassEffect 有四种主要使用方式：

方式一：启用默认玻璃材质#

1<Text glassEffect>Foo</Text>

使用系统默认的 Liquid Glass 材质（相当于 UIGlass.regular()）。

方式二：使用指定的 UIGlass#

1<Text glassEffect={UIGlass.regular().interactive(false)}>Foo</Text>

可以链式配置 tint、interactive 等属性。

方式三：设置玻璃的形状（Shape）#

1<Text glassEffect={{ glass: UIGlass.regular(), shape: { type: 'rect', cornerRadius: 10 } }}>
2  Foo
3</Text>

或直接传入 Shape：

1<Text
2  glassEffect={{
3    type: 'rect',
4    cornerRadius: 10
5  }}
6>
7  Foo
8</Text>

表示该视图的玻璃材质会严格限定在指定几何图形内。

方式四：Boolean 短写#

1<View glassEffect />

等同于默认 UIGlass.regular()。

3. UIGlass 类#

UIGlass 用于描述玻璃材质本身，可以选用内置材质或链式组合属性。

可用静态方法#

链式配置方法#

1interactive(value?: boolean): UIGlass
2tint(color: Color): UIGlass

示例：

1glassEffect={UIGlass.regular().interactive().tint("red")}

4. GlassEffectTransition（玻璃过渡动画）#

1type GlassEffectTransition = 'identity' | 'materialize' | 'matchedGeometry'

三种模式说明#

使用方式#

1<Text 
2  glassEffect
3  glassEffectTransition="materialize"
4>
5  Foo
6</Text>

matchedGeometry 通常需要配合 glassEffectID 或 glassEffectUnion 使用。

5. glassEffectID 与 glassEffectUnion#

Liquid Glass 支持“识别”不同视图间的玻璃效果，用于 matched geometry 动画或合并多块玻璃区域。

5.1 glassEffectID#

为玻璃效果赋予唯一的 ID，用于 matchedGeometry 动画。

1<Text
2  glassEffect
3  glassEffectID={{ id: "avatar", namespace }}
4>
5  Foo
6</Text>

多个视图使用相同 ID + namespace 时，系统会尝试匹配形状，从而产生流体几何动画效果。

5.2 glassEffectUnion#

用于将多个玻璃效果统一为一个更大区域。

1<Text
2  glassEffect
3  glassEffectUnion={{ id: 1, namespace }}
4/>

多个视图的玻璃材质将被合并，形成更一致的视觉区域。

6. GlassEffectContainer#

GlassEffectContainer 是用于组织和管理玻璃效果的容器。容器内部的所有 glassEffect 视图，都能参与几何匹配、联合效果和过渡动画。

示例#

1<GlassEffectContainer>
2  <HStack spacing={40}>
3    <Image glassEffect systemName="1.circle" />
4    <Image glassEffect systemName="2.circle" />
5  </HStack>
6</GlassEffectContainer>

在容器中：

• matchedGeometry 正常工作
• glassEffectUnion 可以跨子视图生效
• glassEffectID 的动画效果可互相关联

GlassEffectContainer 不需要额外参数，但提供了玻璃效果组织空间。

7. 按钮的玻璃样式 buttonStyle#

Scripting 在 iOS 26 提供新增按钮样式：

• "glass"
• "glassProminent"

示例：

1<Button title="Glass" action={...} buttonStyle="glass" />
2<Button title="Glass Prominent" action={...} buttonStyle="glassProminent" />
3
4<Button
5  title="Glass & Tint"
6  buttonStyle="glass"
7  tint="red"
8/>

这些按钮会自动使用 Liquid Glass 材质，并适配 tint、press 动效。

8. 实战示例说明#

以下示例展示完整的用法，包括：

• 背景图片
• Glass 按钮
• GlassEffectContainer
• 使用 UIGlass 自定义玻璃
• 使用指定形状的玻璃

1<GlassEffectContainer>
2  <HStack spacing={40}>
3    <Image
4      systemName="1.circle"
5      frame={{ width: 80, height: 80 }}
6      font={36}
7      glassEffect
8      offset={{ x: 30, y: 0 }}
9    />
10    <Image
11      systemName="2.circle"
12      frame={{ width: 80, height: 80 }}
13      font={36}
14      glassEffect
15      offset={{ x: -30, y: 0 }}
16    />
17  </HStack>
18</GlassEffectContainer>

9. 使用建议与最佳实践#

1. 大量玻璃视图应包裹在同一个 GlassEffectContainer#

可提高动画一致性与性能。

2. 使用 matchedGeometry 时务必提供 glassEffectID#

否则无法产生几何跟随动画。

3. 复杂的玻璃区域可使用 glassEffectUnion 合并#

让多个子视图形成连续材质。

4. 为了避免过度渲染，玻璃不应嵌套太深#

可以多用 ZStack 管理效果。

5. UIGlass.identity 非常适合“禁用玻璃但保持结构”#

它允许你保留现有布局但不实际渲染材质。