NavigationView内ZStack重叠圆形的对齐异常问题如何修复

问题原因 #

两个圆形的修饰符顺序错误，导致描边（stroke）被意外缩放，加上NavigationView默认布局的影响，最终出现视觉错位：

• 原代码先调用.stroke再设置.frame，会让描边随视图缩放改变实际宽度；
• 两个圆形的修饰符逻辑不一致，导致尺寸匹配失效。

修复步骤 #

1. 统一修饰符顺序：先设置.frame固定圆形尺寸，再执行trim和stroke操作，确保描边宽度不会被缩放。
2. 规范动画用法：使用带value参数的animation修饰符，避免隐式动画干扰布局。
3. 调整NavigationView布局：隐藏不需要的导航栏，保证ZStack内容在屏幕中央对齐。

修复后的代码 #

struct SpinnerView: View {
    @State private var isLoading = false

    var body: some View {
        NavigationView {
            ZStack {
                // 灰色背景圆形：先固定尺寸，再描边
                Circle()
                    .frame(width: 64, height: 64)
                    .stroke(Color(.systemGray5), lineWidth: 7)
                
                // 绿色旋转圆形：先固定尺寸，再裁剪、描边，最后添加动画
                Circle()
                    .frame(width: 64, height: 64)
                    .trim(from: 0, to: 0.2)
                    .stroke(Color.green, lineWidth: 7)
                    .rotationEffect(Angle(degrees: isLoading ? 360 : 0))
                    .animation(Animation.linear(duration: 1).repeatForever(autoreverses: false), value: isLoading)
                    .onAppear {
                        isLoading = true
                    }
            }
            .navigationBarHidden(true) // 隐藏导航栏，避免布局偏移
        }
    }
}

额外说明 #

如果需要保留导航栏，可替换.navigationBarHidden(true)为以下代码，减少导航栏高度对内容布局的影响：

.navigationTitle("")
.navigationBarTitleDisplayMode(.inline)

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