[英]Full Screen View not working inside HStack and Horizontal ScrollView
I have been trying to create onboarding flow using horizontal lists etc. I have created a view called OnboardingView
and inside it I have a VStack with image, and two Text views. 我一直在尝试使用水平列表等创建入职流程。我创建了一个名为
OnboardingView
的视图,并且在其中有一个带有图像的VStack和两个Text视图。
struct OnboardingView: View {
var body: some View {
GeometryReader { geometry in
VStack(spacing: 10) {
Spacer()
Image("1")
.resizable()
.frame(width: 300, height: 300)
.clipShape(Circle())
.padding(20)
Text("Travel the World")
.frame(width: geometry.size.width, height: 20, alignment: .center)
.font(.title)
Text("Explore the world and get to know different cultures and people from all around the world")
.lineLimit(nil)
.padding(.leading, 15)
.padding(.trailing, 15)
.font(.system(size: 16))
.frame(width: geometry.size.width, height: 50, alignment: .center)
.multilineTextAlignment(.center)
Spacer()
}.background(Color.red)
}
} } }}
This is what I get with the above code: 这就是上面的代码:
Now I am trying to add this view inside a ScrollView, using HStack. 现在,我尝试使用HStack在ScrollView中添加此视图。
struct ContentView: View {
var body: some View {
ScrollView(.horizontal, showsIndicators: false) {
HStack {
OnboardingView()
OnboardingView()
}
}.background(Color.black)
}
}
The result of the above code is absurd! 上面的代码的结果是荒谬的! This is what I get.
这就是我得到的。 How to go about fixing this?
如何解决这个问题? Help will be appreciated!
帮助将不胜感激! Thanks.
谢谢。
One possible solution would be to set the width
of the OnboardingView
to geometry.size.width
: 一种可能的解决方案是将
OnboardingView
的width
设置为geometry.size.width
:
var body: some View {
GeometryReader { geometry in
ScrollView(.horizontal, showsIndicators: false) {
HStack {
OnboardingView()
.frame(width: geometry.size.width)
OnboardingView()
.frame(width: geometry.size.width)
}
}.background(Color.black)
}
}
Result
结果
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.