SwiftUI实现Sheet仅显示头部或完整内容的显示问题

问题现状 #

现有代码已实现获取Sheet头部和完整内容的高度，但切换到头部高度时，Sheet显示内容中间区域而非顶部的"Header"文本。

问题原因 #

原代码中外层Group内的Spacer()会将内容垂直居中，当Sheet高度缩小至头部高度时，内容区域高度大于Sheet高度，导致居中显示中间部分而非顶部。同时，头部高度仅测量了文本本身，未包含周围的padding，进一步加剧了显示偏差。

修改方案及代码 #

以下是修正后的完整代码：

import SwiftUI

struct ContentView: View {
    @State private var showSheet = false
    @State private var headerTotalHeight: CGFloat = 0
    @State private var overallContentHeight: CGFloat = 0
    
    var body: some View {
        Button("View sheet") {
            showSheet = true
        }
        .sheet(isPresented: $showSheet) {
            // 外层容器：确保内容始终顶部对齐
            VStack(alignment: .leading, spacing: 0) {
                // 单独封装头部区域，测量包含padding的完整高度
                VStack(alignment: .leading) {
                    Text("Header")
                }
                .padding()
                .background(
                    GeometryReader { proxy in
                        Color.clear
                            .preference(key: HeaderHeightKey.self, value: proxy.size.height)
                    }
                )
                
                // 正文内容区域
                VStack(alignment: .leading, spacing: 16) {
                    Text("Some very long text ...")
                    Text("Some very long text ...")
                    Text("Some very long text ...")
                    Text("Some very long text ...")
                    Text("Some very long text ...")
                    Text("Some very long text ...")
                    Text("Some very long text ...")
                    Text("Some very long text ...")
                }
                .padding()
                
                // 仅在完整高度时填充剩余空间，不影响头部高度状态
                Spacer()
            }
            .background(
                GeometryReader { proxy in
                    Color.clear
                        .preference(key: OverallHeightKey.self, value: proxy.size.height)
                }
            )
            .onPreferenceChange(HeaderHeightKey.self) { height in
                headerTotalHeight = height
            }
            .onPreferenceChange(OverallHeightKey.self) { height in
                overallContentHeight = height
            }
            .presentationDetents([
                .height(headerTotalHeight),
                .height(overallContentHeight)
            ])
            .presentationDragIndicator(.visible) // 显示拖动指示器，优化交互
        }
    }
}

// 偏好键：测量头部包含padding的总高度
struct HeaderHeightKey: PreferenceKey {
    static var defaultValue: CGFloat = 0
    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
        value = nextValue()
    }
}

// 偏好键：测量完整内容高度
struct OverallHeightKey: PreferenceKey {
    static var defaultValue: CGFloat = 0
    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
        value = nextValue()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

关键修改说明 #

• 移除导致居中的外层Spacer：原代码外层的Spacer()会强制内容垂直居中，移除后内容默认从顶部开始布局。
• 精准测量头部高度：将Header单独放在带padding的容器中测量，确保Sheet头部高度刚好覆盖Header及其周围的padding，避免显示不全或偏移。
• 优化内容布局结构：拆分头部和正文区域，使布局逻辑更清晰，同时仅在正文区域后添加Spacer，确保完整高度时内容正常填充。
• 添加交互指示器：通过.presentationDragIndicator(.visible)让用户直观感知Sheet的可拖动特性，符合iOS 16设计规范。

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