使用条件渲染在 VStack 中无法正确显示 SwiftUI 图像

Question

我正在使用 SwiftUI 开发 iOS 应用程序，并且遇到了在 VStack 中有条件地显示图像的问题。我的目标是仅在满足特定条件时才显示图像。但是，当我设置条件时，即使条件为真，图像有时也不会渲染，或者导致布局意外移动。

这是我的代码的简化版本：

import SwiftUI

struct ContentView: View {
    @State private var isImageVisible: Bool = true
    @State private var imageName: String = "example_image"

    var body: some View {
        VStack {
            Text("Toggle Image Display")
            
            Toggle("Show Image", isOn: $isImageVisible)
                .padding()

            if isImageVisible {
                Image(imageName)
                    .resizable()
                    .scaledToFit()
                    .frame(width: 100, height: 100)
                    .background(Color.gray.opacity(0.2))
            } else {
                Text("Image is hidden")
            }
        }
        .padding()
    }
}

当我切换 isImageVisible 时，图像按预期出现或消失，但有时无法加载或显示不一致。此外，当我加载较大的图像或快速切换状态时，布局会发生变化或无法平滑更新。有时，我什至会在图像应有的位置出现空白区域。

我尝试过的：

将图像包装在一个组中，但它并没有改变行为。

在 VStack 上使用 .animation(.easeInOut) 来平滑过渡，但并没有解决问题。

检查资产名称以确保其正确 - 图像存在并且应该正确渲染。

任何见解或替代方法将不胜感激！谢谢！

Answer 1

我无法重现未加载图像的问题，但如果您在调整视图大小时遇到问题，您是否考虑过将相同的框架大小（特别是高度）也委托给文本？

如，

if isImageVisible {
            Image(imageName)
                .resizable()
                .scaledToFit()
                .frame(width: 100, height: 100)
                .background(Color.gray.opacity(0.2))
        } else {
            Text("Image is hidden")
                .frame(width: 200, height: 100)
        }