SwiftUI View 和 UIKit View 的 z-index

The z-index of SwiftUI View and UIKit View

SwiftUI 滚动视图隐藏了从 UIViewControllerRepresentable viewController 呈现的视图的某些区域 viewController。

SwiftUI 代码的一部分,GoogleMapsView 是 UIViewControllerRepresentable viewController。

struct ContentView: View {

var body: some View {
    ZStack(alignment: .top) {

        GoogleMapsView()

        VStack(alignment: .leading) {
            Text("Top Locations near you")

            ScrollView(.horizontal, showsIndicators: false) {
                HStack() {
                    ForEach(dataSource.topPlaces) { place in
                        PlaceCardView(placeImage: place.image, placeName: place.name, placeRating: place.rating, placeRatingTotal: place.ratingTotal, topPlace: place)
                    }
                }
                .padding(.horizontal, 10)
            }
            .background(Color.clear)
            .foregroundColor(.black)
            .frame(height: 200)
            .opacity(self.finishedFetching ? 1 : 0.1)
            .animation(.easeInOut(duration: 1.3))           
    }.edgesIgnoringSafeArea(.all)
}

我想放在顶部的视图来自 GoogleMapView(),我把它放在 ZStack 的 "bottom" 上,因为我希望滚动视图在地图上流动。然而,点击标记时地图上显示的视图被 SwiftUI ScrollView

掩盖了

我尝试更改它们的滚动视图的 zIndex、弹出视图的 zPosition 或 bringSubviewToFront 等。None 它们起作用了。

您需要通过绑定到 `` 来注入本地状态,并在弹出窗口中更改它 shown/hidden。

这是一些伪代码

struct ContentView: View {

@State private var isPopup = false

var body: some View {
    ZStack(alignment: .top) {

        GoogleMapsView(isPopup: $isPopup)

        VStack(alignment: .leading) {
            Text("Top Locations near you")

            if !isPopup {
               ScrollView(.horizontal, showsIndicators: false) {
                  // other code
               }
               // other code
            }
    }.edgesIgnoringSafeArea(.all)
}

struct GoogleMapsView : UIViewControllerRepresentable {
   @Binding isPopup: Bool

   // other code

   // make self.isPopup = true before popup and false after