2

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

mahan
  • 12,366
  • 5
  • 48
  • 83

1 Answers1

3

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)
        }
    }
}
workingdog support Ukraine
  • 26,280
  • 4
  • 27
  • 37
  • 1
    I need to have paging enabled. Therefore, I am using TabView with PageViewStyle. – mahan Aug 25 '21 at 11:05
  • I've updated my answer. The edit shows one page at a time. You are saying this is not what you want? You want more than one "card" on one page? My test show exactly what your second picture shows. – workingdog support Ukraine Aug 25 '21 at 11:29
  • @workingdogsupportUkraine Yeah, the goal is to have multiple `TabView` elements visible at the same time – joshuakcockrell Dec 06 '22 at 02:02
  • I need to display the current element left aligned and display the next element partially - with paging behaviour - how to achieve that? – Gergely Kovacs Jul 26 '23 at 05:58