为什么SwiftUI无法正确显示两个视图?

时间:2020-10-04 20:04:29

标签: swiftui ios14

基本上,“地图”视图需要固定在显示器的顶部。滚动视图将使圆形照片在地图上偏移,将其拉起时,整个滚动视图将覆盖地图视图。我以为这很容易实现,但是我忘了我正在处理一个不合逻辑的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 个答案:

答案 0 :(得分:0)

这是我想出的解决方案...它很杂乱并且有问题,但是那只是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@*/)
    }
}
}