在屏幕顶部使用 .horizo​​ntal ScrollArea？

Posted 2023-03-08

【中文标题】在屏幕顶部使用 .horizo​​ntal ScrollArea？

【英文标题】：Using .horizontal ScrollArea at top of screen?

【发布时间】：2020-06-01 19:46:58

【问题描述】：

我正在尝试渲染一个带有标题区域、水平滚动视图以及下面的更多视图的布局。我已将所有内容都包装在 ZStack 中，以便我在水平区域中展开其中一个子视图，以便在单击它们时展开并填充屏幕的顶部 1/3（如 App Store）。

    ZStack(alignment: .leading) 
        VStack 
            Text("Hello World").foregroundColor(.pink)
            
            ScrollView(.horizontal) 
                HStack(spacing: 20) 
                    ForEach(0..<2) 
                        Text("H/Item \($0)")
                            .foregroundColor(.white)
                            .frame(width: 200, height: 180)
                            .background(Color.red)
                    
                
            .background(Color.orange)
            
            Spacer()
        
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color.green)
        .foregroundColor(.white)
    
    .frame(maxWidth: .infinity, maxHeight: .infinity)
    .foregroundColor(.white)
    .background(Color.pink)
    //.edgesIgnoringSafeArea(.all)

如果我注释掉edgesIgnoringSafeArea XCode 抱怨更新预览花费了超过 5 秒（在模拟器中运行只会给我一个白屏）。我猜这是 SwiftUI 中的一个错误，但是有没有办法将 ScrollView 的子级渲染到其可见边界之外？ 我可以使用 GeometryReader 重新定位视图，但如果坐标在 ScrollView 之外，它们会被剪裁。

【问题讨论】：

你为什么要把它移到顶部？标题，即 Hello World 现在将不可见，那么目标是什么？

@Asperi 我需要有一些标题文本。问题是要在顶部显示红色视图（忽略安全区域），ScrollView 需要具有 offset(y: -n) 以便它位于屏幕的顶部边缘。一旦我进行了更改，视图就不再呈现。

【参考方案1】：

这是一个可能的解决方案（与目标无关，因为无论如何我不明白为什么需要在顶部设置文本，因为最终它无论如何都是不可见的）。使用 Xcode 11.4 / ios 13.4 测试。

var body: some View 
    ZStack(alignment: .leading) 
        VStack 
            Text("Hello World").foregroundColor(.pink)

            ScrollView(.horizontal) 
                HStack(spacing: 20) 
                    ForEach(0..<2) 
                        Text("H/Item \($0)")
                            .foregroundColor(.white)
                            .frame(maxHeight: .infinity)
                            .frame(width: 200)
                            .background(Color.red)
                    
                .edgesIgnoringSafeArea(.top)
            
            .frame(height: 180)
            .background(Color.orange)
        
        .background(Color.green)
        .foregroundColor(.white)
    
    .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .top)
    .foregroundColor(.white)
    .background(Color.pink)
    .edgesIgnoringSafeArea(.all)