Background should not be scrollable on ScrollView SwiftUI

71 views Asked by At

I have a ScrollView that lies on top of a Map. This ScrollView contains Views (with edit buttons and so on) that are expandable.

When the view is expanded I cannot click on items on the map that are behind the transparent bar that lies under the edit buttons.

Do you know a simple way of how to make that part of ScrollView "not scrollable" so I can click on items on the map?

enter image description here

Reproducible Code:

    import MapKit
import SwiftUI

struct Item {
    var expanded: Bool = false
}

struct ContentView: View {
    @State var position: MapCameraPosition = .region(MKCoordinateRegion(center: CLLocationCoordinate2D(latitude: 37.445346, longitude: -122.105653), span: MKCoordinateSpan(latitudeDelta: 0.15, longitudeDelta: 0.15)))

    var body: some View {
        ZStack {
            Map(position: $position) {
            }
            .overlay {
                NewRoutePanel()
            }
        }
    }
}

#Preview {
    ContentView()
}

struct NewRoutePanel: View {
    @State var itemArray: [Item] = [Item(), Item(), Item(), Item(), Item(), Item()]
    var body: some View {
        VStack {
            ZStack {
                Rectangle()
                    .foregroundColor(Color(.blue))
                    .frame(width: UIScreen.main.bounds.width, height: 75)

                ScrollView(.horizontal) {
                    HStack {
                        ForEach(itemArray.indices, id: \.self) { idx in
                            SingleItemView(item: $itemArray[idx])
                        }
                    }
                }
                .padding()
            }
            .frame(width: UIScreen.main.bounds.width)
            Spacer().frame(minHeight: 600)
        }
    }
}

struct SingleItemView: View {
    @Binding var item: Item
    var body: some View {
        VStack {
            NormalButton(image: "person") {
                item.expanded.toggle()
            }

            if item.expanded {
                NormalButton(image: "house") {}
                NormalButton(image: "house") {}
                NormalButton(image: "house") {}
            }
        }
    }
}

struct NormalButton: View {
    let image: String
    let expanding: () -> Void?
    var body: some View {
        Button {
            expanding()

        } label: {
            Image(systemName: image)
        }.frame(width: 40, height: 40)
            .foregroundStyle(.white)
            .background(.gray)
            .cornerRadius(40 / 2)
            .shadow(radius: 5)
    }
}
0

There are 0 answers