How to put an Image on top of a Color View in SwiftUI

Question

I have an image that needs to be put in the top center of my view. How can I do so?

struct MyTextField: View
{
   @ObservedObject var model: TextFieldModel

  var body: some View
   {
    VStack(alignment: .leading, spacing: -60)
    {
        Color.black.position(CGPoint(x: 200, y: -50)).frame(width: 417, height: 120, 
              alignment: .top)
            .background(Image(("appIconLogo")).resizable().frame(width: 50, height: 50))
        //Spacer(minLength: 5)
     
        VStack(alignment: .leading, spacing: 30)
        {
            Text("Welcome!")
                .font(.system(size: 60, design: .rounded))
                .foregroundColor(.black)
        
            iTextField("Search Your Ticker", text: $model.text, isEditing: $model.isEditing)
                .foregroundColor(.black)
                .showsClearButton(true)
                .onReturn
                {
                    print($model.text)
                    NotificationCenter.default.post(name: Notification.Name(rawValue: 
                    "isValidTicker"), object: nil)
                    
                }
                .foregroundColor(.black)
                .style(height: 58, font: nil, paddingLeading: 25, cornerRadius: 6, 
                hasShadow: true, image: Image(systemName: "magnifyingglass"))
                .foregroundColor(.black)
           }
        }
       .position(CGPoint(x: 200.0, y: 150.0))
       .padding()
     }
 }

But my View looks like this. How can I move my image to the top center of the page where the black color is?

Answer 1

Here is a demo of possible layout. Prepared with Xcode 12.1 / iOS 14.1.

struct MyTextField: View
{
    var body: some View
    {
        VStack {
            Color.black
                .frame(height: 120)
                .overlay(Image(("plant")).resizable().frame(width: 50, height: 50))
                .edgesIgnoringSafeArea(.top)
            
            VStack(alignment: .leading, spacing: 30)
            {
                Text("Welcome!")
                    .font(.system(size: 60, design: .rounded))
                    .foregroundColor(.black)
                    .padding(.leading)

                // .. other code
                
            }.frame(maxWidth: .infinity, alignment: .leading)
        }.frame(maxHeight: .infinity, alignment: .top)
    }
}

Answer 2

It's a little confusing what you are trying to do in your code, but I think this might get you started. I made a background layer that extends to the edge of the screen, and then put a Content layer on top of it, where you can put the Image at the top of the VStack.

You should try to avoid setting exact width/height/CGPoints whenever possible in SwiftUI.

var body: some View {
    ZStack {
        
        // Background
        Color.white
            .edgesIgnoringSafeArea(.all)
        
        // Content
        VStack(spacing: 20) {
            Image(systemName: "heart.fill") // Image here
                
            Text("Welcome!") // Title
                .font(.system(size: 60, design: .rounded))
                .frame(maxWidth: .infinity, alignment: .leading)
                .foregroundColor(.black)

            TextField("Search your ticker", text: $textFieldText) // Textfield
                .frame(height: 50)
                .background(Color.gray)
                .cornerRadius(10)
            
            Spacer()
        }
        .padding()
        
    }
}