SwiftUI中条件添加视图导致已有元素上移的解决方法

方案1：通过透明度控制视图显示，保留占位空间 #

核心思路是让动态视图始终存在于VStack中，仅通过opacity控制可见性，确保VStack总高度不变，从而固定Toggle位置。

修改后的代码：

struct ContentView: View {
    
    @State private var isOn: Bool = false
    
    var body: some View {
        VStack {
            Toggle(isOn: $isOn, label: {
                Text("ON")
            })
            
            Text("Light is on!")
                .opacity(isOn ? 1 : 0)
        }
    }
}

方案2：使用hidden修饰符隐藏视图，保留布局空间 #

hidden修饰符会隐藏视图但保留其原本的布局空间，同样能避免VStack高度变化导致的Toggle移位：

struct ContentView: View {
    
    @State private var isOn: Bool = false
    
    var body: some View {
        VStack {
            Toggle(isOn: $isOn, label: {
                Text("ON")
            })
            
            if isOn {
                Text("Light is on!")
            } else {
                Text("Light is on!")
                    .hidden()
            }
        }
    }
}

方案3：给动态视图设置固定最小高度 #

如果动态视图的高度固定，可通过minHeight为其预留空间，即使视图隐藏也不会压缩布局：

struct ContentView: View {
    
    @State private var isOn: Bool = false
    
    var body: some View {
        VStack {
            Toggle(isOn: $isOn, label: {
                Text("ON")
            })
            
            Group {
                if isOn {
                    Text("Light is on!")
                }
            }
            .frame(minHeight: 20) // 根据实际文本高度调整数值
        }
    }
}

以上方案均无需使用ZStack，完全基于VStack的布局特性解决问题，可根据实际场景选择适配方案。

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