将水平卷轴移动到顶级Swiftui

Question

我正在尝试将图像移至顶部中的图像。他们目前在底部。我尝试添加navigationView，.padding（），spacer（），添加zstack作为父母HSTACK和hstack（Alignment：.top）。我被困了3天。

是否可以将水平滚动浏览在顶部？

这是代码：

import SwiftUI
struct ContentView: View {
    
    var body: some View {
        NavigationView {
            ScrollView(.horizontal) {
              
                
                    HStack(spacing: 15) {
                        Group {
                            Image("OutdoorDining1")
                            .frame(width: 230, height: 148)
                        
                        Image("EatVegan")
                            .frame(width: 230, height: 148)
                        
                        Image("CityView")
                            .frame(width: 230, height: 148)
                                
                        
                        Image("LiveMusic")
                            .frame(width: 230, height: 148)
                            }
                
                
                        Group {
                            Image("Seafood")
                                .frame(width: 230, height: 148)
                          
                
                            Image("Blackowned")
                                .frame(width: 230, height: 148)
                           
                    
                            Image("Hookah")
                                .frame(width: 230, height: 148)
                           
                    
                            Image("OpenTilLate")
                                .frame(width: 230, height: 148)
                            
                    
                            }
                
                        Group {
                            Image("CentralAmerica")
                                .frame(width: 230, height: 148)
                        
                    
                            Image("Asian")
                                .frame(width: 230, height: 148)
                           
                    
                            Image("Mediterranean")
                                .frame(width: 230, height: 148)
                            
                    
                            }
                
                        Group {
                            Image("Steakhouses")
                                .frame(width: 230, height: 148)
                           
                    
                            Image("Kosher")
                                .frame(width: 230, height: 148)
                           
                    
                            }
             

Answer 1

嗨，克里斯蒂娜，欢迎来！您可以使用Chrisr的建议VSTACK + spacer（） - 它是有效的，但是如果您构建了更复杂的UI并想添加scrollview（.ver​​tical）以及更多视图使用下一个层次结构

struct ContentView: View {
    var body: some View {
        ZStack(alignment: .top) {
            NavigationView {
                ScrollView(.vertical) {
                    VStack {
                        ScrollView(.horizontal) {
                            HStack(spacing: 15) {
                                Group {
                                    Image("EatVegan")
                                        .frame(width: 230, height: 148)
                                    
                                    Image("CityView")
                                        .frame(width: 230, height: 148)
                                }
                                
                                Group {
                                    Image("Seafood")
                                        .frame(width: 230, height: 148)
                                    
                                    Image("Blackowned")
                                        .frame(width: 230, height: 148)
                                }
                            }
                            
                        }
                        // add other views here
                    }
                }
            }
        }
    }
}