mahan
mahan

Reputation: 14935

SwiftUI - remove space between TabView that has PageViewStyle

I have a TabView with 7 pages. Each one of the pages has 100 points less than the screen's width.

struct ContentView: View {
    var body: some View {
        GeometryReader { reader in
            VStack(alignment: .center) {
                TabView {
                    ForEach(0..<7) { index in
                        VStack {
                            
                        }
                        .frame( maxHeight: .infinity)
                        .frame(width: reader.size.width - 100)
                        .background(Color.red)
                        .cornerRadius(15)
                    }
                }
                .background(Color.yellow)
                .tabViewStyle(PageTabViewStyle(indexDisplayMode: .always))
                .frame(width: reader.size.width, height: 500)
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
        }
        
    }
}

TabView has as much as much width as the screen's width.

There are 50 points on both sides the Vstack's though each one of them has 100 points less than the screen width.

enter image description here

I need to remove the space between the red views.

enter image description here

Upvotes: 2

Views: 4954

Answers (1)

how about something different using a "ScrollView" and a "HStack", like this:

struct ContentView: View {
    var body: some View {
        GeometryReader { reader in
            ScrollView (.horizontal) {
                HStack (spacing: 0) {
                    ForEach(0..<7) { index in
                        VStack {
                            Text("\(index)")
                        }
                        .frame(maxHeight: .infinity)
                        .frame(minWidth: reader.size.width - 100)
                        .background(Color.red)
                        .cornerRadius(20)
                    }
                }.frame(maxWidth: .infinity, maxHeight: 500)
            }.frame(maxWidth: .infinity, maxHeight: .infinity)
        }
    }
}

EDIT2: using paging

struct ContentView: View {
    var body: some View {
        GeometryReader { reader in
            VStack(alignment: .center) {
                TabView {
                    ForEach(0..<7) { index in
                        VStack {
                            Text("\(index)")
                        }
                        .frame(maxHeight: .infinity)
                        .frame(width: reader.size.width)
                        .background(Color.red)
                        .cornerRadius(25)
                    }
                }
                .tabViewStyle(PageTabViewStyle(indexDisplayMode: .always))
                .frame(width: reader.size.width, height: 500)
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
        }
    }
}

Upvotes: 3

Related Questions