Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Disable to Change Page On Swipe of Tab View in SwiftUI

I am using Tab View in my SwiftUI app. I want the changing of page disabled, while swiping left or right. And I had achieved it from this. This works fine but the issue I am facing is I have a button on the bottom of every view, and when I try to swipe from the button, it is swiping left right. I want to disable it too but don't know how to do it. Here is my code:

struct TabViewTesting: View {
    
    @State var tabSelection = 0
    
    var body: some View {
       
        TabView(selection: $tabSelection) {
            
            firstView().tag(0).contentShape(Rectangle()).gesture(DragGesture())
            
            secondView().tag(1).contentShape(Rectangle()).gesture(DragGesture())
            
            thirdView().tag(2).contentShape(Rectangle()).gesture(DragGesture())
            
        }.tabViewStyle(.page(indexDisplayMode: .never))
    }
}

And this is the code for the Views:

extension TabViewTesting {
    
    func firstView() -> some View {
      
        VStack {
            Text("First screen")
            
            Spacer()
            
            Button {
                self.tabSelection = 1
            } label: {
                ZStack {
                    RoundedRectangle(cornerRadius: 20)
                        .frame(height: 50)

                    Text("move to 2nd view")
                        .foregroundColor(.white)
                }
            }.padding()

        }.background(.green)
    }
    
    func secondView() -> some View {
      
        VStack {
            Text("second screen")
            
            Spacer()
            
            Button {
                self.tabSelection = 2
            } label: {
                ZStack {
                    RoundedRectangle(cornerRadius: 20)
                        .frame(height: 50)
                    
                    Text("move to 3rd view")
                        .foregroundColor(.white)
                }
            }.padding()

        }.background(.red)
    }
    
    func thirdView() -> some View {
      
        VStack {
            Text("Third screen")
            
            Spacer()
            
            Button {
                self.tabSelection = 0
            } label: {
                ZStack {
                    RoundedRectangle(cornerRadius: 20)
                        .frame(height: 50)
                    
                    Text("move to first view")
                        .foregroundColor(.white)
                }
            }.padding()

        }.background(.yellow)
    }
}

And this is what happening:

simulator

like image 360
Taimoor Arif Avatar asked Nov 01 '25 12:11

Taimoor Arif


1 Answers

I actually found an answer in the comments of this question.

The issue is: any view that has an onTapGesture will ignore .gesture(DragGesture()).

The solution is to use .simultaneousGesture(DragGesture()) instead to ensure the gesture is capture and handled by both view/modifier.

It worked perfectly in my case after changing it. The only exception is for 2 finger drag gesture.

like image 69
Slamit Avatar answered Nov 04 '25 07:11

Slamit



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!