TabView样式导致拖拽手势时图像抖动的修复方案咨询

问题根源 #

添加PageTabViewStyle后，TabView自带的水平拖拽手势会与你自定义的上下拖拽手势产生识别冲突，同时TabView内部布局未固定，拖拽过程中频繁触发视图重绘，最终导致图像抖动。

具体修复方案 #

方案1：禁用TabView内置手势（推荐，适合单页面场景）

因为你的TabView仅包含一个页面，无需左右滑动交互，直接禁用TabView的内置手势即可解决冲突：

struct StoryViewMain: View {
    var body: some View {
        TabView {
            AsyncImage(url: URL(string: "https://images.pexels.com/photos/674010/pexels-photo-674010.jpeg?cs=srgb&dl=pexels-anjana-c-169994-674010.jpg&fm=jpg"))
                .aspectRatio(contentMode: .fill)
                .frame(maxWidth: .infinity, maxHeight: .infinity) // 强制图像填充容器
                .clipped() // 裁剪超出边界的图像部分
        }
        .tabViewStyle(.page(indexDisplayMode: .never))
        .background(.black)
        .disabled(true) // 禁用TabView的内置拖拽手势
        .frame(maxWidth: .infinity, maxHeight: .infinity) // 固定TabView尺寸，避免布局波动
    }
}

方案2：让自定义手势优先响应（适合多页面场景）

如果后续需要给TabView添加多个页面、保留左右滑动功能，可将自定义手势设为高优先级，确保它先于TabView手势被识别：

// 在ContentView22中替换simultaneousGesture为highPriorityGesture
.highPriorityGesture(
    DragGesture(minimumDistance: 0, coordinateSpace: .local)
        .onChanged { value in
            if value.translation.height >= 0 {
                if startOfDragLocation != value.startLocation {
                    startOfDragLocation = value.startLocation
                }
                offset = value.translation
                let newH = h * 1.5
                circleSize = max(100, newH - (newH * (value.translation.height / 300.0)))
                backOpac = max(0.0, min(1.0, 1.0 - (value.translation.height / 500.0)))
            }
        }
        .onEnded({ value in
            withAnimation(.easeIn(duration: 0.15)){
                circleSize = h + h
                offset = .zero
                backOpac = 1.0
            }
        })
)

方案3：优化布局计算逻辑

替换全局的widthOrHeight函数，改用GeometryReader直接传递尺寸，减少布局歧义引发的抖动：

// 修改StoryViewMain接收外部尺寸
struct StoryViewMain: View {
    let viewSize: CGSize
    var body: some View {
        TabView {
            AsyncImage(url: URL(string: "https://images.pexels.com/photos/674010/pexels-photo-674010.jpeg?cs=srgb&dl=pexels-anjana-c-169994-674010.jpg&fm=jpg"))
                .aspectRatio(contentMode: .fill)
                .frame(width: viewSize.width, height: viewSize.height)
                .clipped()
        }
        .tabViewStyle(.page(indexDisplayMode: .never))
        .background(.black)
        .frame(width: viewSize.width, height: viewSize.height)
    }
}

// 在ContentView22中传递尺寸
StoryViewMain(viewSize: CGSize(
    width: proxy.size.width,
    height: proxy.size.height - top_Inset() - bottom_Inset()
))

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