Reputation: 14935
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.
I need to remove the space between the red views.
Upvotes: 2
Views: 4954
Reputation: 36304
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