如何解决SwiftUI中.resizable()在资源图不存在时占用空白的问题？

我开发答题应用时遇到一个问题：部分题目配有本地资源图，部分没有。希望有图时显示图片，无图时让题目文本直接占据原本图片的位置，但给Image加.resizable()修饰符后，找不到对应图片时会出现一块难看的空白。

解决思路 #

SwiftUI的Image组件在找不到指定资源时会默认显示空白区域，因此核心解决方案是提前判断图片资源是否存在，仅在存在时渲染Image视图。

修改后的完整代码 #

import SwiftUI

struct Question {
    var text: String
}

// 扩展UIImage，添加图片存在性检查方法
extension UIImage {
    static func exists(named name: String) -> Bool {
        return UIImage(named: name) != nil
    }
}

struct ContentView: View {
    @State var questionNumber = 0
    
    var questions = [
        Question(text: "题目0在资源文件夹中有对应图片"),
        Question(text: "题目1在资源文件夹中没有对应图片"),
    ]
    
    var body: some View {
        VStack {
            VStack {
                // 仅当图片存在时才渲染Image组件
                if UIImage.exists(named: "\(questionNumber)") {
                    Image("\(questionNumber)")
                        .resizable()
                        .scaledToFit()
                }
                Text(questions[questionNumber].text)
            }
            .padding()
            
            Spacer()
            
            HStack {
                Button {
                    questionNumber = 0
                } label: {
                    Text("显示题目0")
                }
                
                Button {
                    questionNumber = 1
                } label: {
                    Text("显示题目1")
                }
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

代码说明 #

1. 图片存在性检查：通过扩展UIImage添加exists(named:)方法，判断指定名称的图片是否存在于资源目录中
2. 条件渲染Image：用if语句包裹Image组件，只有当图片存在时才会渲染该视图，不存在时直接跳过，避免空白区域出现
3. 布局自适应：无图时，题目文本会自动上移，占据原本图片的位置，符合预期布局效果

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