SwiftUI使用resizable修饰符时如何让占位图尺寸小于实际图片

实现方案 #

你可以通过条件判断区分实际图片和占位图两种场景，仅给实际加载的图片添加.resizable()修饰符即可，公共的样式修饰符可以统一挂载在外层容器上，避免重复代码。

修改后完整代码：

import SwiftUI

struct NewCarFormView: View {
    
    @State private var inputImage: UIImage?
    
    var body: some View {
        VStack{
            Spacer()
            Group {
                if let inputImage = inputImage {
                    // 仅实际加载的图片添加resizable修饰符
                    Image(uiImage: inputImage)
                        .resizable()
                        .scaledToFill()
                } else {
                    // 占位图不添加resizable，保持原始尺寸
                    Image(uiImage: UIImage(named: "car-placeholder")!)
                }
            }
            .frame(width: 100, height: 100, alignment: .center)
            .cornerRadius(10)
            .background(Color.blue)
            .padding(5)
            .border(Color.blue, width: 5)
            .cornerRadius(10)

            Button(action: {
                // show image picker
            }) {
                HStack{
                    Text("Picture")
                    Image(systemName: "camera")
                }
            }
        }
    }
}

逻辑说明

外层的Group容器统一承载了frame、圆角、边框等公共样式，两种场景下的图片都会被限制在100*100的区域内。占位图没有添加resizable()，会保持自身原始尺寸居中展示，不会被拉伸变形；实际加载的图片添加了resizable()，会按你设置的填充规则适配区域大小。如果需要调整实际图片的填充效果，可以替换scaledToFill()为scaledToFit()适配需求。

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