如何将按钮/视图放在SwiftUI地图的顶部?
我找不到一个方法来让我的按钮视图(只是一个按钮)在地图上,所以我可以点击它。 在另一个更复杂的设置中,按钮不知何故出现在顶部,我可以点击它,但这是运气而不是设计。如何在地图上查看我的按钮,以便我可以点击它 注意,我认为问题可能是我的buttonView“在”某个贴图层下,因此贴图捕获了点击事件,而没有将它们传递给buttonView Xcode 12 beta-3,MacCatalina,目标ios 14如何将按钮/视图放在SwiftUI地图的顶部?,swiftui,mapkit,Swiftui,Mapkit,我找不到一个方法来让我的按钮视图(只是一个按钮)在地图上,所以我可以点击它。 在另一个更复杂的设置中,按钮不知何故出现在顶部,我可以点击它,但这是运气而不是设计。如何在地图上查看我的按钮,以便我可以点击它 注意,我认为问题可能是我的buttonView“在”某个贴图层下,因此贴图捕获了点击事件,而没有将它们传递给buttonView Xcode 12 beta-3,MacCatalina,目标ios 14 import Foundation import SwiftUI import MapKi
import Foundation
import SwiftUI
import MapKit
import CoreLocation
@main
struct TestMapApp: App {
var body: some Scene {
WindowGroup {
MapViewer()
}
}
}
struct MapViewer: View {
@State var cityAnno = [CityMapLocation(title: "Tokyo", subtitle: "Japan", lat: 35.685, lon: 139.7514)]
@State var region = MKCoordinateRegion(center: CLLocationCoordinate2D(latitude: 35.685, longitude: 139.7514),span: MKCoordinateSpan(latitudeDelta: 1.0, longitudeDelta: 1.0))
var body: some View {
Map(coordinateRegion: $region, annotationItems: cityAnno) { city in
MapAnnotation(coordinate: city.coordinate) {
buttonView(cityName: city.title!)
// tried this, does not work
// Image(systemName:"dot.circle.and.cursorarrow").foregroundColor(.white).scaleEffect(2.2)
// .onTapGesture { print("----> onTapGesture") }
}
}
}
func buttonView(cityName: String) -> some View {
Button(action: {print("----> buttonView action")}) {
VStack {
Text(cityName)
Image(systemName: "dot.circle.and.cursorarrow")
}.foregroundColor(.red).scaleEffect(1.2)
}.frame(width: 111, height: 111)
// tried combinations of these, without success
// .background(Color.gray).opacity(0.8)
// .border(Color.white)
// .contentShape(Rectangle())
// .clipShape(Rectangle())
// .zIndex(1)
// .buttonStyle(PlainButtonStyle())
// .layoutPriority(1)
// .allowsHitTesting(true)
// .onTapGesture {
// print("----> onTapGesture")
// }
}
}
class CityMapLocation: NSObject, MKAnnotation, Identifiable {
var id = UUID().uuidString
var title: String?
var subtitle: String?
dynamic var coordinate: CLLocationCoordinate2D
init(title: String?, subtitle: String?, lat: Double, lon: Double) {
self.id = UUID().uuidString
self.title = title
self.subtitle = subtitle
self.coordinate = CLLocationCoordinate2D(latitude: lat, longitude: lon)
}
}
只需用ZStack包裹:
ZStack {
Map(coordinateRegion: $region, annotationItems: cityAnno){...}
Button(action: {print("----> buttonView action")}) {...}
}
只需用ZStack包裹:
ZStack {
Map(coordinateRegion: $region, annotationItems: cityAnno){...}
Button(action: {print("----> buttonView action")}) {...}
}
你可以在Vstack上得到ontapsignature。替换MapViewer主体,尝试使用下面的代码
var body: some View {
Map(coordinateRegion: $region, annotationItems: cityAnno) { city in
MapAnnotation(coordinate: city.coordinate) {
VStack {
Text(city.title ?? "")
Image(systemName: "dot.circle.and.cursorarrow")
}
.foregroundColor(.red).scaleEffect(1.2)
.frame(width: 111, height: 111)
.onTapGesture {
print("Clicked")
}
}
}
}
你可以在Vstack上得到ontapsignature。替换MapViewer主体,尝试使用下面的代码
var body: some View {
Map(coordinateRegion: $region, annotationItems: cityAnno) { city in
MapAnnotation(coordinate: city.coordinate) {
VStack {
Text(city.title ?? "")
Image(systemName: "dot.circle.and.cursorarrow")
}
.foregroundColor(.red).scaleEffect(1.2)
.frame(width: 111, height: 111)
.onTapGesture {
print("Clicked")
}
}
}
}
谢谢大家的回答。似乎仅仅使用Xcode 12.5 beta版、iOS 14.3版和macOS 11.3版就能解决这个问题。谢谢大家的回答。似乎仅仅使用Xcode 12.5测试版、iOS 14.3和macOS 11.3就可以解决这个问题。