SwiftUI自定义Reveal转场后按钮图标消失问题求助

可行解决方案 #

方案1：给SF Symbol图标添加显式渲染配置 #

在消失的按钮图标上强制设置渲染模式与固定尺寸，避免动画后渲染异常：

Button(action: {
    settings.rowVisible.toggle()
}) {
    Image(systemName: "xmark.circle.fill")
        .renderingMode(.original) // 强制保留原始渲染属性
        .frame(width: 24, height: 24) // 固定尺寸避免布局歧义
        .background(.blue)
}

方案2：重构自定义转场实现 #

原转场的mask+scaleEffect组合容易触发SwiftUI渲染管道的异常，改用clipShape实现等效的reveal效果：

struct RevealTransition: Transition {
    func body(content: Content, phase: TransitionPhase) -> some View {
        content
            .clipShape(
                Rectangle()
                    .frame(
                        height: phase.isIdentity ? .infinity : 0,
                        alignment: .top
                    )
            )
    }
}

extension AnyTransition {
    static var reveal: AnyTransition { AnyTransition(RevealTransition()) }
}

方案3：调整转场作用层级 #

将转场从整个SimpleView移到背景层，避免影响内部按钮的渲染：

// SimpleView的body修改
var body: some View {
    ZStack {
        Rectangle()
            .fill(.gray)
            .transition(.reveal) // 转场仅作用于背景
        
        HStack(spacing: 0) {
            // 按钮代码保持不变
            Button(action: {
                settings.rowVisible.toggle()
            }) {
                Image(systemName: "xmark.circle")
                    .background(.blue)
            }
            
            Button(action: {
                settings.rowVisible.toggle()
            }) {
                Image(systemName: "xmark.circle.fill")
                    .background(.blue)
            }
        }
        .foregroundColor(.white)
    }
}

问题原因分析 #

这是SwiftUI转场动画中mask与SF Symbol矢量渲染的冲突问题：当自定义转场通过mask动态修改视图可见区域时，布局中最后添加的视图（如HStack最右侧按钮）的矢量图标图层，会因动画结束后渲染管道的残留状态被意外隐藏，仅保留背景视图。真机的渲染调度优先级更高，因此问题必现；模拟器因性能调度差异偶发。

从测试现象（调整HStack顺序后问题转移到新的最后一个视图）也能验证：这是布局渲染顺序与转场mask交互导致的异常。

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