为什么 SwiftUI 不能正确显示两个视图？

Question

本质上，地图视图需要固定在显示屏的顶部。滚动视图将在地图上具有圆形照片偏移，当拉起整个滚动视图将覆盖地图视图。我认为这很容易实现，但我忘记了我正在处理一个不合逻辑的 SwiftUI。关于这是否可以实现的任何想法？如果它需要几何阅读器或任何其他船代码，那么它不值得编写或维护。

import SwiftUI
import MapKit

struct ImNew: View {
@Environment(\.openURL) var openURL
@State private var region = MKCoordinateRegion(
        center: CLLocationCoordinate2D(
            latitude: 35.42,
            longitude: -106.24
        ),
        span: MKCoordinateSpan(
            latitudeDelta: 0.002,
            longitudeDelta: 0.002
        )
    )
var body: some View {
    ScrollView {
    Image("image")
        .resizable()
        .frame(width: 300, height: 300)
        .offset(y: -130)
        .padding(.bottom, -130)
        .shadow(radius: /*@START_MENU_TOKEN@*/10/*@END_MENU_TOKEN@*/)

    VStack(alignment: .leading) {
        Text("title")
            .font(.title)

        HStack(alignment: .top) {
            Text("subtitle")
                .font(.caption)
            Spacer()
            Button(action: {
                openURL(URL(string: "https://maps.apple.com/?address=")!)
            }){
            Text(" Get Directions ")
                .font(.subheadline)}
            .overlay(
                        RoundedRectangle(cornerRadius: 5)
                            .stroke(Color.purple, lineWidth: 1)
                    )
        }

        HStack{
            Spacer()
            Text(" filler ")
                .font(.headline)
                .fontWeight(.bold)
                .padding(.top, 30.0)
            Spacer()
        }
        
        HStack{
            Spacer()
            Text(" filler2 ")
                .font(.caption)
                .foregroundColor(Color.gray)
            Spacer()
        }
        
    }
    .padding()

    Spacer()
    }
    
        VStack {
        Map(coordinateRegion: $region)
            .edgesIgnoringSafeArea(.top)
                            .frame(height: 300)
            
        ScrollView {
        Spacer()
        }

    
    }

}
}

更新：

我能够实现我想要的效果......如何让滚动视图填满屏幕？

    var body: some View {

    VStack {
    Map(coordinateRegion: $region)
        .edgesIgnoringSafeArea(.top)
        .frame(height: 300)
            .frame(height: UIScreen.main.bounds.height * 0.2)
            //Image Logo Done

    ZStack{
    ScrollView {

Answer 1

这是我想出的解决方案……它很乱而且有问题，但这只是 SwiftUI。

import SwiftUI
import MapKit

struct ImNew: View {
@Environment(\.openURL) var openURL
@State private var region = MKCoordinateRegion(
        center: CLLocationCoordinate2D(
            latitude: 38,
            longitude: -109
        ),
        span: MKCoordinateSpan(
            latitudeDelta: 0.002,
            longitudeDelta: 0.002
        )
    )
var body: some View {

    VStack {
    Map(coordinateRegion: $region)
        .edgesIgnoringSafeArea(.top)
        .frame(height: 300)
            .frame(height: UIScreen.main.bounds.height * 0.2)
            //Image Logo Done

    ZStack{
    ScrollView {
        
        Image("BackgroundImage")
            .resizable()
            .frame(width: .infinity, height: 300)
            .offset(y: 575)
        
    Image("imnewcircle")
        .resizable()
        .frame(width: 300, height: 300)
        .shadow(radius: /*@START_MENU_TOKEN@*/10/*@END_MENU_TOKEN@*/)
        .offset(y: 100)
        
    VStack(alignment: .leading) {
        Text("title")
            .font(.title)
            

        HStack(alignment: .top) {
            Text("subtitle")
                .font(.caption)
            Spacer()
            Button(action: {
                openURL(URL(string: "https://maps.apple.com/?")!)
            }){
            Text(" Get Directions ")
                .font(.subheadline)}
            .overlay(
                        RoundedRectangle(cornerRadius: 5)
                            .stroke(Color.purple, lineWidth: 1)
                    )
        }
        .padding(.top, 5)
        
        HStack{
            Spacer()
            Text(" tile1 ")
                .font(.headline)
                .fontWeight(.bold)
                .padding(.top, 30.0)
            Spacer()
        }
        
        HStack{
            Spacer()
            Text(" tile2 ")
                .font(.caption)
                .padding(.top, 30.0)
                .foregroundColor(Color.gray)
            Spacer()
        }
        
    }.padding(.horizontal)
    .background(Color("Background"))        .offset(y: 100)

    }
    .padding(.all, 1.0)

    Spacer()
        
    }
    .padding(.top, -500.0)
    .frame(alignment: .topLeading)
    .padding(/*@START_MENU_TOKEN@*/.horizontal/*@END_MENU_TOKEN@*/)
    }
}
}