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

Posted 2023-02-24

【中文标题】为啥 SwiftUI 不能正确显示两个视图？

【英文标题】：Why will SwiftUI not display both views correctly?为什么 SwiftUI 不能正确显示两个视图？

【发布时间】：2020-10-04 20:04:29

【问题描述】：

本质上，地图视图需要固定在显示屏的顶部。滚动视图将在地图上具有圆形照片偏移，当拉起整个滚动视图将覆盖地图视图。我认为这很容易实现，但我忘记了我正在处理一个不合逻辑的 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 

【参考方案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@*/)