Here’s a SwiftUI implementation of a recipe detail view using stacks and scroll views to arrange the image, ingredients list, and cooking instructions, along with explanations:

import SwiftUI

struct RecipeDetailView: View {
    let recipe: Recipe // Your Recipe data model

    var body: some View {
        ScrollView { // Make the entire view scrollable
            VStack(alignment: .leading) { // Main container
                recipe.image
                    .resizable()
                    .scaledToFit()
                    .frame(height: 200)

                VStack(alignment: .leading, spacing: 10) {
                    Text(recipe.name)
                        .font(.title)
                        .fontWeight(.bold)

                    HStack {
                        Image(systemName: "clock.fill")
                        Text("\(recipe.prepTime) mins")
                    }
                    .font(.caption)
                    .foregroundColor(.gray)

                    Text("Ingredients")
                        .font(.headline)

                    ForEach(recipe.ingredients, id: \.self) { ingredient in
                        Text("• \(ingredient)")
                    }

                    Text("Instructions")
                        .font(.headline)
                        .padding(.top, 10)

                    ForEach(recipe.instructions.indices, id: \.self) { index in
                        HStack {
                            Text("\(index + 1).")
                                .frame(width: 25, alignment: .trailing)
                            Text(recipe.instructions[index])
                        }
                    }
                }
                .padding()
            }
        }
        .navigationTitle(recipe.name) // Optional navigation title
    }
}

// Sample Recipe Data Model (Replace with your own)
struct Recipe: Identifiable {
    let id = UUID()
    let name: String
    let image: Image
    let prepTime: Int
    let ingredients: [String]
    let instructions: [String]
}

// Example Usage
struct ContentView: View {
    let recipe = Recipe(
        name: "Spaghetti Carbonara",
        image: Image("spaghetti"), // Replace with your image name
        prepTime: 30,
        ingredients: ["Spaghetti", "Eggs", "Pancetta", "Parmesan Cheese", "Black Pepper"],
        instructions: [
            "Cook spaghetti according to package directions.",
            "Whisk eggs, parmesan cheese, and black pepper together.",
            "Fry pancetta until crispy.",
            "Combine spaghetti, egg mixture, and pancetta. Toss to coat."
        ]
    )

    var body: some View {
        RecipeDetailView(recipe: recipe)
    }
}

Explanation:

1. RecipeDetailView:
   • It takes a Recipe struct as input (you’ll need to create this struct yourself).
   • The main ScrollView allows the entire view to scroll if the content is too long.
   • The nested VStack arranges the image, title, details, ingredients, and instructions vertically.
2. Image:
   • recipe.image is displayed at the top, resized to fit.
3. Title and Details:
   • recipe.name is displayed as the title.
   • An HStack shows the prep time icon and text.
4. Ingredients:
   • “Ingredients” is displayed as a header.
   • ForEach iterates over the recipe.ingredients array and displays each ingredient with a bullet point.
5. Instructions:
   • “Instructions” is displayed as a header.
   • ForEach iterates over the recipe.instructions array and displays each instruction with a numbered step.
6. Padding:
   • Padding is added around the content for better visual appearance.
7. Navigation Title (Optional):
   • Sets the navigation title to the recipe name if you are using this view within a NavigationView.

Key Improvements:

• Clear Structure: Uses VStack and ScrollView to create a well-organized and scrollable layout.
• Image Handling: The recipe image is resized and displayed at the top.
• List Styling: Ingredients and instructions are displayed as lists with appropriate styling.
• Scrollable Content: ScrollView handles long recipe content.
• Customizable: Easily adapt the Recipe data model and the view to fit your specific recipe data and design preferences.