SwiftUI中TabView(PageTabViewStyle)嵌套ScrollView后导航标题缩放失效问题

嘿，这个问题我之前做分页类App的时候也踩过坑！核心原因是PageTabViewStyle的TabView会拦截ScrollView的滚动事件，导致外层的NavigationView感知不到滚动状态，自然没法触发标题的自适应缩放效果。下面给你两种可行的解决方案，分别适配不同的iOS版本：

这是最直接的兼容方案——把NavigationView放到每个LibraryView内部，让每个页面的ScrollView直接和自身的NavigationView建立关联，这样滚动时标题缩放的原生效果就能正常工作了：

struct ContentView: View {
    @State var selection = 1
    
    var body: some View {
        TabView(selection: $selection) {
            // 第一个Tab页面嵌套NavigationView
            NavigationView {
                LibraryView()
                    .navigationTitle("A")
                    .navigationBarTitleDisplayMode(.large)
            }
            .tag(1)
            
            // 第二个Tab页面同理
            NavigationView {
                LibraryView()
                    .navigationTitle("B")
                    .navigationBarTitleDisplayMode(.large)
            }
            .tag(2)
        }
        .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
    }
}

struct LibraryView: View {
    @State var gridLayout: [GridItem] = [GridItem(), GridItem()]
    
    var body: some View {
        ScrollView {
            LazyVGrid(columns: gridLayout, alignment: .center, spacing: 10) {
                ForEach(collections.indices) { index in
                    CollectionItem(collection: collections[index])
                }
            }
            .padding(.all, 10)
        }
    }
}

为什么这个方法有效？ #

当NavigationView直接包裹ScrollView时，SwiftUI会自动绑定滚动状态和导航栏行为，滚动时标题会根据偏移量自动缩放。而原来的结构中，TabView作为中间层阻断了这种绑定，所以效果失效。

如果你的App只需要支持iOS 16及以上，可以用GeometryReader+PreferenceKey监听ScrollView的滚动偏移，再手动控制NavigationView的标题外观，实现原生的缩放效果：

struct ContentView: View {
    @State var selection = 1
    // 用来跟踪滚动偏移量
    @State private var scrollOffset: CGFloat = 0
    
    var body: some View {
        NavigationView {
            TabView(selection: $selection) {
                LibraryView(scrollOffset: $scrollOffset)
                    .tag(1)
                LibraryView(scrollOffset: $scrollOffset)
                    .tag(2)
            }
            .navigationTitle(selection == 1 ? "A" : "B")
            .navigationBarTitleDisplayMode(.large)
            // 根据滚动偏移切换导航栏的显示状态，模拟原生缩放效果
            .toolbarBackground(scrollOffset > 40 ? .visible : .hidden, for: .navigationBar)
            .toolbarColorScheme(scrollOffset > 40 ? .dark : .light, for: .navigationBar)
        }
        .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
    }
}

struct LibraryView: View {
    @Binding var scrollOffset: CGFloat
    @State var gridLayout: [GridItem] = [GridItem(), GridItem()]
    
    var body: some View {
        ScrollView {
            LazyVGrid(columns: gridLayout, alignment: .center, spacing: 10) {
                ForEach(collections.indices) { index in
                    CollectionItem(collection: collections[index])
                }
            }
            .padding(.all, 10)
            .background(
                // 用GeometryReader监听滚动位置
                GeometryReader { geo in
                    Color.clear
                        .preference(key: ScrollOffsetKey.self, value: geo.frame(in: .global).minY)
                }
            )
            .onPreferenceChange(ScrollOffsetKey.self) { value in
                // 转换偏移量，确保初始状态为0
                scrollOffset = value > 0 ? 0 : -value
            }
        }
    }
}

// 自定义PreferenceKey传递滚动偏移量
struct ScrollOffsetKey: PreferenceKey {
    static var defaultValue: CGFloat = 0
    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
        value = nextValue()
    }
}

小提示 #

• 方案二中的40是标题开始切换状态的阈值，你可以根据自己的UI设计调整这个数值，找到最自然的过渡点。
• iOS 16+推荐使用NavigationStack替代NavigationView，代码结构完全兼容，效果一致。

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