SwiftUI中@State修饰的selectedIndex未正常更新问题求助

问题根因 #

• 核心问题出在sheet(isPresented:)接口的状态捕获时序：SwiftUI会在showDetails首次变为true时对sheet内容闭包生成快照，你在点击事件中同时为selectedIndex和showDetails赋值，状态更新是批量异步执行的，快照生成时selectedIndex还未完成更新，因此捕获到的是初始值0。
• 首次点击Card1时，selectedIndex赋值为0与初始值一致，不会暴露问题；当第一次sheet加载完成关闭后，后续再触发sheet展示时，闭包会读取最新的selectedIndex值，因此表现为恢复正常。

解决方案 #

最优方案：改用sheet(item:)接口 #

这个接口专为动态内容的sheet设计，会跟随传入的item值自动更新内容，从根源避免状态捕获问题：
首先替换状态定义：

// 替换原有的selectedIndex和showDetails两个状态
@State private var selectedCard: Card?

修改Button点击逻辑：

Button {
    selectedCard = card
} label: {
    UICard(card: card)
}

替换sheet实现：

.sheet(item: $selectedCard) { card in
    let selectedIndex = cards.index(matching: card)!
    CardDetailView(cards: cards, index: selectedIndex)
}

如果需要保留索引的传递方式，也可以给Int添加Identifiable扩展，直接用索引作为sheet的item：

extension Int: Identifiable {
    public var id: Int { self }
}

// 状态定义
@State private var selectedIndex: Int?

// 点击逻辑
Button {
    selectedIndex = cards.index(matching: card)!
} label: {
    UICard(card: card)
}

// sheet实现
.sheet(item: $selectedIndex) { index in
    CardDetailView(cards: cards, index: index)
}

临时兼容方案：延迟sheet触发时机 #

如果不想改动现有结构，可以拆分两个状态的赋值时机，等selectedIndex更新完成后再触发sheet展示：

Button {
    selectedIndex = cards.index(matching: card)!
    // 延迟到下一个主队列周期执行，保证selectedIndex已完成状态更新
    DispatchQueue.main.async {
        showDetails = true
    }
} label: {
    UICard(card: card)
}

注意事项 #

如果你的cards数组会动态增删元素，直接传递索引的方式存在数组变化后索引错位的风险，建议给CardDetailView传入选中卡片的ID，在详情页内部实时计算当前索引，避免展示内容错乱。

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