SwiftUI中ScrollView无法顶部对齐问题求助

问题出在你给外层水平ScrollView设置了固定高度frame(maxHeight: scrollViewHeight)，内层垂直ScrollView默认会在这个高度范围内垂直居中布局，导致内容没有贴顶。

修改方案 #

给内层的垂直ScrollView添加.frame(maxHeight: .infinity, alignment: .top)，强制让它的内容在可用空间内顶部对齐：

修改后的完整代码：

struct ContentView: View {

    private enum Constants {
        static let cellSize = CGSize(width: 100.0, height: 100.0)
        static let rowSpacing: CGFloat = 8.0
    }


    @State private var rowCount = 1
    @State private var contentOffset = CGPoint.zero

    private var scrollViewHeight: CGFloat {
        CGFloat(rowCount) * Constants.cellSize.height + (CGFloat(rowCount) - 1.0) * Constants.rowSpacing
    }

    var body: some View {
        NavigationView {
            ScrollView(.horizontal) {
                // 给内层ScrollView添加frame设置
                ScrollView {
                    LazyVStack(spacing: Constants.rowSpacing) {
                        ForEach((0..<rowCount), id: \.self) { _ in
                            LazyHStack {
                                ForEach((1...20), id: \.self) {
                                    Text("Cell \($0)")
                                        .frame(
                                            width: Constants.cellSize.width,
                                            height: Constants.cellSize.height
                                        )
                                        .background(.red)
                                }
                            }
                        }
                    }
                }
                .frame(maxHeight: .infinity, alignment: .top) // 关键修改
                .scrollIndicators(.hidden)
            }
            .ignoresSafeArea(edges: .bottom)
            .frame(maxHeight: scrollViewHeight)
            .scrollIndicators(.hidden)
            .toolbar {
                Button("Add Row") {
                    rowCount += 1
                }
                Button("Remove Row") {
                    rowCount -= 1
                }
            }
            .navigationTitle("Test")
        }
    }
}

原理说明 #

• maxHeight: .infinity 让内层ScrollView占满外层水平ScrollView的全部可用高度
• alignment: .top 改变ScrollView的默认居中布局行为，强制内容从顶部开始排列

这样不管rowCount是1还是更多，内容都会保持顶部对齐，同时不影响滚动功能。

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