在NavigationView中ProgressViewStyle动画异常问题排查

问题原因 #

• NavigationView的布局系统会对内部视图做自动对齐调整，默认情况下ProgressView会被放置在导航栏下方的居中位置，但在动画过程中，由于自定义样式里的Image没有明确尺寸约束，布局系统会反复计算视图的最佳位置，引发不必要的布局重排，最终表现为上下弹跳现象。
• 本质是无明确尺寸的视图在NavigationView的布局优先级计算中，出现了细微的尺寸/位置波动，叠加旋转动画后被放大为可见的弹跳。

解决方案（严格遵循ProgressView规范） #

通过两个关键调整即可解决问题，同时完全符合使用ProgressView+ProgressViewStyle的规范要求：

1. 给自定义样式中的Image添加固定尺寸约束 #

为旋转的Image设置明确的宽高，避免布局系统反复计算尺寸：

Image(systemName: "circle.hexagonpath.fill")
    .frame(width: 24, height: 24) // 固定尺寸，消除布局计算波动
    .rotationEffect(self.isAnimating ? .degrees(360) : .zero)
    .onAppear {
        withAnimation(.linear(duration: 1).repeatForever(autoreverses: false)) {
            self.isAnimating = true
        }
    }

2. 给ProgressView添加容器布局约束 #

让ProgressView占据NavigationView的可用空间，明确其位置，避免NavigationView的自动调整：

NavigationView {
    ProgressView()
        .progressViewStyle(SymbolicStyle())
        .frame(maxWidth: .infinity, maxHeight: .infinity) // 占满父容器，固定居中位置
}

完整修正代码 #

struct SimplePreview: PreviewProvider, View {
    static var previews = Self()
    
    @State
    private var isAnimating = false

    var body: some View {
        NavigationView {
            ProgressView()
                .progressViewStyle(SymbolicStyle())
                .frame(maxWidth: .infinity, maxHeight: .infinity)
        }
    }
    
    public struct SymbolicStyle: ProgressViewStyle {
        @State
        private var isAnimating = false

        public func makeBody(configuration: Configuration) -> some View {
            Image(systemName: "circle.hexagonpath.fill")
                .frame(width: 24, height: 24)
                .rotationEffect(self.isAnimating ? .degrees(360) : .zero)
                .onAppear {
                    withAnimation(.linear(duration: 1).repeatForever(autoreverses: false)) {
                        self.isAnimating = true
                    }
                }
        }
    }
}

补充说明 #

• 固定Image尺寸是核心：无明确尺寸时，SwiftUI会根据Image的渲染状态动态计算大小，动画过程中这种计算会被多次触发，结合NavigationView的布局逻辑就会产生弹跳。
• 占满父容器的布局设置，让ProgressView的位置被明确固定，NavigationView不会再对其进行额外的位置微调，确保旋转动画稳定运行。

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