SwiftUI：TabView内视图设置偏移量导致卡顿问题求助

问题描述 #

在TabView中为特定视图实现视差效果时，拖拽过程中视图出现轻微卡顿，该问题在测试项目中复现，且在iPhone 14 Pro（iOS 17）真机上表现更为明显。测试代码如下：

import SwiftUI

struct ContentView: View {
    @State private var currentIndex: Int = .zero
    
    var body: some View {
        TabView(selection: $currentIndex) {
            ForEach(0..<10) { index in
                TabViewContentView(text: String(UUID().uuidString.prefix(Constant.prefixLength)), isVisible: index == currentIndex)
                    .tag(index)
            }
        }
        .tabViewStyle(PageTabViewStyle())
    }
    
    private enum Constant {
        static let prefixLength = 7
    }
}

private struct TabViewContentView: View {
    private let text: String
    private let isVisible: Bool
    @State private var offset: CGFloat = .zero
    
    init(text: String, isVisible: Bool = true) {
        self.text = text
        self.isVisible = isVisible
    }
    
    var body: some View {
        VStack {
            Color.blue.frame(maxWidth: .infinity, maxHeight: .infinity)
                .overlay(alignment: .bottomLeading) {
                    Text(text)
                        .font(.largeTitle)
                        .offset(x: offset)
                }
                .opacity(isVisible ? 1 : .zero)
            Color.green.frame(maxWidth: .infinity, maxHeight: .infinity)
        }
        .tabViewOffsetListener { newOffset in
            var parallaxOffset: CGFloat = .zero
            parallaxOffset = isVisible ? newOffset * -Constant.parallaxMultiplier : newOffset
            DispatchQueue.main.async {
                offset = parallaxOffset
            }
        }
    }
    
    private enum Constant {
        static let parallaxMultiplier = 0.7
    }
}

private struct TabViewOffsetViewModifier: ViewModifier {
    private let offsetHandler: (CGFloat) -> Void
    private let clearColorView = Color.clear
    
    init(offsetHandler: @escaping (CGFloat) -> Void) {
        self.offsetHandler = offsetHandler
    }
    
    func body(content: Content) -> some View {
        content
            .background(
                GeometryReader { proxy -> Color in
                    let dragOffset = proxy.frame(in: .global).minX
                    offsetHandler(dragOffset)
                    return clearColorView
                }
            )
    }
}

public extension View {
    func tabViewOffsetListener(offsetHandler: @escaping (CGFloat) -> Void) -> some View {
        modifier(TabViewOffsetViewModifier(offsetHandler: offsetHandler))
    }
}

优化方案 #

1. 移除冗余的异步调度 #

GeometryReader的回调本身就在主线程执行，额外的DispatchQueue.main.async会导致偏移更新延迟，直接赋值即可：

.tabViewOffsetListener { newOffset in
    var parallaxOffset: CGFloat = .zero
    parallaxOffset = isVisible ? newOffset * -Constant.parallaxMultiplier : newOffset
    offset = parallaxOffset // 去掉DispatchQueue.main.async
}

2. 改用iOS 17+原生pageOffset API（推荐） #

iOS 17为TabView新增了pageOffset环境变量，可直接获取分页拖拽的进度，无需通过GeometryReader监听，性能更优：

修改ContentView：

struct ContentView: View {
    @State private var currentIndex: Int = .zero
    @State private var pageOffset: CGFloat = 0
    
    var body: some View {
        TabView(selection: $currentIndex) {
            ForEach(0..<10) { index in
                TabViewContentView(
                    text: String(UUID().uuidString.prefix(Constant.prefixLength)),
                    currentIndex: currentIndex,
                    pageOffset: pageOffset,
                    itemIndex: index
                )
                .tag(index)
            }
        }
        .tabViewStyle(PageTabViewStyle())
        .onChange(of: currentIndex) { oldValue, newValue in
            pageOffset = CGFloat(newValue - oldValue)
        }
        .environment(\.pageOffset, $pageOffset)
    }
    
    private enum Constant {
        static let prefixLength = 7
    }
}

修改TabViewContentView：

private struct TabViewContentView: View {
    private let text: String
    private let currentIndex: Int
    private let pageOffset: CGFloat
    private let itemIndex: Int
    
    private var parallaxOffset: CGFloat {
        guard currentIndex == itemIndex else { return 0 }
        let screenWidth = UIScreen.main.bounds.width
        return pageOffset * screenWidth * Constant.parallaxMultiplier
    }
    
    init(text: String, currentIndex: Int, pageOffset: CGFloat, itemIndex: Int) {
        self.text = text
        self.currentIndex = currentIndex
        self.pageOffset = pageOffset
        self.itemIndex = itemIndex
    }
    
    var body: some View {
        VStack {
            Color.blue.frame(maxWidth: .infinity, maxHeight: .infinity)
                .overlay(alignment: .bottomLeading) {
                    Text(text)
                        .font(.largeTitle)
                        .offset(x: parallaxOffset)
                }
            Color.green.frame(maxWidth: .infinity, maxHeight: .infinity)
        }
    }
    
    private enum Constant {
        static let parallaxMultiplier = 0.7
    }
}

3. 减少不必要的视图重绘 #

移除.opacity(isVisible ? 1 : .zero)，TabView的分页机制已会管理页面的显示隐藏，额外的透明度修改会触发冗余重绘。

4. 启用离屏渲染优化 #

在TabView上添加.drawingGroup()，将视图渲染到离屏纹理，减少合成层开销：

TabView(...) {
    // ...
}
.tabViewStyle(PageTabViewStyle())
.drawingGroup()

总结 #

优先使用iOS 17+的pageOffset API获取拖拽进度，配合移除冗余异步调度、减少不必要重绘、启用离屏渲染，可大幅缓解拖拽卡顿问题。

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