如何避免ProgressView出现时SwiftUI其他View发生轻微位移？

问题根源是当status == .connecting时，ProgressView被动态添加到布局中，占用了额外空间，导致VStack内的其他视图重新分配空间产生位移。以下是几种可行的解决方式：

方法一：用opacity控制显示（推荐） #

让ProgressView始终存在于布局结构中，仅通过透明度控制可见性，这样不会改变整体布局的空间分配：

var body: some View {
    NavigationView {
        ZStack {
            Color.red.ignoresSafeArea(.all)
            VStack {
                Spacer()
                
                VStack {
                    myView
                    mySmallView
                }
                
                Spacer()
                
                bigView
                
                Spacer()
                // 始终保留视图，通过opacity切换显示/隐藏
                ProgressView()
                    .progressViewStyle(CircularProgressViewStyle(tint: .white))
                    .padding()
                    .opacity(status == .connecting ? 1 : 0)
                
                Spacer()
                buttonView
                Spacer()
            }
        }
    }
}

方法二：用ZStack叠加ProgressView #

将ProgressView独立叠加在布局上方，不占用VStack的布局空间，完全避免对其他视图的位置影响：

var body: some View {
    NavigationView {
        ZStack {
            Color.red.ignoresSafeArea(.all)
            VStack {
                Spacer()
                
                VStack {
                    myView
                    mySmallView
                }
                
                Spacer()
                
                bigView
                
                Spacer()
                Spacer()
                buttonView
                Spacer()
            }
            // 叠加ProgressView到指定位置，不干扰原有布局
            if status == .connecting {
                ProgressView()
                    .progressViewStyle(CircularProgressViewStyle(tint: .white))
                    .padding()
                    // 可根据需求调整位置，比如放在bigView和buttonView之间
                    .position(x: UIScreen.main.bounds.width/2, y: UIScreen.main.bounds.height*0.7)
            }
        }
    }
}

方法三：给条件块添加固定高度占位 #

确保无论ProgressView是否显示，该区域的高度保持一致，避免布局重排：

var body: some View {
    NavigationView {
        ZStack {
            Color.red.ignoresSafeArea(.all)
            VStack {
                Spacer()
                
                VStack {
                    myView
                    mySmallView
                }
                
                Spacer()
                
                bigView
                
                Spacer()
                Group {
                    if status == .connecting {
                        ProgressView()
                            .progressViewStyle(CircularProgressViewStyle(tint: .white))
                            .padding()
                    } else {
                        // 占位视图，高度匹配ProgressView显示时的实际高度
                        Color.clear.frame(height: 40)
                    }
                }
                Spacer()
                buttonView
                Spacer()
            }
        }
    }
}

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