SwiftUI TabView Pagination where tabItem overlap the middle tabitem view?

Question

I am trying to create a TabView with pagination where the middle view is always overlapped when swiping to the next view, left or right. Not exactly sure if this is possible with SwiftUI?

struct ContentView: View {
@State private var selection = 0

var body: some View {
    ZStack {
        TabView(selection: $selection) {
            Text("Left View")
                .tabItem {
                    Image(systemName: "1.icon")
                    Text("Left")
                }
                .tag(0)
            // Middle View should always be overlapped
            Text("Middle View")
                .tabItem {
                    Image(systemName: "2.icon")
                    Text("Middle View")
                }
                .tag(1)
            Text("Right View")
                .tabItem {
                    Image(systemName: "3.icon")
                    Text("Right")
                }
                .tag(2)
        }
        .tabViewStyle(PageTabViewStyle())
    }
}

}

Answer 1

You could try this approach ...to create a TabView with pagination where the middle view is always overlapped when swiping to the next view, left or right.

struct ContentView: View {
    @State private var selection = 0
    
    var body: some View {
        ZStack {

            // -- here
            Text("Middle View").foregroundColor(.red)
                  .offset(x: 0, y: -40) // <-- adjust as needed

            TabView(selection: $selection) {
                Text("Left View")
                    .tabItem {
                        Image(systemName: "1.circle")
                        Text("Left")
                    }
                    .tag(0)
                // Middle View should always be overlapped
                Text("Middle View")
                    .tabItem {
                        Image(systemName: "2.circle")
                        Text("Middle View")
                    }
                    .tag(1)
                Text("Right View")
                    .tabItem {
                        Image(systemName: "3.circle")
                        Text("Right")
                    }
                    .tag(2)
            }
            .tabViewStyle(PageTabViewStyle())
        }
    }
    
}

And if desired, you can remove the Text("Middle View").tabItem{...} from the TabView.