Swiftui tabview layout issue - swiftui

Question

I have tried to have a layout like the following screen shots. Basically a long vertical scrolling view, with a number of round corner panes.
My code as follows:
struct DetailView: View {
#EnvironmentObject var modelData: ModelData
var body: some View {
ZStack {
Image("Dummy")
.resizable()
.aspectRatio(contentMode: .fill)
.opacity(0.2)
.frame(width: .infinity, height: .infinity)
.edgesIgnoringSafeArea(.all)
ScrollView(.vertical, showsIndicators: false) {
VStack(alignment: .leading, spacing: 0) {
TabView {
VStack(alignment: .leading, spacing:0) {
HStack {
Text("A long Text title").font(.title)
Spacer()
}.frame(width:UIScreen.main.bounds.size.width*0.9)
HStack {
Text("A long Text title").font(.title)
Spacer()
}.frame(width:UIScreen.main.bounds.size.width*0.9)
HStack {
Text("A long Text title").font(.title)
Spacer()
}.frame(width:UIScreen.main.bounds.size.width*0.9)
HStack {
Text("A long Text title").font(.title)
Spacer()
}.frame(width:UIScreen.main.bounds.size.width*0.9)
}
}.tabViewStyle(PageTabViewStyle())
.background(Color.green)
TabView {
ImageView()
.frame(width:UIScreen.main.bounds.size.width*0.9)
.cornerRadius(UIConstants.cardCornerRadius)
ImageView()
.frame(width:UIScreen.main.bounds.size.width*0.9)
.cornerRadius(UIConstants.cardCornerRadius)
ImageView()
.frame(width:UIScreen.main.bounds.size.width*0.9)
.cornerRadius(UIConstants.cardCornerRadius)
}
.tabViewStyle(PageTabViewStyle())
.indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: .always))
.background(Color.red)
TabView {
TextInfoView()
.frame(width:UIScreen.main.bounds.size.width*0.9)
.cornerRadius(UIConstants.cardCornerRadius)
.padding([.horizontal])
}.tabViewStyle(PageTabViewStyle())
.background(Color.green)
TabView {
TextInfoView()
.frame(width:UIScreen.main.bounds.size.width*0.9)
.cornerRadius(UIConstants.cardCornerRadius)
.padding([.horizontal])
}.tabViewStyle(PageTabViewStyle())
.background(Color.purple)
}
}
}
}
}
struct TextInfoView: View {
var body: some View {
VStack {
Text("Learn how to use SwiftUI to compose rich views out of simple ones, set up data flow, and build the navigation while watching it unfold in Xcode’s preview. Learn how to use SwiftUI to compose rich views out of simple ones, set up data flow, and build the navigation while watching it unfold in Xcode’s preview.Learn how to use SwiftUI to compose rich views out of simple ones, set up data flow, and build the navigation while watching it unfold in Xcode’s preview.Learn how to use SwiftUI to compose rich views out of simple ones, set up data flow, and build the navigation while watching it unfold in Xcode’s preview.Learn how to use SwiftUI to compose rich views out of simple ones, set up data flow, and build the navigation while watching it unfold in Xcode’s preview.Learn how to use SwiftUI to compose rich views out of simple ones, set up data flow, and build the navigation while watching it unfold in Xcode’s preview.").padding()
}
.background(Color.yellow)
}
}
struct ImageView: View {
var body: some View {
Image("Dummy")
.resizable()
.aspectRatio(contentMode: /*#START_MENU_TOKEN#*/.fill/*#END_MENU_TOKEN#*/)
.frame(height:UIScreen.main.bounds.size.height*0.7)
}
}
The results as follows:
A few issues here:
You can see that I tried to wrap the TextInfoView with a TabView as well. It is because if I do not enclose it in a TabView, it cannot align with the TabView with ImageView above. Any method to solve this issue?
At the top, the green area. Why there is such large padding around the text? How can I remove those extra green area? I want it to be tight at top and bottom.
If I do not add .frame() for the green area text, I found that the text gone, and cannot align to the left. Any method to solve this?

Answer 1

struct DetailViews: View {
var body: some View {
ZStack {
Color.green.edgesIgnoringSafeArea(.all)
ScrollView(.vertical, showsIndicators: false) {
VStack(spacing: 0) {
VStack{
Text("A long Text Title")
Text("A long Text Title")
Text("A long Text Title")
Text("A long Text Title")
}
.frame(maxWidth: .infinity)
.background(Color.yellow)
TabView {
ImageView()
.frame(width:UIScreen.main.bounds.size.width*0.9)
.cornerRadius(15)
ImageView()
.frame(width:UIScreen.main.bounds.size.width*0.9)
.cornerRadius(15)
ImageView()
.frame(width:UIScreen.main.bounds.size.width*0.9)
.cornerRadius(15)
}
.tabViewStyle(PageTabViewStyle())
.indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: .always))
.background(Color.red)
TextInfoView()
.cornerRadius(15)
.padding()
.background(Color.blue)
TextInfoView()
.cornerRadius(15)
.padding()
.background(Color.purple)
}
}
}
}
}
struct TextInfoView: View {
var body: some View {
VStack {
Text("Learn how to use SwiftUI to compose rich views out of simple ones, set up data flow, and build the navigation while watching it unfold in Xcode’s preview. Learn how to use SwiftUI to compose rich views out of simple ones, set up data flow, and build the navigation while watching it unfold in Xcode’s preview.Learn how to use SwiftUI to compose rich views out of simple ones, set up data flow, and build the navigation while watching it unfold in Xcode’s preview.Learn how to use SwiftUI to compose rich views out of simple ones, set up data flow, and build the navigation while watching it unfold in Xcode’s preview.Learn how to use SwiftUI to compose rich views out of simple ones, set up data flow, and build the navigation while watching it unfold in Xcode’s preview.Learn how to use SwiftUI to compose rich views out of simple ones, set up data flow, and build the navigation while watching it unfold in Xcode’s preview.")
.fixedSize(horizontal: false, vertical: true).padding()//added
}
.background(Color.yellow)
}
}