SwiftUI弹窗首次点击无法动态填充内容问题求助

问题现象 #

在SwiftUI应用中实现按钮触发模态视图时，首次点击按钮会弹出空视图，关闭后点击其他按钮才会正常显示内容，后续功能恢复正常。简化复现代码如下：

import SwiftUI

struct ContentView: View {
    @State private var showModal = false
    @State private var selectedItem = ""
    
    var body: some View {
        VStack {
            Button(action: {
                self.selectedItem = "Button 1"
                self.showModal = true
            }) {
                Text("Button 1")
            }
            Button(action: {
                self.selectedItem = "Button 2"
                self.showModal = true
            }) {
                Text("Button 2")
            }
        }
        .sheet(isPresented: $showModal, content: {
            ModalView(item: self.selectedItem)
        })
    }
}

struct ModalView: View {
    let item: String
    
    var body: some View {
        VStack {
            Text("You pushed \(item)")
        }
    }
}

实际测试中，首次点击「Button 1」会弹出仅显示You pushed 的空视图；点击「Button 2」后，弹窗正常显示You pushed Button 2，此后再点击「Button 1」也能正常显示对应内容。

问题原因 #

这是因为SwiftUI的状态更新是异步的：当你先设置selectedItem再将showModal设为true时，sheet的内容闭包可能在selectedItem的更新完成前就已被求值，导致首次传递给ModalView的是空字符串。后续点击时，selectedItem已有之前的缓存值，所以能正常显示。

解决方案 #

推荐使用基于可选Item的sheet绑定方式，这种方式直接监听selectedItem的变化，当它从nil变为具体值时自动触发弹窗，从根源上避免状态更新顺序的问题。

修改后的代码如下：

import SwiftUI

struct ContentView: View {
    // 将selectedItem改为可选类型，初始值为nil
    @State private var selectedItem: String?
    
    var body: some View {
        VStack {
            Button(action: {
                self.selectedItem = "Button 1"
            }) {
                Text("Button 1")
            }
            Button(action: {
                self.selectedItem = "Button 2"
            }) {
                Text("Button 2")
            }
        }
        // 使用item绑定的sheet，当selectedItem不为nil时展示弹窗
        .sheet(item: $selectedItem) { item in
            ModalView(item: item)
        }
    }
}

// 让String遵循Identifiable协议（自定义模型可直接实现Identifiable）
extension String: Identifiable {
    public var id: String { self }
}

struct ModalView: View {
    let item: String
    
    var body: some View {
        VStack {
            Text("You pushed \(item)")
        }
    }
}

方案说明 #

1. 移除额外的showModal变量，将selectedItem设为可选类型，通过它的非空状态控制弹窗展示。
2. 使用sheet(item:content:)修饰符：当selectedItem被赋值为具体字符串时自动弹出弹窗；弹窗关闭时，selectedItem会自动重置为nil。
3. 让String遵循Identifiable协议（若为自定义数据模型，建议直接实现Identifiable），满足sheet(item:)的参数要求。

若不想让String遵循Identifiable，也可通过指定唯一标识实现：

.sheet(item: $selectedItem, id: \.self) { item in
    ModalView(item: item)
}

这种方式比原有的isPresented绑定更可靠，尤其适合需要传递数据到弹窗的场景。

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