SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场ios-liquid-glass

ios-liquid-glass

前端与建站

查看项目

更新于 10-15 15:48

技能介绍

用途

本资料是 Liquid Glass 设计系统（iOS 26+）的 API 参考，记录系统提供的玻璃效果、容器、形变过渡及相关系统行为。资料明确说明：它只记录系统提供的能力，设计方向由开发者自行决定。

适用场景包括：

  • 实现玻璃材质、glassEffect 修饰符或 GlassEffectContainer
  • 使用系统玻璃的导航界面（标签栏、工具栏、表单）
  • 检查玻璃如何适配无障碍设置
  • 使用 Icon Composer 创建应用图标

Apple 提出的设计原则

资料列出 Apple 描述 Liquid Glass 的三项原则（作为参考，而非强制要求）：

  • 层级（Hierarchy）：控件浮于内容之上。玻璃为内容加框，而不是遮挡内容。
  • 和谐（Harmony）：软件设计与硬件对齐——同心圆角、流畅手势。
  • 一致性（Consistency）：在 iPhone、iPad、Mac 上自适应——同一身份，情境化表达。

一个值得了解的功能性约束：玻璃是为导航/控制层设计的。将其应用于内容表面会破坏其采样模型（见下文容器部分）。

核心 API

基础玻璃效果

import SwiftUI

// Simple glass application
Text("Action")
    .padding()
    .glassEffect() // .regular variant, .capsule shape

// With explicit parameters
Button("Confirm") { }
    .padding()
    .glassEffect(.regular, in: RoundedRectangle(cornerRadius: 12), isEnabled: true)

玻璃变体

  • .regular：工具栏、导航栏、标签栏、标准控件
  • .clear：媒体（照片、地图、视频）之上的浮动控件
  • .identity：条件禁用，例如 glassEffect(isActive ? .regular : .identity)

玻璃修饰符

// Semantic tinting
.glassEffect(.regular.tint(.accentColor))

// Interactive behaviors (scaling, shimmer, touch illumination)
.glassEffect(.regular.interactive())

// Combined
.glassEffect(.regular.tint(.blue).interactive())

自定义形状

// 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 与形变

玻璃无法采样其他玻璃。多个玻璃元素应使用容器：

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

形变过渡示例：

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)
                }
            }
        }
    }
}

导航模式

浮动标签栏

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 {
    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)
    }
}

带形变的表单

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 效果

Image(systemName: "checkmark.circle")
    .symbolEffect(.drawOn, value: isComplete)

Image(systemName: "heart.fill")
    .symbolEffect(.bounce, value: isFavorite)

触觉反馈 API

import UIKit

// Impact feedback
let generator = UIImpactFeedbackGenerator(style: .medium)
generator.impactOccurred()

// Selection feedback
let selection = UISelectionFeedbackGenerator()
selection.selectionChanged()

// Success/error
let notification = UINotificationFeedbackGenerator()
notification.notificationOccurred(.success)

无障碍行为

玻璃会自动适配：

  • 降低透明度（Reduce Transparency）：更多磨砂
  • 增强对比度（Increase Contrast）：更鲜明的边框
  • 减弱动态效果（Reduce Motion）：减弱动画

手动检查：

@Environment(\.accessibilityReduceTransparency) var reduceTransparency
@Environment(\.accessibilityReduceMotion) var reduceMotion

var animation: Animation? {
    reduceMotion ? nil : .bouncy
}

系统期望：最小 44x44pt 触摸目标、无障碍标签、支持动态字体（Dynamic Type）。

参考

官方 Apple 文档链接、WWDC 场次编号和 API 快速参考表见 reference.md。

限制

资料未提供收费、价格、平台支持范围、效果保证或具体使用步骤之外的额外信息；上述内容均以资料所述为准。