SwiftUI中如何为自定义TabView的滚动内容添加适配内边距？

我正在实现一个自定义TabView，标签页内容支持滚动。原生TabView的默认行为是允许内容滚动到TabView下方（类似ZStack层级），滚动到底部时最后一块内容会恰好停在TabView上方。但我用ZStack实现的自定义TabView把TabBar放在内容上方，滚动到底部时内容会被TabBar遮挡，达不到原生效果。

我尝试给内容添加适配内边距来解决，当前CustomTabView的布局代码如下：

var body: some View {
    ZStack(alignment: .bottom) {
        content
            .ignoresSafeArea(edges: .bottom)
        
        ZStack(alignment: .top) {
            CustomTabView(tabs: tabs, selection: $selection)
                .padding(.horizontal, 8)
                .padding(.top, 8)
                .background(.ultraThinMaterial)
            
            Divider()
        }
    }
    .onPreferenceChange(CustomTabBarItemsPreferenceKey.self, perform: { value in
        self.tabs = value
    })
}

更新尝试：
我意识到需要禁用内容里ScrollView的裁剪，试了下面的方法但没用：

extension UIScrollView {
    override open var clipsToBounds: Bool {
        get { false }
        set {}
    }
}

了解到Xcode后续版本会给ScrollView新增scrollClipDisabled()方法，但目前没法用这个特性。

解决方案 #

方法1：手动计算TabBar高度，添加底部内边距 #

核心是让内容底部多出与TabBar高度一致的内边距，确保滚动到底部时内容不会被遮挡：

1. 通过PreferenceKey获取TabBar的实际高度
2. 给内容添加对应高度的底部内边距

修改后的代码示例：

// 新增PreferenceKey用于获取TabBar高度
struct TabBarHeightPreferenceKey: PreferenceKey {
    static var defaultValue: CGFloat = 0
    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
        value = nextValue()
    }
}

var body: some View {
    @State private var tabBarHeight: CGFloat = 0
    
    ZStack(alignment: .bottom) {
        content
            .ignoresSafeArea(edges: .bottom)
            .padding(.bottom, tabBarHeight)
        
        ZStack(alignment: .top) {
            CustomTabView(tabs: tabs, selection: $selection)
                .padding(.horizontal, 8)
                .padding(.top, 8)
                .background(.ultraThinMaterial)
                // 获取TabBar高度并传递给PreferenceKey
                .background(GeometryReader { geo in
                    Color.clear.preference(key: TabBarHeightPreferenceKey.self, value: geo.size.height)
                })
            
            Divider()
        }
    }
    .onPreferenceChange(CustomTabBarItemsPreferenceKey.self, perform: { value in
        self.tabs = value
    })
    .onPreferenceChange(TabBarHeightPreferenceKey.self) { height in
        self.tabBarHeight = height
    }
}

方法2：用safeAreaInset替代ZStack（推荐） #

iOS 15+提供的safeAreaInset可以自动适配内容滚动区域，完全复刻原生TabView的行为，无需手动计算高度：

var body: some View {
    content
        .ignoresSafeArea(edges: .bottom)
        .safeAreaInset(edge: .bottom) {
            ZStack(alignment: .top) {
                CustomTabView(tabs: tabs, selection: $selection)
                    .padding(.horizontal, 8)
                    .padding(.top, 8)
                    .background(.ultraThinMaterial)
                
                Divider()
            }
        }
    .onPreferenceChange(CustomTabBarItemsPreferenceKey.self, perform: { value in
        self.tabs = value
    })
}

关于禁用ScrollView裁剪的补充 #

你之前尝试的UIScrollView扩展无效，因为SwiftUI会动态覆盖clipsToBounds属性。Xcode 15+可用scrollClipDisabled()，低版本若需实现，需通过UIViewRepresentable封装原生UIScrollView，但复杂度较高，不如上述两种方法直接。

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