SwiftUI中Sheet视图内opacity属性为何无法实现闪烁效果？

问题描述 #

我编写了一段SwiftUI代码，主视图内的flashButton可以正常实现从opacity 1变为0再恢复的闪烁效果，但Sheet弹窗里的flashButton完全没有反应。想知道问题出在哪里，以及如何让Sheet中的按钮也实现相同的闪烁效果。

原代码如下：

import SwiftUI

struct ContentView: View {
    
    @State var shouldFlashScreen = false
    @State var openSheet = false

    var body: some View {
        VStack {
            sheetButton
                .frame(width: 100, height: 100)
            
            flashButton
                .frame(width: 100, height: 100)
        }
    }
    
    @ViewBuilder
    var sheetButton: some View {
        Button {
            openSheet = true
        } label: {
            Text("Open sheet")
        }
        .sheet(isPresented: $openSheet) {
            flashButton
        }
    }
    
    @ViewBuilder
    var flashButton: some View {
        ZStack {
            Button {
                shouldFlashScreen = true
                withAnimation(.linear(duration: 0.05)) {
                    shouldFlashScreen = false
                }
            } label: {
                Text("Tap to flash")
            }
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(.gray)
        .opacity(shouldFlashScreen ? 0 : 1)
        .border(.red)
    }
    
}

#Preview {
    ContentView()
}

问题原因 #

• 共用父视图State变量：shouldFlashScreen是ContentView的全局@State，主视图和Sheet里的flashButton都依赖这个变量。Sheet属于独立的视图层级，当修改该变量时，动画上下文无法正确传递到Sheet视图，导致闪烁效果失效；同时主视图的按钮会跟着一起闪烁，不符合预期。
• 状态更新时机冲突：点击按钮时先将shouldFlashScreen设为true，立即又通过动画设为false，Sheet视图可能还未完成第一次状态更新就接收到第二次变化，直接跳过opacity=0的阶段，看不到闪烁效果。

解决方法 #

将flashButton重构为独立的View，内部维护自己的状态变量，让每个按钮实例拥有独立的闪烁控制逻辑，确保动画在各自的视图层级内正确执行。

修改后的代码：

import SwiftUI

struct ContentView: View {
    
    @State var openSheet = false

    var body: some View {
        VStack {
            sheetButton
                .frame(width: 100, height: 100)
            
            FlashButton()
                .frame(width: 100, height: 100)
        }
    }
    
    @ViewBuilder
    var sheetButton: some View {
        Button {
            openSheet = true
        } label: {
            Text("Open sheet")
        }
        .sheet(isPresented: $openSheet) {
            FlashButton()
        }
    }
}

// 独立的闪烁按钮视图，内部维护专属状态
struct FlashButton: View {
    @State private var shouldFlashScreen = false
    
    var body: some View {
        ZStack {
            Button {
                shouldFlashScreen = true
                withAnimation(.linear(duration: 0.05)) {
                    shouldFlashScreen = false
                }
            } label: {
                Text("Tap to flash")
            }
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(.gray)
        .opacity(shouldFlashScreen ? 0 : 1)
        .border(.red)
    }
}

#Preview {
    ContentView()
}

补充说明 #

• 每个FlashButton实例都有独立的shouldFlashScreen状态，点击时只会触发自身的闪烁动画，不会影响其他按钮。
• 动画上下文被限制在当前View内部，Sheet的视图层级能正确捕获动画变化，实现和主视图完全一致的闪烁效果。

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