HomeiOS Developmentswift - Take away nook radius throughout push navigation transition in iOS...

swift – Take away nook radius throughout push navigation transition in iOS 26


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 the NavigationStack 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()
    }
}

Animation

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.

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -
Google search engine

Most Popular

Recent Comments