You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

iOS 26 Liquid Glass:点击FAB时附近玻璃元素出现异常高亮

iOS 26 Liquid Glass设计系统视觉问题:点击FAB触发邻近玻璃卡片意外高亮

在iOS 26全新的Liquid Glass设计系统中,当页面同时存在多个使用.buttonStyle(.glass)的交互式玻璃元素,以及一个使用.buttonStyle(.glassProminent)的悬浮操作按钮(FAB)时,点击FAB会导致附近玻璃卡片出现不必要的视觉高亮。

问题详情

点击FAB按钮时,其下方的玻璃卡片会显示短暂高亮动画,仿佛玻璃效果的邻近检测触发了本不应在此刻交互的元素的视觉反馈。

最小复现示例

import SwiftUI

@available(iOS 26.0, *)
struct ContentView: View {
    var body: some View {
        ZStack(alignment: .bottomTrailing) {
            ScrollView {
                LazyVStack(spacing: 16) {
                    ForEach(1...25, id: \.self) { index in
                        GlassCardView(index: index)
                    }
                }
                .padding(.horizontal, 16)
                .padding(.top, 16)
                .padding(.bottom, 100)
            }
            
            // 悬浮操作按钮
            Button {
                print("FAB tapped")
            } label: {
                Image(systemName: "plus")
                    .font(.system(size: 24, weight: .semibold))
                    .frame(width: 56, height: 56)
            }
            .buttonStyle(.glassProminent)
            .buttonBorderShape(.circle)
            .padding(.trailing, 20)
            .padding(.bottom, 30)
        }
    }
}

@available(iOS 26.0, *)
struct GlassCardView: View {
    let index: Int
    
    var body: some View {
        Button {
            print("Card \(index) tapped")
        } label: {
            HStack(spacing: 16) {
                Circle()
                    .fill(.blue.opacity(0.3))
                    .frame(width: 50, height: 50)
                    .overlay {
                        Image(systemName: "star.fill")
                            .foregroundStyle(.blue)
                    }
                
                VStack(alignment: .leading, spacing: 4) {
                    Text("Item \(index)")
                        .font(.headline)
                        .foregroundStyle(.primary)
                    
                    Text("交互式液态玻璃容器")
                        .font(.subheadline)
                        .foregroundStyle(.secondary)
                }
                
                Spacer()
                
                Image(systemName: "chevron.right")
                    .foregroundStyle(.secondary)
            }
            .padding(16)
        }
        .buttonStyle(.glass)
        .buttonBorderShape(.roundedRectangle(radius: 20))
    }
}

问题演示

问题演示动画

内容的提问来源于stack exchange,提问作者Mircea Dragota

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.11 16:33:15