SwiftUI首次点击列表行时子视图未正确显示问题求助

问题根源 #

你把.sheet附加到了List的每一行Text视图上，这会导致每个列表项都对应一个独立的sheet实例。首次点击时，isShowingItem触发sheet展示，但状态更新的时序问题会让sheet读取到selectedItem的旧值（nil）；后续操作时状态已完成同步，所以能正常显示。

解决方案一：统一sheet位置 #

将.sheet移到List外部，让整个视图只保留一个sheet实例，确保它能获取到最新的selectedItem状态：

import SwiftUI

struct ContentView: View {
    let items = ["Item 1", "Item 2", "Item 3"]
    
    @State private var isShowingItem = false
    @State private var selectedItem: String?
    
    var body: some View {
        List(items, id: \.self) { item in
            Text(item)
                .onTapGesture {
                    selectedItem = item
                    isShowingItem = true
                    print("Selected \(item)")
                }
        }
        // 将sheet移到List外部，全局唯一
        .sheet(isPresented: $isShowingItem) {
            if let selectedItem = selectedItem {
                Text(selectedItem)
            } else {
                Text("Select again")
            }
        }
    }
}

解决方案二：使用sheet(item:)绑定（推荐） #

利用SwiftUI原生的sheet(item:)API，直接绑定选中的条目，无需额外维护isShowingItem状态，系统会自动处理sheet的展示/隐藏：

import SwiftUI

struct ContentView: View {
    let items = ["Item 1", "Item 2", "Item 3"]
    
    // 只需要维护选中条目状态
    @State private var selectedItem: String?
    
    var body: some View {
        List(items, id: \.self) { item in
            Text(item)
                .onTapGesture {
                    selectedItem = item
                    print("Selected \(item)")
                }
        }
        // 直接绑定selectedItem，自动管理sheet状态
        .sheet(item: $selectedItem) { selectedItem in
            Text(selectedItem)
        }
    }
}

方案说明 #

• 方案一通过调整sheet的作用域，避免了多实例冲突，保证状态同步；
• 方案二更符合SwiftUI的状态管理逻辑，代码更简洁，状态依赖更清晰，是官方推荐的用法。

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