如何在SwiftUI中将图像置于颜色视图的顶部

我有一个图像需要放在我视图的顶部中间。我怎样才能做到

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()
     }
 }

---

但我的观点是这样的。如何将图像移动到页面顶部中间的黑色位置？

您试图在代码中执行的操作有些混乱，但我认为这可能会让您开始。我制作了一个延伸到屏幕边缘的背景层，然后在上面放了一个内容层，你可以把图像放在VStack的顶部

您应该尽可能避免在SwiftUI中设置精确的宽度/高度/CGPoints

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()
        
    }
}

---

这里是一个可能的布局演示。使用Xcode 12.1/iOS 14.1编写

---

我怎么能让顶部像我的照片显示的那样是黑色的？你可以自己改变背景色。您还可以根据需要向（1）图像或（2）VStack添加帧/背景。太棒了！不知道叠加是我可以设置的设置！谢谢

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)
    }
}