Having issues with "Form" and either putting it with VStack or HStack

Im trying to add a rate button as well as a review section in the landmarks swift ui tutorial but when i put the "RatingForm" into the Landmark detail page it shows in a tiny section that i separately have to scroll. Please note im extremely new and am learning any assistance is appreciated.

The images show what it looks like i can put the code in to LandmarkDetail:

import SwiftUI

struct LandmarkDetail: View {

    @EnvironmentObject var landmarksVM: LandmarksViewModel

    var landmark: Landmark

    

    var landmarkIndex: Int{

       landmarksVM.landmarks.firstIndex(where:{ $0.id == landmark.id})!

    }//var landmarkIndex

    

    @Binding var rating: Int

    @State private var review: String = ""

    

    var body: some View {

        ScrollView{

            MapView(coordinate: landmark.locationCoordinate)

                .frame(height: 300)

                .ignoresSafeArea(edges: .top)

            

            CircleImage(image: landmark.image)

                .offset(y:-130)

                .padding(.bottom, -130)

            

            

        VStack (alignment: .leading) {

            HStack{

                Text(landmark.name)

                    .font(.title)

                    .foregroundColor(.green)

            FavoriteButton(isSet:

                            $landmarksVM.landmarks[landmarkIndex].isFavorite)

            }//Hstack

            HStack {

                Text (landmark.city)

                    .foregroundColor(.blue)

                Spacer()

                Text(landmark.state)

                }//Hstack

            .font(.subheadline)

            .foregroundColor(.secondary)

            

            

            Divider()

            

            Text("About (landmark.name)")

                .font(.title3)

            Text(landmark.description)

            

            Divider()           

 ---->           HStack {

                    TextEditor(text: $review)

                    RatingForm(rating: $rating)

            Spacer()

                    

                }//hstack

            //VStack

        }//ScrollView

        .padding(.all)

            

        .navigationTitle(landmark.name)

        .navigationBarTitleDisplayMode(.inline)

        }//body

    }

}//view

   

struct LandmarkDetail_Previews: PreviewProvider {

    static var previews: some View {

        LandmarkDetail(playground: LandmarksViewModel().landmarks[0], rating: .constant(4))

         

    }//var preview

}//previewprovider

Welcome to the forum.

We miss elements to test the code. Please provide the changes you made to the original project so that we can test.

Note that when you post code, you should use code formatter tool (<>) to make it more readable.

import SwiftUI
struct LandmarkDetail: View {
    @EnvironmentObject var landmarksVM: LandmarksViewModel
    var landmark: Landmark
    
    var landmarkIndex: Int{
       landmarksVM.landmarks.firstIndex(where:{ $0.id == landmark.id})!
    }//var landmarkIndex
    
    @Binding var rating: Int
    @State private var review: String = ""
    
    var body: some View {
        ScrollView{
            MapView(coordinate: landmark.locationCoordinate)
                .frame(height: 300)
                .ignoresSafeArea(edges: .top)
            
            CircleImage(image: landmark.image)
                .offset(y:-130)
                .padding(.bottom, -130)
            
            
        VStack (alignment: .leading) {
            HStack{
                Text(landmark.name)
                    .font(.title)
                    .foregroundColor(.green)
            FavoriteButton(isSet:
                            $landmarksVM.landmarks[landmarkIndex].isFavorite)
            }//Hstack
            HStack {
                Text (landmark.city)
                    .foregroundColor(.blue)
                Spacer()
                Text(landmark.state)
                }//Hstack
            .font(.subheadline)
            .foregroundColor(.secondary)
            
            
            Divider()
            
            Text("About (landmark.name)")
                .font(.title3)
            Text(landmark.description)
            
            Divider()
 ---->           HStack {
                    TextEditor(text: $review)
                    RatingForm(rating: $rating)
            Spacer()
                    
                }//hstack
            //VStack
        }//ScrollView
        .padding(.all)
            
        .navigationTitle(landmark.name)
        .navigationBarTitleDisplayMode(.inline)
        }//body
    }
}//view
   
struct LandmarkDetail_Previews: PreviewProvider {
    static var previews: some View {
        LandmarkDetail(playground: LandmarksViewModel().landmarks[0], rating: .constant(4))
         
    }//var preview
}//previewprovider

@Claude31 thank you so much for letting me know that was my mistake, i appreciate your guidance.

This is the Rating form Im trying to add to the LandmarkDetail that keeps showing up in a small corner with it looks like a spacer before it. im not sure how to fix the issue to so that the form is inline with the landmarks, but i want the review page on each of the landmarks. Thank you!




struct RatingForm: View {

    @Binding var rating: Int

    @State private var review: String = ""



    var label = ""



    var maximumRating = 5



    var offImage: Image?

    var onImage = Image(systemName: "star.fill")



    var offColor = Color.gray

    var onColor = Color.yellow

    

    var body: some View {

        Form {

        VStack {

            HStack {

                Text("How would you rate this Landmark")

            }//hstack

            HStack{

            

            if label.isEmpty == false {

                Text(label)

            }//if label

            ForEach(1..<maximumRating + 1, id: \.self) { number in

                image(for: number)

                    .foregroundColor(number > rating ? offColor : onColor)

                    .onTapGesture {

                        rating = number

                    }//tapgesture

            }//foreach

        }//hstack

           _HSpacer()

            

            HStack{

                Text("Add a review")

            }//hstack

            HStack{

               TextField ("Review the Landmark",

                          text: $review

                )

                .frame(

                    width: 300,

                    height: 50,

                    alignment: .center)

            }//hstack

        }//vstack

            Button(action: {

                

                print("Button tapped")

                

            }, label: {

                Text("Submit Review")

                    .frame(

                        width: 285,

                        height: 50,

                        alignment: .center)

                    .background(Color.pink)

                    .foregroundColor(.white)

                    .cornerRadius(8)

                

                        

        }//label

    )//button

        }//form

        

                   }//body

    func image(for number: Int) -> Image {

        if number > rating {

            return offImage ?? onImage

        } else {

            return onImage

        }//else

    }//func image

}



struct RatingForm_Previews: PreviewProvider {

    static var previews: some View {

        RatingForm(rating: .constant(4))

        

    }//static var

}//struct
Having issues with "Form" and either putting it with VStack or HStack
 
 
Q