如何让SwiftUI的ScrollView始终锚定在屏幕底部？

你的问题出在给ScrollView内容设置了整个屏幕高度，但上方还有固定的文本区域，导致ScrollView内容总高度超过实际可滚动空间，滚动到底部时就会露出下方的红色背景。

下面提供两种简洁的解决方式：

方案一：直接给ScrollView设置背景（推荐） #

直接将黄色背景绑定到ScrollView上，同时用Spacer确保内容不足时撑满剩余空间，滚动到底部时自然贴合屏幕底部：

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack(spacing: 0) {
            Text("Content Above ScrollView")
                .padding()
            
            ScrollView {
                VStack(alignment: .leading) {
                    ForEach(0..<10) { index in
                        Text("Item \(index)")
                    }
                    // 内容不足时撑满ScrollView剩余空间
                    Spacer(minLength: 0)
                }
                .frame(maxWidth: .infinity)
            }
            .frame(maxHeight: .infinity)
            .background(.yellow) // 给ScrollView设置黄色背景
        }
        .background(.red)
    }
}

方案二：精确计算可用高度 #

如果需要更精准的高度控制，可以通过PreferenceKey获取上方文本区域的高度，计算ScrollView的可用空间：

import SwiftUI

// 自定义PreferenceKey用于获取视图高度
struct HeightPreferenceKey: PreferenceKey {
    static var defaultValue: CGFloat = 0
    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
        value = nextValue()
    }
}

struct ContentView: View {
    @State private var headerHeight: CGFloat = 0
    
    var body: some View {
        GeometryReader { screenGeo in
            VStack(spacing: 0) {
                Text("Content Above ScrollView")
                    .padding()
                    .overlay(
                        GeometryReader { geo in
                            Color.clear.preference(key: HeightPreferenceKey.self, value: geo.size.height)
                        }
                    )
                
                ScrollView {
                    VStack(alignment: .leading) {
                        ForEach(0..<10) { index in
                            Text("Item \(index)")
                        }
                        Spacer()
                    }
                    .frame(maxWidth: .infinity)
                    // 设置内容高度为屏幕高度减去上方文本区域高度
                    .frame(height: screenGeo.size.height - headerHeight)
                    .background(.yellow)
                }
                .frame(maxHeight: .infinity)
            }
            .background(.red)
            .onPreferenceChange(HeightPreferenceKey.self) {
                headerHeight = $0
            }
        }
    }
}

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