liquid-glass
Liquid Glass-Effekte zu SwiftUI-Apps hinzufügen
Der Bau moderner iOS-Oberflächen erfordert die Implementierung fortgeschrittener visueller Effekte. Dieser Skill bietet Richtlinien und Code-Beispiele für die Verwendung der iOS 26+ Liquid Glass API, um Unschärfe, Reflexion und interaktive Glasflächen in SwiftUI zu erstellen.
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“liquid-glass”。 Glas-Effekt zu einer Kartenansicht mit Fallback hinzufügen
预期结果:
- if #available(iOS 26, *) {
- Text("Card Title")
- .padding()
- .glassEffect(.regular.interactive(), in: .rect(cornerRadius: 16))
- } else {
- Text("Card Title")
- .padding()
- .background(.ultraThinMaterial, in: RoundedRectangle(cornerRadius: 16))
- }
正在使用“liquid-glass”。 Glas-Schaltflächen nebeneinander erstellen
预期结果:
- GlassEffectContainer(spacing: 16) {
- Button("Confirm") { }
- .buttonStyle(.glassProminent)
- Button("Cancel") { }
- .buttonStyle(.glass)
- }
安全审计
安全Documentation-only skill containing SwiftUI Liquid Glass API guidelines. All 48 static findings are false positives: backtick patterns are markdown code blocks, cryptographic/reconnaissance patterns are documentation text. No executable code, scripts, or network operations exist.
质量评分
你能构建什么
Glas-Karten in einem Einstellungsbildschirm erstellen
Eine Oberfläche mit Glas-Karten erstellen, die Profilinformationen, Schalter und Navigation enthalten, unter Verwendung von GlassEffectContainer und angemessenem Abstand.
Bestehende Unschärfe-Effekte refaktorieren
Eine App überprüfen, die ältere .ultraThinMaterial Unschärfe-Modifier verwendet, und auf Liquid Glass aktualisieren mit entsprechenden iOS 26+ Verfügbarkeitsprüfungen.
Morphing-Animationen hinzufügen
Glatte Übergänge implementieren, bei denen Symbole zu detaillierten Ansichten erweitert werden, unter Verwendung von glassEffectID und @Namespace für koordinierte Animationen.
试试这些提示
Füge einen Liquid Glass-Effekt zu meiner SwiftUI Text-Ansicht mit einer abgerundeten Rechteckform hinzu. Zeige mir den Code mit einer iOS 26 Verfügbarkeitsprüfung und einem Fallback für ältere Versionen.
Erstelle eine Reihe von Symbolen unter Verwendung von GlassEffectContainer mit 24pt Abstand zwischen ihnen. Jedes Symbol sollte seinen eigenen Glas-Effekt angewendet haben.
Konvertiere meine bestehende Schaltfläche zur Verwendung von .buttonStyle(.glassProminent) und mache das Glas responsiv auf Touch-Interaktionen mit dem .interactive() Modifier.
Erstelle eine Animation, bei der ein kleines Symbol zu einer detaillierten Ansicht erweitert wird. Verwende glassEffectID und @Namespace, um den morphenden Glas-Effekt glatt zu koordinieren.
最佳实践
- glassEffect() Modifier nach allen Layout- und Erscheinungs-Modifikatoren anwenden für korrekte Schichtung
- GlassEffectContainer verwenden, wenn mehrere Glas-Elemente kombiniert werden sollen, um Abstand und Zusammenführung zu steuern
- Liquid Glass APIs mit #available(iOS 26, *) schützen und visuelle Fallbacks für ältere Versionen bereitstellen
避免
- Das Anwenden von .glassEffect() vor Layout-Modifikatoren verursacht falsche Glas-Größen
- Die Verwendung von .interactive() auf nicht-interaktiven Elementen fügt unnötigen Overhead hinzu
- Das Erstellen vieler einzelner Glasflächen ohne GlassEffectContainer führt zu inkonsistentem Zusammenführen