Ios Liquid Glass

Prisma-Labs-Dev/apple-skills/skills/ios-liquid-glass

作者 Prisma-Labs-Dev498626005e65783ebe8570a103b2335cf397768c无许可证收录于 2026年10月9日更新于 2026年10月9日

API reference: Liquid Glass (iOS 26+). Query for glass effects, navigation patterns, GlassEffect modifiers, design principles.

仅含说明Software Development
AI 生成的概览

Apple Liquid Glass 设计系统（iOS 26+）参考，涵盖玻璃效果、容器、导航与辅助功能。

功能
提供 iOS 26 及更高版本中 Liquid Glass 设计系统的 API 参考，说明 glassEffect 修饰符、玻璃变体、GlassEffectContainer、形变过渡、导航界面、SF Symbols 效果、触觉反馈与辅助功能适配。其中包含 SwiftUI 与 UIKit 代码示例以及 Apple 阐述的设计原则。它是供查阅的文档，而不是生成文件的工具。
适用场景
适用于在应用中实现玻璃材质、glassEffect 修饰符或 GlassEffectContainer，或处理标签栏、工具栏、表单等系统玻璃导航界面时。也适用于检查玻璃如何适配辅助功能设置，或使用 Icon Composer 创建应用图标时。
运行要求
无需脚本或软件包，仅为说明与参考资料。示例面向 iOS 26 或更高版本上的 SwiftUI 与 UIKit。

iOS Liquid Glass Reference

API reference for the Liquid Glass design system (iOS 26+): glass effects, containers, morphing transitions, and related system behaviors. This documents what the system provides — design direction is yours.

When to Use

  • Implementing glass materials, glassEffect modifiers, or GlassEffectContainer
  • Navigation surfaces that use system glass (tabs, toolbars, sheets)
  • Checking how glass adapts to accessibility settings
  • Creating app icons with Icon Composer

Apple's Stated Design Principles

Apple describes Liquid Glass with three principles (reference, not a mandate):

PrincipleDescription
HierarchyControls float above content. Glass frames content rather than obscuring it.
HarmonySoftware design aligns with hardware — concentric corners, fluid gestures.
ConsistencyAdapts across iPhone, iPad, Mac — same identity, contextual expression.

One functional constraint worth knowing: glass is designed for the navigation/control layer. Applying it to content surfaces defeats its sampling model (see containers below).

Liquid Glass Core API

Basic Glass Effect

swift
import SwiftUI
// Simple glass applicationText("Action")    .padding()    .glassEffect() // .regular variant, .capsule shape
// With explicit parametersButton("Confirm") { }    .padding()    .glassEffect(.regular, in: RoundedRectangle(cornerRadius: 12), isEnabled: true)

Glass Variants

VariantUse Case
.regularToolbars, nav bars, tab bars, standard controls
.clearFloating controls over media (photos, maps, video)
.identityConditional disable: glassEffect(isActive ? .regular : .identity)

Glass Modifiers

swift
// Semantic tinting.glassEffect(.regular.tint(.accentColor))
// Interactive behaviors (scaling, shimmer, touch illumination).glassEffect(.regular.interactive())
// Combined.glassEffect(.regular.tint(.blue).interactive())

Custom Shapes

swift
// Standard shapes.glassEffect(.regular, in: .capsule).glassEffect(.regular, in: .circle).glassEffect(.regular, in: RoundedRectangle(cornerRadius: 16))
// Container-concentric (matches device/container corners).glassEffect(.regular, in: .rect(cornerRadius: .containerConcentric))

GlassEffectContainer & Morphing

Container Setup

Glass cannot sample other glass. Use containers for multiple glass elements:

swift
GlassEffectContainer(spacing: 30) {    HStack(spacing: 20) {        ForEach(actions) { action in            Button(action.title, systemImage: action.icon) { }                .frame(width: 44, height: 44)                .glassEffect(.regular.interactive())        }    }}

Morphing Transitions

swift
struct ExpandableActions: View {    @State private var isExpanded = false    @Namespace private var namespace
    var body: some View {        GlassEffectContainer(spacing: 30) {            VStack(spacing: 30) {                if isExpanded {                    ActionButton(icon: "rotate.right")                        .glassEffectID("rotate", in: namespace)                }
                HStack(spacing: 30) {                    if isExpanded {                        ActionButton(icon: "slider.horizontal.3")                            .glassEffectID("adjust", in: namespace)                    }
                    Button {                        withAnimation(.bouncy) { isExpanded.toggle() }                    } label: {                        Image(systemName: isExpanded ? "xmark" : "plus")                            .frame(width: 56, height: 56)                    }                    .glassEffect(.regular.tint(.accentColor).interactive())                    .glassEffectID("toggle", in: namespace)
                    if isExpanded {                        ActionButton(icon: "crop")                            .glassEffectID("crop", in: namespace)                    }                }
                if isExpanded {                    ActionButton(icon: "wand.and.stars")                        .glassEffectID("enhance", in: namespace)                }            }        }    }}

Navigation Patterns

Tab Bar (Floating)

swift
TabView {    Tab("Home", systemImage: "house") {        HomeView()    }
    Tab("Search", systemImage: "magnifyingglass") {        SearchView()    }
    Tab("Profile", systemImage: "person") {        ProfileView()    }}// Tab bar now floats, reacts to background, collapses on scroll

Toolbar with Grouping

swift
.toolbar {    ToolbarItemGroup(placement: .topBarTrailing) {        Button("Edit", systemImage: "pencil") { }        Button("Share", systemImage: "square.and.arrow.up") { }    }
    ToolbarSpacer(.flexible, placement: .topBarTrailing)
    ToolbarItem(placement: .topBarTrailing) {        Button("Done", systemImage: "checkmark") { }            .tint(.accentColor)    }}

Sheets with Morphing

swift
struct ContentView: View {    @State private var showSettings = false    @Namespace private var namespace
    var body: some View {        NavigationStack {            ContentView()                .toolbar {                    ToolbarItem(placement: .topBarTrailing) {                        Button("Settings", systemImage: "gear") {                            showSettings = true                        }                        .matchedTransitionSource(id: "settings", in: namespace)                    }                }                .sheet(isPresented: $showSettings) {                    SettingsView()                        .navigationTransition(.zoom(sourceID: "settings", in: namespace))                        .presentationDetents([.medium, .large])                }        }    }}

SF Symbols Effects

swift
Image(systemName: "checkmark.circle")    .symbolEffect(.drawOn, value: isComplete)
Image(systemName: "heart.fill")    .symbolEffect(.bounce, value: isFavorite)

Haptics API

swift
import UIKit
// Impact feedbacklet generator = UIImpactFeedbackGenerator(style: .medium)generator.impactOccurred()
// Selection feedbacklet selection = UISelectionFeedbackGenerator()selection.selectionChanged()
// Success/errorlet notification = UINotificationFeedbackGenerator()notification.notificationOccurred(.success)

Accessibility Behaviors

Automatic Glass Adaptations

Glass automatically adapts to:

  • Reduce Transparency: More frosting
  • Increase Contrast: Stark borders
  • Reduce Motion: Tones down animation

Manual Checks

swift
@Environment(\.accessibilityReduceTransparency) var reduceTransparency@Environment(\.accessibilityReduceMotion) var reduceMotion
var animation: Animation? {    reduceMotion ? nil : .bouncy}

System expectations: minimum 44x44pt touch targets, accessibility labels, Dynamic Type support.

Reference

For official Apple documentation links, WWDC session IDs, and API quick reference tables, see reference.md [blocked].

来源与署名

来源：Prisma-Labs-Dev/apple-skills位于skills/ios-liquid-glass提交4986260

许可证： 无许可证

内容归原作者所有。SourceWeft 从公开仓库中收录这些内容。

举报或申请下架

更多来自 Prisma-Labs-Dev/apple-skills 的技能

Eventkit

Prisma-Labs-Dev

Apple EventKit 日历与提醒 API 的参考文档，涵盖 EKEventStore、EKEvent 和 EKReminder。

Software Development2026年10月9日

Swiftui

Prisma-Labs-Dev

本地 SwiftUI API 参考，用于查询视图、布局、导航、状态包装器和修饰符。

Software Development2026年10月9日

Xcuitest

Prisma-Labs-Dev

用于编写可靠的 Swift 6 XCUITest UI 测试的参考指南，涵盖查询、等待、断言和截图。

Software Development2026年10月9日

Swiftdata

Prisma-Labs-Dev

SwiftData API 参考文档，涵盖 @Model、ModelContext、@Query 与架构迁移。

Software Development2026年10月9日

Widgetkit

Prisma-Labs-Dev

通过检索内置参考文档，回答有关 WidgetKit 小组件、时间线条目与提供器的 API 问题。

Software Development2026年10月9日

Hig

Prisma-Labs-Dev

本地可 grep 的 Apple 人机界面指南参考，用于查询组件、无障碍最低要求和约定等事实。

Research & Analysis2026年10月9日

更多Software Development技能

Playground

anthropics

精选

构建自包含的交互式 HTML 演练场，包含控件、实时预览和可复制的提示词输出。

Software Development37K今天更新

M5 Onboard

anthropics

精选

通过 USB 检测 M5Stack ESP32 开发板，刷写 UIFlow 2.0 固件并安装 MicroPython 应用包。

Software Development37K今天更新

Cardputer Buddy

anthropics

精选

指导迭代 Cardputer-Adv 的 MicroPython 应用包：添加应用、通过 USB 串口推送文件、查看日志并运行 REPL 命令。

Software Development37K今天更新

Web Design Guidelines

vercel-labs

精选

依据从远程来源获取的 Web Interface Guidelines 审查 UI 代码，并以 file:line 形式报告问题。

Software Development32K5周前更新

Vercel React Native Skills

vercel-labs

精选

React Native 与 Expo 最佳实践规则，涵盖列表性能、动画、导航、UI 模式、状态与 monorepo 配置。

Software Development32K5周前更新

Vercel React Best Practices

vercel-labs

精选

Vercel 的 React 与 Next.js 性能指南，以 70 条规则的形式用于编写、审查和重构代码。

Software Development32K5周前更新