如何消除SwiftUI组件长按触发的快速白色闪烁效果？

问题原因 #

长按出现的白色闪烁是SwiftUI默认的长按高亮反馈与你的多层视图（模糊层+重复图片）交互导致的——系统默认的高亮效果会短暂覆盖模糊层，露出下方图片，从而产生闪烁感。

解决方案 #

1. 禁用系统默认长按高亮 #

给组件根视图添加样式，直接取消系统自带的长按高亮反馈：

ZStack(alignment: .topLeading) {
    // 原有视图内容
}
.buttonStyle(PlainButtonStyle()) // 禁用默认按钮高亮样式
.highlightDisabled(true) // 明确关闭高亮反馈

如果组件嵌套在List中，还需调整列表样式避免额外高亮：

List(lycées) { lycée in
    LycéesRow(lycée: lycée)
}
.listStyle(.plain)
.environment(\.defaultMinListRowHeight, 240) // 适配组件高度

2. 优化视图层级（减少重复渲染） #

你的代码重复加载了两次lycée.image，既浪费性能也加重视觉冲突。简化层级，只保留一张背景图叠加模糊层即可：

struct LycéesRow: View {
    var lycée: Lycée
    
    var body: some View {
        ZStack(alignment: .topLeading) {
            // 唯一背景图
            lycée.image
                .resizable()
                .aspectRatio(contentMode: .fill)
                .frame(width: 365, height: 280)
                .clipped()
                .cornerRadius(15)
                .offset(y: -35)
            
            // 模糊层直接覆盖在背景图上
            RoundedRectangle(cornerRadius: 15)
                .fill(.ultraThinMaterial)
                .frame(width: 365, height: 280)
                .offset(y: -35)
            
            // 文本内容
            VStack(alignment: .leading, spacing: 1) {
                Text(lycée.département + ", France")
                    .font(.system(size: 15, weight: .medium))
                    .foregroundColor(.white.opacity(0.5))
                
                Text(lycée.nom)
                    .font(.system(size: 25, weight: .bold, design: .serif))
                    .foregroundColor(.white)
                
                Text(lycée.ville)
                    .font(.system(size: 13, weight: .light))
                    .foregroundColor(.white)
            }
            .offset(x: 10, y: -30)
        }
        .buttonStyle(PlainButtonStyle())
        .highlightDisabled(true)
    }
}

3. 自定义长按交互（如需保留长按功能） #

如果需要给组件添加长按操作，完全自定义视觉反馈，避免依赖系统默认高亮：

struct LycéesRow: View {
    var lycée: Lycée
    @State private var isLongPressed = false
    
    var body: some View {
        ZStack(alignment: .topLeading) {
            lycée.image
                .resizable()
                .aspectRatio(contentMode: .fill)
                .frame(width: 365, height: 280)
                .clipped()
                .cornerRadius(15)
                .offset(y: -35)
            
            // 自定义长按模糊层变化
            RoundedRectangle(cornerRadius: 15)
                .fill(isLongPressed ? .thinMaterial : .ultraThinMaterial)
                .frame(width: 365, height: 280)
                .offset(y: -35)
            
            // 文本内容...
        }
        .highPriorityGesture(
            LongPressGesture(minimumDuration: 0.5)
                .onChanged { _ in isLongPressed = true }
                .onEnded { _ in
                    isLongPressed = false
                    // 在这里添加你的长按逻辑
                }
        )
        .buttonStyle(PlainButtonStyle())
    }
}

总结 #

核心解决思路是禁用系统默认长按高亮+简化视图层级，如需保留长按功能则自定义交互反馈，即可彻底消除白色闪烁问题。

内容的提问来源于stack exchange，提问作者kwiky