全屏视图在 HStack 和水平滚动视图中不起作用

Posted 2023-02-24

【中文标题】全屏视图在 HStack 和水平滚动视图中不起作用

【英文标题】：Full Screen View not working inside HStack and Horizontal ScrollView

【发布时间】：2019-08-01 18:38:22

【问题描述】：

我一直在尝试使用水平列表等创建入职流程。我创建了一个名为 OnboardingView 的视图，在其中我有一个带图像的 VStack 和两个文本视图。

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)

这是我用上面的代码得到的：

现在我正在尝试使用 HStack 在 ScrollView 中添加此视图。

struct ContentView: View 

var body: some View 
   ScrollView(.horizontal, showsIndicators: false) 
        HStack 
            OnboardingView()
            OnboardingView()
        
    .background(Color.black)

  
 

上述代码的结果是荒谬的！这就是我得到的。如何解决这个问题？帮助将不胜感激！谢谢。

【参考方案1】：

一种可能的解决方案是将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)
    

结果