如何为自定义TabBar下方的内容添加底部间距？

要实现内容自动适配自定义底部栏的显示/隐藏状态，同时保留内容背景，你可以通过以下方式调整：

1. 动态获取底部栏高度（替代硬编码值） #

先定义一个PreferenceKey用来传递底部栏的实际高度，避免固定数值适配问题：

import SwiftUI

struct BottomBarHeightKey: PreferenceKey {
    static var defaultValue: CGFloat = 0
    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
        value = nextValue()
    }
}

然后在你的BottomBar视图中添加高度监听：

// 在BottomBar的body中添加
.background(
    GeometryReader { proxy in
        Color.clear.preference(key: BottomBarHeightKey.self, value: proxy.size.height)
    }
)

2. 调整ShapedTabView的布局逻辑 #

修改ShapedTabView，通过条件式安全区域插入+动态内边距实现适配，同时保留内容背景：

public struct ShapedTabView<Content: View>: View {
    // MARK: Lifecycle
    
    public init(
        tabs: [TabType],
        selection: Binding<TabType>,
        @ViewBuilder content: @escaping (TabType) -> Content
    ) {
        self.tabs = tabs
        self._selection = selection
        self.content = content
    }
    
    // MARK: Public
    
    public var body: some View {
        TabView(selection: $selection) {
            ForEach(tabs, id: \.rawValue) { tab in
                content(tab)
                    .tag(tab)
                    // 让内容背景延伸到底部安全区域
                    .background(.white, ignoresSafeAreaEdges: .bottom)
            }
        }
        // 条件式添加底部安全区域插入，仅当底部栏显示时生效
        .safeAreaInset(edge: .bottom, spacing: 0) {
            if !isHide {
                BottomBar(
                    selection: $selection,
                    localSelection: selection,
                    tabs: tabs
                )
                .onPreferenceChange(BottomBarHeightKey.self) { newValue in
                    bottomBarHeight = newValue
                }
            } else {
                Color.clear.frame(height: 0)
            }
        }
        // 根据底部栏状态调整内容底部内边距（结合系统底部安全区域高度）
        .contentPadding(.bottom, isHide ? 0 : bottomBarHeight + (UIApplication.shared.windows.first?.safeAreaInsets.bottom ?? 0))
        .environment(\.isTabBarHide, $isHide)
        .ignoresSafeArea(.keyboard, edges: .bottom)
    }
    
    // MARK: Private
    
    private var tabs: [TabType]
    @Binding private var selection: TabType
    @ViewBuilder private let content: (TabType) -> Content
    
    @State private var isHide = false
    @State private var bottomBarHeight: CGFloat = 0
}

关键说明 #

• 用PreferenceKey获取底部栏真实高度，适配不同设备和布局变化，避免硬编码90这类固定值。
• 通过safeAreaInset的条件渲染，让TabView自动管理内容的底部间距，同时配合contentPadding确保内容完全避开底部栏。
• 给content(tab)添加background(ignoresSafeAreaEdges: .bottom)，保证内容背景能延伸到屏幕底部，不会因为间距出现空白。
• 移除原有的offset和opacity隐藏方式，直接通过条件渲染控制BottomBar的显示，更高效且避免布局残留问题。

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