NavigationSplitView detail view with safearea

Hi,

I have a NavigationSplitView with a view in the detail section:

                NavigationSplitView {
                    ZStack {
                        Color.black.ignoresSafeArea()
                        gradientBlack2Blue.opacity(0.25)
                                          .ignoresSafeArea()
                      GeometryReader { p in
                        VStack {
                            List {
                                 SidebarViewCell(id: "1",
                                                 text: "Steuersätze" ,
                                                 type: .TAX_MASTERDATA ,
                                                 selectedMasterdataType: $selectedMasterdataType)
                            }.listRowSpacing(size.height * 1.25 / 100 )
                              .scrollContentBackground(.hidden)
                              .toolbar(.hidden, for: .navigationBar)
                              .frame(width: p.size.width * 98 / 100 , height: p.size.height, 
alignment: .topLeading).  
                       }alignment: .topLeading)
                    }
                   }
                }
              detail: {
                      MasterdataDetailView().ignoresSafeArea()
                  }
              }.navigationSplitViewStyle(.balanced)

When I place a Button-Control in the MasterdataDetailView it cannot be clicked because it is in the safe area. How can I make it clickable?

Best Regards,

Frank

Would safeAreaInset, applied to the button you want to be tappable, help? (I have not dealt a lot with safe areas so I am guessing.)

How to inset the safe area with custom content: https://www.hackingwithswift.com/quick-start/swiftui/how-to-inset-the-safe-area-with-custom-content

To make a button in the MasterdataDetailView clickable, you can try adjusting its frame or alignment to ensure it's not within the safe area. You can also use the .contentShape() modifier to extend the clickable area of the button. Here's an example of how you can modify your code:

Assuming you have a Button in your MasterdataDetailView, you can modify it like this:

MasterdataDetailView().ignoresSafeArea().contentShape(Rectangle())

By applying the .contentShape(Rectangle()) modifier, you are extending the clickable area of the button to the entire view, making it accessible even if it's within the safe area.

If the button is still not clickable, you might need to adjust the frame or alignment of the MasterdataDetailView or its containing views to ensure that it's not obscured by the safe area. Make sure that the button is fully visible and not partially hidden within the safe area of the screen.

Hi!

Here is a screenshot to show the situation. The green button with the "+"-Symbol is in the safe area of the Detail-Part of the splitview navigation. I have no idea why there is a safe area there. If I move the button down a certain amount of points it is clickable, but then it is too close to the top it is not clickable.

MasterdataDetailView().ignoresSafeArea().contentShape(Rectangle())

Didn't work.

I've built a very rudimentary version of the NavigationSplitView with a button in the safe area of detail section. And it cannot be clicked - this is only when used in a NavigationSplitView.

When I use the right, yellow view with the green button (TestView) directly like this:

TestView().ignoreSafeArea() the button is at the upper edge of the screen and is clickable.

I understand that you're still facing issues with the green button not being clickable, even after using .contentShape(Rectangle()). It seems like the safe area is causing some constraints on the button's clickability.

To address this, you can try adjusting the frame of your MasterdataDetailView to make sure the button is not within the safe area. Here's an example of how you can do this:

MasterdataDetailView()
    .frame(maxWidth: .infinity, maxHeight: .infinity)

By setting the frame to use the full available width and height (maxWidth: .infinity, maxHeight: .infinity), you ensure that the button is positioned outside the safe area, making it clickable.

If this still doesn't resolve the issue, you may need to inspect the layout of your MasterdataDetailView and its parent views to identify any conflicting constraints or safe area insets that might be affecting the button's clickability.

This is the code which produces the following screen:

struct NavTestView: View {
    
    var body: some View {
        GeometryReader { p in
            VStack(spacing: 0) {
                NavigationSplitView {
                    List(names) {
                        Text($0.name).frame(width: p.size.width)
                            .background(Color.green)
                    }.listRowSpacing(p.size.height * 0.15 / 100 )
                    
                        .toolbar(.hidden, for: .navigationBar)
                } detail: {
                    TestView().ignoresSafeArea()
                }.frame(width: p.size.width, height: p.size.height, alignment: .topLeading)
                    .background(Color.yellow)
            }
        }
    }
}


struct TestView: View {
    
    var body: some View {
        GeometryReader { p in
            let plusButton = IconButton(imageName: "plus.circle.fill", color: Color(uiColor: ThemeColor.SeaFoam.color),
                                        imageWidth: p.size.width * 5 / 100, buttonWidth: p.size.width * 5 / 100)
            let regularAddButton = Button(action: {  log.info("| Regular Add Button pressed") } ) {
                plusButton
            }
                
            VStack {
                regularAddButton
            }.frame(width: p.size.width , height: p.size.height, alignment: .top)
             .background(Color.yellow)
        }
    }
}

I don't understand why there is a safearea in the yellow detail view. If I remove the.ignoreSafeArea() the button slips down a bit and is clickable.

I guess this is a special thing with the NavigationSplitView

So this seems a mystery no one has an approach to how to solve it.

NavigationSplitView detail view with safearea
 
 
Q