SwiftUI模态弹窗问题：如何从CourseView触发ContentView弹出？

Hey there! Let's take a look at your current implementation and fix the modal sheet issue. The problem with your code right now is that every CourseView is tied to the same showContent state, which can lead to inconsistent behavior—plus you're attaching a sheet to each individual course view, which isn't the cleanest approach.

Here's a better way to handle triggering the ContentView modal from any CourseView, while also passing the selected course's data to the modal if needed:

Step 1: Adjust State Management #

Instead of a boolean showContent state, we'll use an optional Course variable to track which course was selected. This not only controls when the sheet appears but also lets us pass course data to ContentView.

Step 2: Centralize the Sheet #

We'll attach the sheet to the parent ScrollView (or root of HomeList) instead of each CourseView—this keeps state logic organized and avoids redundant sheet instances.

Step 3: Add Tap Interaction to Course Views #

We'll add a tap gesture to each CourseView to set the selected course, which triggers the sheet automatically.

Full Modified Code #

//
// HomeList.swift
// Design Code
//
// Created by Govind Pathak on 09/09/19.
// Copyright © 2019 Govind Pathak. All rights reserved.
//
import SwiftUI

struct HomeList: View {
    // Track selected course instead of a boolean state
    @State var selectedCourse: Course?
    
    var body: some View {
        ScrollView(.horizontal , showsIndicators: false){
            HStack(spacing:30) {
                ForEach(courses) { item in
                    CourseView(
                        title: item.title,
                        image: item.image,
                        color: item.color,
                        shadowColor: item.shadowColor)
                    // Tap gesture to set selected course
                    .onTapGesture {
                        self.selectedCourse = item
                    }
                }
            }
            .padding(.leading , 30)
        }
        // Attach sheet to parent view, triggered when a course is selected
        .sheet(item: $selectedCourse) { course in
            // Pass selected course data to ContentView (optional but useful)
            ContentView(selectedCourse: course)
        }
    }
}

struct HomeList_Previews: PreviewProvider {
    static var previews: some View {
        HomeList()
    }
}

struct CourseView: View {
    var title = "Build an app with SwiftUI"
    var image = "Illustration1"
    var color = Color("background3")
    var shadowColor = Color(red: 0.271, green: 0.235, blue: 0.788, opacity: 0.3)
    
    var body: some View {
        VStack(alignment: .leading) {
            Text(title)
                .font(.title)
                .fontWeight(.bold)
                .foregroundColor(Color.white)
                .padding(20)
                .lineLimit(4)
                .padding(.trailing , 50)
            Spacer()
            Image(image)
                .resizable()
                .renderingMode(.original)
                .aspectRatio(contentMode: .fit)
                .frame(width: 246, height: 150)
                .padding(.bottom , 30)
        }
        .background(color)
        .cornerRadius(30)
        .frame(width: 246, height: 360)
        .shadow(color:shadowColor , radius: 20 , x: 0, y: 20)
    }
}

// Update ContentView to accept selected course data (customize as needed)
struct ContentView: View {
    var selectedCourse: Course
    
    var body: some View {
        VStack {
            Text(selectedCourse.title)
                .font(.largeTitle)
                .fontWeight(.bold)
                .padding()
            Image(selectedCourse.image)
                .resizable()
                .aspectRatio(contentMode: .fit)
                .frame(height: 200)
                .padding()
            Spacer()
        }
        .navigationTitle("Course Details")
    }
}

struct Course : Identifiable {
    var id = UUID()
    var title: String
    var image: String
    var color: Color
    var shadowColor: Color
}

let coursesData = [
    Course(title: "Build an app with SwiftUI", image: "Illustration1", color: Color("background3"), shadowColor: Color("backgroundShadow3")),
    Course(title: "Design Course", image: "Illustration2", color: Color("background4"), shadowColor: Color("backgroundShadow4"))
]

var courses = coursesData

Key Improvements: #

• Clearer State Tracking: Using an optional Course variable makes it explicit which course triggered the modal, eliminating confusion from shared boolean states.
• Cleaner Sheet Implementation: Only one sheet instance exists, attached to the parent view, which is more efficient than attaching a sheet to every course view.
• Data Passing: You can now use the selected course's details to customize ContentView (like showing the course title or image), which adds meaningful functionality.

If you don't need to pass course data to ContentView, simplify the sheet code to:

.sheet(item: $selectedCourse) { _ in
    ContentView()
}

And remove the selectedCourse parameter from ContentView.

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