如何创建带PullToRefresh与弹性头部的SwiftUI布局？

针对你遇到的两个问题，我们可以通过调整布局层级和利用GeometryReader获取屏幕尺寸来解决，以下是修改后的完整代码：

import SwiftUI

struct PullToRefresh: View {
    @State private var isRefreshing = false
    
    var body: some View {
        GeometryReader { geometry in
            ZStack {
                // 固定在顶部的渐变背景，支持拉伸
                LinearGradient(
                    gradient: Gradient(colors: [.green, .red]),
                    startPoint: .bottom,
                    endPoint: .top
                )
                .cornerRadius(20)
                .shadow(color: Color(white: 0, opacity: 0.4), radius: 5)
                .ignoresSafeArea(edges: .top)
                .frame(minHeight: geometry.size.height / 2)
                
                ScrollView {
                    VStack(spacing: 0) {
                        // 顶部内容区域（背景透明，透出底层渐变）
                        VStack {
                            Text("Top")
                        }
                        .frame(width: geometry.size.width, height: geometry.size.height / 2)
                        .background(Color.clear)
                        
                        // 底部内容区域
                        VStack {
                            Text("Bottom")
                        }
                        .frame(width: geometry.size.width, height: geometry.size.height / 2)
                        .background(Color(.lightGray))
                    }
                    .frame(minHeight: geometry.size.height) // 确保ScrollView内容至少占满屏幕高度
                }
                .background(Color.clear)
                .refreshable {
                    isRefreshing = true
                    // 模拟异步刷新任务
                    try? await Task.sleep(nanoseconds: 2_000_000_000)
                    isRefreshing = false
                }
            }
        }
        .ignoresSafeArea(edges: .bottom)
    }
}

#Preview {
    PullToRefresh()
}

关键修改说明 #

1. 解决布局坍缩问题

   • 用GeometryReader获取屏幕高度，给ScrollView内部的VStack设置minHeight: geometry.size.height，确保内容至少占满整个屏幕。
   • 顶部和底部区域分别设置固定高度为geometry.size.height / 2，强制保持上下各50%的比例。

2. 实现顶部渐变固定拉伸

   • 将渐变背景从原来的顶部视图background移到ZStack的底层，作为独立视图存在。
   • 给渐变背景设置minHeight: geometry.size.height / 2，下拉刷新时，ScrollView内容上移，渐变背景会自动填充下拉露出的空间，实现固定在顶部且可拉伸的效果。
   • 顶部内容区域设置background(Color.clear)，让底层的渐变背景透出来。

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