SwiftUI如何将Horizontal ScrollView固定显示在页面顶部

你之前尝试的所有方案无效，核心是搞错了布局修饰符的作用范围：

• 水平ScrollView会默认拉伸占据父容器给它的全部可用垂直高度，它内部的HStack默认在ScrollView的垂直居中位置
• 你之前修改的都是ScrollView内部HStack的属性，或者在错误的位置加Spacer，根本管不到ScrollView本身在页面里的垂直位置
• 各方案无效的具体原因：
  • 加NavigationView：仅提供导航栏容器，不负责内容的垂直对齐逻辑
  • 给HStack设置.padding()：垂直padding只会把内容往下推，离顶部更远
  • 在HStack内插Spacer()：HStack是水平布局容器，内部Spacer仅会撑水平宽度，不影响垂直位置
  • 给HStack套ZStack：ZStack默认子视图居中重叠，不设对齐规则反而会让内容停在页面中间
  • 用HStack(alignment: .top)：该属性仅控制HStack内部不同高度子视图的顶部对齐，管不了HStack自身在ScrollView里的位置，更控制不了ScrollView在页面的位置

完全可以实现Horizontal ScrollView停靠在页面顶部，只需要两步：

1. 用垂直布局容器VStack作为NavigationView的直接子节点，明确垂直方向的布局顺序
2. 把ScrollView放在VStack的最开头，ScrollView后面放一个Spacer()占满剩余的全部垂直空间，ScrollView就会被牢牢固定在页面顶部；同时给ScrollView设置和内容匹配的固定高度，避免它拉伸占满整个屏幕。

修正后的可直接运行代码：

import SwiftUI
struct ContentView: View {
    
    var body: some View {
        NavigationView {
            // 垂直栈作为根容器，管控垂直方向布局顺序
            VStack(alignment: .leading, spacing: 0) {
                ScrollView(.horizontal, showsIndicators: false) {
                    HStack(spacing: 15) {
                        Group {
                            Image("OutdoorDining1")
                                .resizable()
                                .scaledToFill()
                                .frame(width: 230, height: 148)
                                .clipped()
                                .cornerRadius(8)
                        
                            Image("EatVegan")
                                .resizable()
                                .scaledToFill()
                                .frame(width: 230, height: 148)
                                .clipped()
                                .cornerRadius(8)
                        
                            Image("CityView")
                                .resizable()
                                .scaledToFill()
                                .frame(width: 230, height: 148)
                                .clipped()
                                .cornerRadius(8)
                                
                        
                            Image("LiveMusic")
                                .resizable()
                                .scaledToFill()
                                .frame(width: 230, height: 148)
                                .clipped()
                                .cornerRadius(8)
                        }
                
                        Group {
                            Image("Seafood")
                                .resizable()
                                .scaledToFill()
                                .frame(width: 230, height: 148)
                                .clipped()
                                .cornerRadius(8)
                          
                            Image("Blackowned")
                                .resizable()
                                .scaledToFill()
                                .frame(width: 230, height: 148)
                                .clipped()
                                .cornerRadius(8)
                           
                            Image("Hookah")
                                .resizable()
                                .scaledToFill()
                                .frame(width: 230, height: 148)
                                .clipped()
                                .cornerRadius(8)
                           
                            Image("OpenTilLate")
                                .resizable()
                                .scaledToFill()
                                .frame(width: 230, height: 148)
                                .clipped()
                                .cornerRadius(8)
                        }
                
                        Group {
                            Image("CentralAmerica")
                                .resizable()
                                .scaledToFill()
                                .frame(width: 230, height: 148)
                                .clipped()
                                .cornerRadius(8)
                        
                            Image("Asian")
                                .resizable()
                                .scaledToFill()
                                .frame(width: 230, height: 148)
                                .clipped()
                                .cornerRadius(8)
                           
                            Image("Mediterranean")
                                .resizable()
                                .scaledToFill()
                                .frame(width: 230, height: 148)
                                .clipped()
                                .cornerRadius(8)
                        }
                
                        Group {
                            Image("Steakhouses")
                                .resizable()
                                .scaledToFill()
                                .frame(width: 230, height: 148)
                                .clipped()
                                .cornerRadius(8)
                           
                            Image("Kosher")
                                .resizable()
                                .scaledToFill()
                                .frame(width: 230, height: 148)
                                .clipped()
                                .cornerRadius(8)
                        }
                    }
                    .padding(.horizontal, 16) // 给滚动内容加左右边距，避免首图贴边
                }
                .frame(height: 148) // 滚动视图高度和图片高度一致，消除多余垂直空间
                .padding(.top, 16) // 按需调整和顶部/导航栏的间距
                
                // 核心：Spacer放在ScrollView外部，占满所有剩余垂直空间，把ScrollView顶在顶部
                Spacer()
            }
            .navigationTitle("分类浏览") // 按需设置导航栏标题
            .navigationBarTitleDisplayMode(.inline) // 可选：小导航栏模式更贴合顶部停靠效果
        }
    }
}

• 如果你不需要导航栏，直接删掉NavigationView，根节点用VStack包裹ScrollView和Spacer即可
• 可以修改.padding(.top, 16)的数值，调整ScrollView和顶部的间距
• 代码里给Image加的resizable()、cornerRadius()等是优化图片显示效果的修饰符，如果你已经做好了图片资源适配，可以按需删除

内容的提问来源于stack exchange，提问作者Christina Mulenga