如何在SwiftUI的ScrollView内将Bottom Sheet锚定在屏幕底部？

你的问题核心是自定义Bottom Sheet被嵌套在ScrollView的布局上下文中，导致它的定位依赖ScrollView的内容范围而非屏幕边界。要实现类似CSS position: fixed; bottom: 0 的效果，需要让Bottom Sheet脱离ScrollView的布局约束，锚定到屏幕全局坐标系。

修改后的完整代码实现 #

import SwiftUI

struct BottomSheetViewModal<Content: View>: View {
    @Binding var isPresented: Bool
    let content: () -> Content

    var body: some View {
        ZStack(alignment: .bottom) {
            if isPresented {
                // 全屏半透明背景，点击可关闭
                Color.black.opacity(0.3)
                    .edgesIgnoringSafeArea(.all)
                    .onTapGesture {
                        isPresented = false
                    }

                // 底部弹窗内容，锚定屏幕底部
                content()
                    .background(Color.white)
                    .clipShape(RoundedRectangle(cornerRadius: 16, style: .continuous))
                    .padding(.bottom, 5)
            }
        }
        // 关键：强制容器占满整个屏幕，确保底部对齐参考系是屏幕边界
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .ignoresSafeArea(.all)
    }
}

extension View {
    func bottomSheet<Content: View>(
        isPresented: Binding<Bool>,
        @ViewBuilder content: @escaping () -> Content
    ) -> some View {
        ZStack {
            // 让原视图占满屏幕，保证外层ZStack范围覆盖整个屏幕
            self
                .frame(maxWidth: .infinity, maxHeight: .infinity)
            // 叠加Bottom Sheet，此时它的布局参考是整个屏幕
            BottomSheetViewModal(isPresented: isPresented, content: content)
        }
    }
}

正确使用方式 #

必须在ScrollView的父视图层级调用bottomSheet，而非ScrollView内部：

struct ContentView: View {
    @State private var showSheet = false

    var body: some View {
        ScrollView {
            // 长列表内容示例
            ForEach(0..<50) { index in
                Text("列表项 \(index)")
                    .padding()
                    .frame(maxWidth: .infinity)
                    .background(Color.gray.opacity(0.1))
            }
        }
        // 在ScrollView的父层级添加Bottom Sheet
        .bottomSheet(isPresented: $showSheet) {
            VStack {
                Text("自定义Bottom Sheet")
                    .font(.title)
                    .padding()
                Spacer()
            }
            .frame(height: 250)
        }
        .toolbar {
            Button("显示Sheet") {
                showSheet = true
            }
        }
    }
}

核心原理 #

1. 全屏容器约束：给BottomSheetViewModal的ZStack设置frame(maxWidth: .infinity, maxHeight: .infinity)，强制容器占满整个屏幕，此时.bottom对齐方式的参考系是屏幕边界，而非ScrollView的内容范围。
2. 层级分离：扩展方法中将原视图（ScrollView）设置为占满屏幕，确保外层ZStack的范围覆盖整个屏幕，Bottom Sheet作为叠加层自然锚定到屏幕底部，不受ScrollView滚动影响。
3. 安全区处理：半透明背景使用edgesIgnoringSafeArea(.all)，确保覆盖包括安全区在内的整个屏幕区域。

额外优化建议 #

• 若需支持拖拽收起功能，可添加DragGesture监听手势偏移，结合withAnimation实现平滑的位置过渡。
• 使用clipShape(RoundedRectangle(...))替代带corners参数的cornerRadius，避免依赖UIKit相关扩展。

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