Applying Corner Radius to NavigationStack: Restricted Interaction Areas

34 views Asked by At

I tried to set a cornerRadius for the NavigationStack, but it caused the touch area to be limited to the original view position. To put it simply, when the slider is closed, tapping it won't open it. The ControllerView manages the animation. I could not use the approach for two changing view (Gray/Orange). The cornerRadius might clip or mask the content, leading to unresponsive touch areas. Are there any methods to prevent this issue?

import SwiftUI

private struct ControllerView<Content: View>: View {
    private var content: Content
    @Binding var isOpen: Bool
    
    
    init(isOpen: Binding<Bool>, @ViewBuilder content: () -> Content) {
        self._isOpen = isOpen
        self.content = content()
    }
    
    var body: some View {
        ZStack {
            content
                .cornerRadius(30)
                .offset(x: isOpen ? 300 : 0)
        }
        .ignoresSafeArea()
    }
}

private struct MenuView: View {
    @Binding var isGrayView: Bool
    
    var body: some View {
        ZStack {
            Button {
                isGrayView.toggle()
                print("change View!")
            } label: {
                Text("change view")
            }
        }
    }
}

private struct OrangeView: View {
    @Binding var isOpen: Bool
    @Binding var navigation : [AnyHashable]
    
    var body: some View {
        NavigationStack(path: $navigation) {
            ZStack {
                Color.orange.ignoresSafeArea()
                Button {
                    isOpen.toggle()
                    print("orange tapped!")
                } label: {
                    Text("open/close")
                }
                .rotationEffect(.degrees(90))
                .frame(maxWidth: .infinity, alignment: .leading)
                
            }
        }
    }
}

private struct GrayView: View {
    @Binding var isOpen: Bool
    @Binding var navigation : [AnyHashable]
    
    var body: some View {
        NavigationStack(path: $navigation) {
            ZStack {
                Color.gray.ignoresSafeArea()
              
                Button {
                    isOpen.toggle()
                    print("Grey tapped!")
                } label: {
                    Text("open/close")
                }
                .rotationEffect(.degrees(90))
                .frame(maxWidth: .infinity, alignment: .leading)
            }
        }
    }
}


struct SwiftUIView14: View {
    @State private var isOpen = true
    @State private var isGrayView = true
    
    var body: some View {
        ZStack {
            MenuView(isGrayView: $isGrayView)
            
            ControllerView(isOpen: $isOpen) {
                if isGrayView {
                    GrayView(isOpen: $isOpen, navigation: .constant([]))
                } else {
                    OrangeView(isOpen: $isOpen, navigation: .constant([]))
                }
            }
        }
    }
}


#Preview {
    SwiftUIView14()
}
0

There are 0 answers