SwiftUI模态弹窗无法正确显示对应小节内容的问题排查

我正在开发一个层级结构的内容展示界面，包含3个主章节："PreMeds"、"Fluid Management"和"Airway"，各主章节对应子小节如下：

• "PreMeds" → "PreMeds"、"Induction Agents"、"Volatiles"
• "Fluid Management" → "Fluid Management"、"Massive Blood Transfusion Protocol"
• "Airway" → "Airway Basics"、"Airway Equipment"、"Simplified Difficult Airway Strategy"

需求为：主页面以Section Card View展示主章节，点击主章节跳转至子小节列表页；点击子小节时，以模态弹窗展示对应文本内容。

我通过AnaesthesiaModel和SectionDetail构建数据模型，当前列表可正常渲染，但点击子小节时，模态弹窗始终显示固定内容；修改实现逻辑后，首次点击弹窗无法更新内容，需多次点击才会显示正确内容。

数据模型代码 #

struct AnaesthesiaModel: Identifiable {
    var id = UUID()
    let name: String
    let details: [SectionDetail]
}

let sampleAnaesthesiaSections = [
    AnaesthesiaModel(name: "PreMeds", details: preMedsDetails),
    AnaesthesiaModel(name: "Fluid Management", details: fluidManagementDetails),
    AnaesthesiaModel(name: "Airway", details: airwayDetails)
]

struct SectionDetail: Identifiable {
    var id = UUID()
    let name: String
    let content: String // You can represent each detail's content as a simple string for now
}

let preMedsDetails: [SectionDetail] = [
    SectionDetail(name: "PreMeds", content: """
preMed section content
"""),
    SectionDetail(name: "Induction Agents", content: """
    induction agent content
    """),
    SectionDetail(name: "Volatiles", content: """
Volatiles - MAC Values
Halothane 0.74
Isoflurane 1.2
Sevoflurane 2.0
Desflurane 6.0
""")
]

let fluidManagementDetails: [SectionDetail] = [
    SectionDetail(name: "Fluid Management", content: """
Volatiles - MAC Values
Halothane 0.74
Isoflurane 1.2
Sevoflurane 2.0
Desflurane 6.0
"""),
    SectionDetail(name: "Massive Blood Transfusion Protocol", content: """
massive blood transfusion protocol
""")
]

let airwayDetails: [SectionDetail] = [
    SectionDetail(name: "Airway Basics", content: """
Airway Basics
"""),
    SectionDetail(name: "Airway Equipment", content: """
Airway Equipment
"""),
    SectionDetail(name: "Simplified Difficult Airway Strategy", content: """
Simplified Difficult Airway Strategy
""")
]

初始视图代码 #

struct AnaesthesiaView: View {

    let sections = sampleAnaesthesiaSections
    var body: some View {
        NavigationView {
            List(sections) { section in
               
                NavigationLink {
                    SubsectionView(sectionDetails: section.details)
                    // destinationView(for: section)
                } label: {
                    SectionCardView(cardTitle: section.name, cardBackgroundColor: Color.green)
                }

            }
            .navigationTitle("Sections")
        }
    }
    
    // func destinationView(for section: AnaesthesiaModel) -> some View {
     //    return AnyView(SubsectionView(sectionDetails: section.details))
  //  }
    
}


struct AnaesthesiaView_Previews: PreviewProvider {
    static var previews: some View {
        AnaesthesiaView()
    }
}

struct SubsectionView: View {
    let sectionDetails: [SectionDetail]
    
    @State private var showModal = false
    
    var body: some View {
        List(sectionDetails) { detail in
            
            Button {
                showModal.toggle()
            } label: {
                SectionCardView(cardTitle: detail.name, cardBackgroundColor: Color.red)
            }
            .sheet(isPresented: $showModal) {
                DetailView(detailContent: detail)
            }
            
            
        }
    }
}

struct DetailView: View {

    let detailContent: SectionDetail
    
    var body: some View {
        ScrollView {
            Text(detailContent.content)
                .padding()
        }
        .navigationTitle(detailContent.name)
    }
}

struct DetailView_Previews: PreviewProvider {
    static var previews: some View {
//        DetailView(details: preMedsDetails, backgroundColor: Color("card2"))
        DetailView(detailContent: preMedsDetails[1])
    }
}

修改后的代码 #

struct DetailView: View {

let detailContent: String

var body: some View {
    ScrollView {
        Text(detailContent)
            .padding()
    }
} }

struct DetailView_Previews: PreviewProvider {
static var previews: some View { //        DetailView(details: preMedsDetails, backgroundColor: Color("card2"))
DetailView(detailContent: "Test")
} }

struct SubsectionView: View {

let sectionDetails: [SectionDetail]

@State private var showModal = false
@State private var detailContent = ""

var body: some View {
    List(sectionDetails) { detail in
         //            NavigationLink { //                DetailView(detailContent: detail) //            } label: {          

Text(detail.name) //            }

        Button {
            self.detailContent = detail.content
            showModal.toggle()
            
        } label: {
            SectionCardView(cardTitle: detail.name, cardBackgroundColor: Color.red)
        }
        
        
        
    }
    .sheet(isPresented: $showModal) {
        DetailView(detailContent: detailContent)
    }
} }

请问为何修改后首次点击子小节时，模态弹窗无法更新内容？如何解决该问题？

原因分析 #

修改后的代码使用sheet(isPresented:)展示弹窗，这个API的特性是：当isPresented绑定值变为true时，SwiftUI会提前初始化弹窗视图（DetailView）。首次点击时，detailContent还没来得及更新为当前选中项的内容，弹窗就已经用初始空字符串创建完成，所以显示空内容；后续点击时，detailContent已被前一次操作更新，才会展示正确内容。

另外，初始代码的问题在于：在List循环中给每个按钮绑定同一个showModal状态，且每个按钮都附加了sheet，这会导致所有按钮共享同一个弹窗实例，点击任何按钮都会显示最后一个循环项的内容。

解决方案 #

推荐使用sheet(item:)API替代sheet(isPresented:)，它直接绑定一个可选的SectionDetail对象，当对象不为nil时自动展示弹窗，且每次都会根据选中的对象重新初始化弹窗视图，完美解决内容更新问题。

修改后的核心代码如下：

// 恢复DetailView接收SectionDetail对象，贴合数据模型设计
struct DetailView: View {
    let detail: SectionDetail
    
    var body: some View {
        ScrollView {
            Text(detail.content)
                .padding()
        }
        .navigationTitle(detail.name)
    }
}

struct SubsectionView: View {
    let sectionDetails: [SectionDetail]
    
    // 使用可选SectionDetail对象绑定弹窗展示状态
    @State private var selectedDetail: SectionDetail?
    
    var body: some View {
        List(sectionDetails) { detail in
            Button {
                selectedDetail = detail
            } label: {
                SectionCardView(cardTitle: detail.name, cardBackgroundColor: Color.red)
            }
        }
        // 通过item绑定自动处理弹窗展示与内容更新
        .sheet(item: $selectedDetail) { selected in
            DetailView(detail: selected)
        }
    }
}

补充说明 #

• sheet(item:)要求绑定对象遵循Identifiable协议，你的SectionDetail已通过自动生成的id实现该协议，可直接使用。
• 这种方式无需额外维护字符串类型的detailContent状态，直接绑定数据模型对象，代码更简洁且不易出错。
• 初始代码中每个按钮绑定同一showModal并附加sheet的写法存在逻辑错误，会导致弹窗实例复用混乱，sheet(item:)天然避免了这个问题。

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