SwiftUI中滑动隐藏导航栏时出现额外空白问题

方案1：把分段控件嵌入导航栏 #

将自定义分段控件放到导航栏的标题区域，使其随导航栏同步隐藏/显示，彻底消除空白。修改后的代码示例：

var body: some View {
    NavigationView {
        ScrollView {
            VStack {
                // 页面主内容
            }
        }
        .navigationBarTitleDisplayMode(.inline)
        .toolbar {
            ToolbarItem(placement: .principal) {
                // 替换成你的自定义分段控件
                CustomSegmentedControl()
            }
        }
        .toolbarVisibility(.automatic) // iOS 16+ 开启滑动隐藏导航栏
        // 兼容 iOS 15 及更早版本：
        // .navigationBarHidden(false)
    }
}

方案2：同步ScrollView与导航栏布局 #

如果分段控件必须放在ScrollView内部，可通过监听导航栏高度变化，动态调整ScrollView的内边距，抵消空白：

struct YourView: View {
    @State private var navBarOffset: CGFloat = 0
    
    var body: some View {
        NavigationView {
            ScrollView {
                VStack {
                    // 自定义分段控件
                    CustomSegmentedControl()
                    // 页面主内容
                }
            }
            .navigationBarTitleDisplayMode(.inline)
            .toolbarVisibility(.automatic)
            // 监听导航栏高度变化
            .overlay(
                GeometryReader { proxy in
                    Color.clear
                        .preference(key: NavBarOffsetKey.self, value: proxy.frame(in: .global).minY)
                }
                .frame(height: 0)
            )
            .onPreferenceChange(NavBarOffsetKey.self) { newValue in
                navBarOffset = newValue
            }
            // 根据导航栏偏移调整内边距
            .padding(.top, navBarOffset < 0 ? -navBarOffset : 0)
        }
    }
}

// 自定义偏好键用于监听导航栏位置
private struct NavBarOffsetKey: PreferenceKey {
    static var defaultValue: CGFloat = 0
    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
        value = nextValue()
    }
}

注意事项 #

• 确保TabView子视图中的NavigationView没有被额外的padding或frame破坏布局
• 若需兼容更早版本，可通过UIViewControllerRepresentable桥接UIKit的hidesBarsOnSwipe属性

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