如何在SwiftUI的ScrollView中不使用frame类方法将内容置顶？

核心通过调整ScrollView内容的对齐规则实现需求，无需固定ScrollView高度，双向滚动能力完全保留：

• 兼容iOS 14+的通用方案：在ScrollView内部添加一层容器，设置容器对齐规则为顶部起始位置，即可让内部Text自动对齐到ScrollView可视区域的顶部，刚好位于Text("123")下方
• iOS 17+精简方案：直接给ScrollView添加.defaultScrollAnchor(.topLeading)修饰符即可实现同样效果

修改后完整代码 #

import SwiftUI

struct MainView: View {
    var body: some View {
        NavigationView {
            content
        }
        .padding()
    }
}

private extension MainView {
    var content: some View {
        VStack {
            ZStack(alignment: .topLeading) {
                ScrollView([.vertical, .horizontal]) {
                    VStack(alignment: .leading, spacing: 0) {
                        Text("TestTestTestTestTestTestTestTestTestTestTest")
                            .frame(height: 100)
                            .background(Color.green)
                    }
                    .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)
                }
                Text("123")
            }
            .background(Color.blue)
        }
    }
}

效果说明 #

修改后绿色的Test文本会自动对齐到ScrollView的顶部、Text("123")的下方，ScrollView的横向、纵向滚动功能完全正常，没有使用任何固定尺寸限制ScrollView的布局。

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