A clip form with rounded corners is being utilized throughout the transition. This could be effective if the element view can be full display, but it surely would not work properly when there may be different content material above the NavigationStack
.
I could not discover a option to disable or change the clip form. However here’s a workaround:
- Apply destructive prime padding to the
NavigationStack
, in order that it strikes up into the identical house because the placeholder on the prime. The padding must be at the least as giant because the nook radius you need to cover. - Add an opaque background to the placeholder and set a
zIndex
, in order that it stays in entrance of theNavigationStack
and hides it. - Add prime padding to the views contained in the
NavigationStack
, to stability out the destructive prime padding on the stack itself.
I additionally tried safeAreaPadding
and contentMargins
as a manner of shifting the highest of the views, however solely primary padding appeared to work.
A consequence of this strategy is that the again button for the element view can also be hidden on the prime. So a workaround right here is to cover the native again button and present your individual. The customized again button can name .dismiss
to return.
Right here is an elaborated instance to point out it working:
struct ContentView: View {
let unwantedCornerRadius: CGFloat = 50
var physique: some View {
VStack(spacing: 0) {
Textual content("Placeholder")
.padding()
.body(maxWidth: .infinity)
.background(.background)
.zIndex(1)
NavigationStack {
VStack {
NavigationLink(worth: true) {
Textual content("Go to DetailView")
}
}
.navigationDestination(for: Bool.self) { val in
DetailView()
.padding(.prime, unwantedCornerRadius)
}
.padding(.prime, unwantedCornerRadius)
}
.padding(.prime, -unwantedCornerRadius)
}
}
}
struct DetailView: View {
@Atmosphere(.dismiss) non-public var dismiss
var physique: some View {
Textual content("DetailView")
.body(maxWidth: .infinity, maxHeight: .infinity)
.overlay(alignment: .topLeading) { backButton }
.background(.yellow)
.navigationBarBackButtonHidden()
}
non-public var backButton: some View {
Button {
dismiss()
} label: {
Picture(systemName: "chevron.left")
.resizable()
.scaledToFit()
.padding(12)
.padding(.trailing, 3)
.body(width: 44, peak: 44)
.glassEffect(in: .circle)
}
.buttonStyle(.plain)
.padding()
}
}
Ps. By displaying a customized again button it additionally resolves one other difficulty, which was that the native again button was leaping on the finish of the transition. Your screenshot exhibits the again button simply earlier than it makes this leap. In order a workaround for this drawback, you might need ended up needing to switch the native again button anyway.