SwiftUI中PreviewProvider使用State时预览交互失效问题

问题根源 #

1. PreviewProvider属于静态上下文，你用static @State定义的状态无法像普通视图里的@State那样触发视图刷新——点击按钮后状态确实会变化，但预览不会重新渲染，所以看不到心形状态切换。
2. LikeButtonSimple里的action类型定义为() -> Void?（返回可选空值），但实际调用的toggleLiked是无返回值的闭包，类型不匹配，属于冗余定义，也会影响逻辑执行。

修正步骤 #

1. 修正LikeButtonSimple的闭包类型

把可选返回值的闭包改成普通无返回值闭包，同时简化按钮的action调用：

struct LikeButtonSimple: View {
    let dimen = 50.0
    let dimenHalf = CGFloat(28)
    
    // 修正为无返回值的闭包类型
    var action: () -> Void
    
    @Binding var isLiked : Bool

    var body: some View {
        ZStack {
            Circle()
                .frame(width: dimen, height: dimen)
                .foregroundColor(.white )
                .shadow(color: .black, radius: 2, y: 2)
            // 直接传入action，无需额外包裹
            Button(action: action) {
                Image(systemName: isLiked ? "heart.fill" : "heart")
                    .resizable()
                    .foregroundColor(isLiked ? .red : .gray)
                    .frame(width: dimenHalf, height: dimenHalf)
            }
        }
    }
}

2. 用容器视图托管预览状态

不要在PreviewProvider里用静态状态，创建一个专门的预览容器视图，把状态放在这个视图的@State里，然后预览该容器：

struct LikeButtonSimple_Previews: PreviewProvider {
    // 预览容器，负责托管状态和创建按钮
    struct PreviewContainer: View {
        @State private var isLiked = true
        
        var body: some View {
            LikeButtonSimple(
                action: { isLiked.toggle() },
                isLiked: $isLiked
            )
        }
    }
    
    static var previews: some View {
        PreviewContainer()
    }
}

调整后，预览中点击按钮就能正常切换心形的填充状态，和模拟器里的交互效果完全一致。

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