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