SwiftUI技术问题：滚动时隐藏TabBar与NavigationBar失效求助

原代码问题分析 #

1. 状态逻辑倒置：原代码中toolbar(isScrollViewDragging ? .visible : .hidden)完全搞反需求——应该是拖拽滚动时隐藏栏位，停止时显示。
2. 手势未实现：缺少dragGesture的具体定义，且simultaneousGesture可能和ScrollView原生手势冲突，导致状态无法正确更新。
3. Modifier冗余：添加的Spacer和ignoresSafeArea()属于无效代码，会破坏原有布局结构。

修正后的完整实现 #

import SwiftUI

struct ContentView: View {
    @State private var isDragging: Bool = false
    @AppStorage("hideTopBarAndNavBarWhenScrolling") private var hideBarsOnScroll = false
    
    // 定义拖拽手势，监听滚动的开始、结束与取消
    private var scrollDragGesture: some Gesture {
        DragGesture()
            .onChanged { _ in
                isDragging = true
            }
            .onEnded { _ in
                withAnimation(.easeInOut(duration: 0.3)) {
                    isDragging = false
                }
            }
    }
    
    var body: some View {
        ScrollView {
            LazyVStack(spacing: 0) {
                // 示例内容，替换为你的实际视图
                ForEach(0..<50) { index in
                    Text("列表项 \(index)")
                        .frame(height: 60)
                        .frame(maxWidth: .infinity)
                        .background(Color(.systemGray6))
                }
            }
        }
        .gesture(scrollDragGesture)
        .hideNavBarAndTabBar(isDragging, hideBarsOnScroll)
    }
}

// 修正后的视图Modifier
struct HideBarsModifier: ViewModifier {
    let isDragging: Bool
    let shouldHideOnScroll: Bool
    
    func body(content: Content) -> some View {
        content
            .toolbar(shouldHideOnScroll ? (isDragging ? .hidden : .visible) : .visible, for: .tabBar)
            .toolbar(shouldHideOnScroll ? (isDragging ? .hidden : .visible) : .visible, for: .navigationBar)
            .animation(.easeInOut(duration: 0.3), value: isDragging)
    }
}

extension View {
    func hideNavBarAndTabBar(_ isDragging: Bool, _ shouldHideOnScroll: Bool) -> some View {
        self.modifier(HideBarsModifier(isDragging: isDragging, shouldHideOnScroll: shouldHideOnScroll))
    }
}

// 预览
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        NavigationStack {
            ContentView()
                .navigationTitle("测试页面")
                .tabItem {
                    Image(systemName: "house")
                    Text("首页")
                }
        }
    }
}

关键优化点 #

• 手势处理：用DragGesture监听滚动的开始与结束，结束时添加平滑动画恢复栏位显示。
• 逻辑修正：将toolbar的显示逻辑改为isDragging ? .hidden : .visible，符合滚动隐藏、停止显示的需求。
• 动画优化：添加过渡动画，让栏位的显示/隐藏更平滑，贴近Apollo的效果。
• 布局简化：去掉原Modifier中冗余的Spacer和ignoresSafeArea()，保持布局整洁。

额外说明 #

如果需要更精准的滚动方向判断（比如只在向下滚动时隐藏，向上滚动时显示），可以通过DragGesture的translation属性获取滚动方向，进一步优化isDragging的更新逻辑：

private var scrollDragGesture: some Gesture {
    DragGesture()
        .onChanged { value in
            // 向下滚动时隐藏（y值为负）
            isDragging = value.translation.y < 0
        }
        .onEnded { _ in
            withAnimation(.easeInOut(duration: 0.3)) {
                isDragging = false
            }
        }
}

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