SwiftUI Bug记录：.sheet首次点击弹出空白视图，第二次才正常显示

在使用 SwiftUI 开发图片展示应用时，我遇到了一个令人困惑的问题：在进入 GroupImageView 后点击任意图片，.sheet 会弹出一个空白视图，没有内容显示，也没有打印任何跳转相关的调试信息。但令人惊奇的是，第二次点击同一张或另一张图片时，一切又都恢复正常。

这是一次典型的 SwiftUI 状态绑定陷阱，本文将记录这个 Bug 的现象、源码分析及最终修复方案，帮助他人（包括未来的我）避免类似问题。

📍 问题现象

进入 GroupImageView 后，点击图片列表中的任何一张图片：

• 控制台正确输出点击了图片: 15

• 但没有输出 jump--to--ImageDetailView--index:15

• .sheet 弹出的是一个空白页面当我再次点击其他图片或同一张图片时：

• 控制台输出：

点击了图片: 14

jump--to--ImageDetailView--index:14

• .sheet 正常弹出并展示 ImageDetailView 内容

❌ 错误源码

以下是触发这个问题的相关简化代码片段：

less 复制代码

@State private var selectedImageIndex: Int? = nil
@State private var showDetailSheet = false

var body: some View {
    ScrollView {
        LazyVGrid(columns: columns) {
            ForEach(images.indices, id: \.self) { index in
                let image = images[index]
                Button {
                    print("点击了图片: \(index)")
                    selectedImageIndex = index
                    showDetailSheet = true
                } label: {
                    Image(uiImage: image)
                        .resizable()
                        .scaledToFit()
                }
            }
        }
    }
    .sheet(isPresented: $showDetailSheet) {
        if let index = selectedImageIndex {
            print("jump--to--ImageDetailView--index:\(index)")
            ImageDetailView(image: images[index])
        }
    }
}

🔍 问题分析

乍一看逻辑是合理的，但这个 .sheet 弹空白的问题正是因为 selectedImageIndex 的值更新尚未完成，showDetailSheet 就已经变成 true 触发了 sheet 弹出。

SwiftUI 的 .sheet 会在 showDetailSheet = true 这一刻立即尝试渲染内容，如果此时 selectedImageIndex 仍是 nil 或尚未被 SwiftUI 识别为已更新，.sheet 里的条件 if let index = selectedImageIndex 就无法满足，因此内容是空白。

而第二次点击时，状态已经更新稳定，显示就一切正常了。

✅ 正确写法：绑定 Enum 或 Identifiable 对象

要解决这个问题，可以使用 sheet(item:) 绑定一个遵循 Identifiable 的对象，这样 SwiftUI 会等待该对象不为 nil 才呈现弹窗内容。代码改写如下：

定义绑定项：

css 复制代码

struct ImageIndexWrapper: Identifiable {
    var id: Int { index }
    let index: Int
}

修改状态：

scss 复制代码

@State private var selectedImage: ImageIndexWrapper? = nil

使用 .sheet(item:)：

.sheet(item: $selectedImage) { wrapper in
    let index = wrapper.index
    print("jump--to--ImageDetailView--index:\(index)")
    ImageDetailView(image: images[index])
}

更新点击事件：

scss 复制代码

Button {
    print("点击了图片: \(index)")
    selectedImage = ImageIndexWrapper(index: index)
} label: {
    Image(uiImage: image)
        .resizable()
        .scaledToFit()
}

🎉 效果验证

修复后：

• 第一次点击图片就能正确跳转；

• 控制台完整打印跳转日志；

• .sheet 内容始终正确展示；

• 不再需要手动管理 showDetailSheet 状态。

🧠 总结

SwiftUI 是声明式框架，对状态的依赖非常敏感。这个 .sheet 弹出空白视图的问题，本质上是由于多个 @State 变量更新顺序与 SwiftUI 渲染机制的时机不匹配。使用 .sheet(item:) 可以让绑定行为更加可靠。

经验教训：

• 避免同时依赖多个 @State 控制 .sheet；

• 若弹窗内容依赖于某个值，尽量将该值直接作为绑定项；

• .sheet(item:) 是更安全的做法。