调整大小时，SwiftUI Image 组件会缩小答案

【问题标题】：SwiftUI Image component shrinks when resized调整大小时，SwiftUI Image 组件会缩小
【发布时间】：2019-10-24 14:24:37
【问题描述】：

我一直在测试 SwiftUI，我想你们中的大多数人也有。我遇到了一个奇怪的问题，很可能是一个错误，但也许其他人已经找到了解决方法。

var body: some View {
    Image("profilepic")
        .resizable()
        .aspectRatio(contentMode: .fit)
}

在正常情况下，我希望图像可以调整大小并在屏幕上留出较大的边距，因为我将内容模式设置为适合，如果我使用填充，它只会填满整个屏幕。

拟合效果很好，但图像没有保持纵横比，它缩小了。

如果您遇到此问题并知道如何解决，请告诉我。

【问题讨论】：

标签： ios swift iphone swiftui

【解决方案1】：

我也有这个问题，看起来这是测试版错误。我建议保持原样并等待 Apple 的修复。

如果您确实需要正确的图像，您可以为 SwiftUI 创建自定义视图结构

struct FixedImage: UIViewRepresentable {

    var imageName: String

    func makeUIView(context: Context) -> UIImageView {
        let imageView = UIImageView(image: UIImage(named: imageName))
        imageView.contentMode = .scaleAspectFit
        return imageView
    }

    func updateUIView(_ uiView: UIImageView, context: Context) {
        uiView.image = UIImage(named: imageName)
    }
}

【讨论】：

Duude，我有这个用于延迟加载 UIImage 的，我不知道为什么我没有想到为 UIImageView 这样做?

【解决方案2】：

在尝试将图像缩小为列表视图的缩略图时遇到同样的问题...没有任何效果。我在尝试上面 Lex 建议的修复时也遇到了错误。所以我对其进行了修改...扩展视图协议，具有计算和返回图像纵横比的功能...

extension View {
    func calcImageAspectRatio(_ imageName: String) -> Length?
    {
        if let image = UIImage(named: imageName) {
            let size = image.size
            return size.width / size.height
        }
        return nil
    }
}

extension ExerciseList {
    struct ExerciseCell : View {
        let exercise: Exercise

        var body: some View {
            HStack {
                Image(exercise.visuals)
                    .resizable()
                    .aspectRatio(calcImageAspectRatio(exercise.visuals), contentMode: .fit)
                    .frame(width: 100, height: 100, alignment: .center)
                Text(exercise.title)
            }
        }
    }
}

【讨论】：

在我的情况下，我们没有缩小默认图像，但在 Image() 中更改图像会导致图像缩小。现在它适用于这种纵横比计算，谢谢。

【解决方案3】：

这解决了收缩问题

Image(uiImage:self.selectedImage)
.resizable()
.aspectRatio(self.selectedImage.size, contentMode: .fit)

【讨论】：

【解决方案4】：

public var body: some View {

    let size = UIImage(named: "at")!.size
    let aspect = size.width / size.height

    let img = Image("at")
        .resizable()
        .aspectRatio(aspect, contentMode: .fill)
        .frame(width: 200, height: 200, alignment: .center)
        .clipShape(Circle())
        .shadow(radius: 10)
    return img
}

【讨论】：

这是一个很好的解决方法。但是，如果视图更复杂，则会出现错误“包含声明的闭包不能与函数构建器'ViewBuilder'一起使用”。所以你需要计算飞行的纵横比（不带变量）
@DenFav 您能否提供您描述的复杂视图的代码示例？
无法将其发送到私聊，为什么 var body: some View { let size = UIImage(named: car.imageName)!.size let aspect = size.width / size.height ZStack(alignment: . topLeading) { Image(car.imageName) .resizable() .aspectRatio(aspect, contentMode: .fill) .frame(width: 200, height: 200, alignment: .center) .clipShape(Circle()) .shadow(radius : 10) }}
@DenFav 您希望将此图像对齐到左上角，对吧？ this 怎么样？如果忽略对齐参数，只需使用垫片操纵图像的位置
@DenFav 顺便说一句，如果您在示例中将图像更改为文本，则没有任何变化，它仍然会垂直和水平居中，所以也许这不是图像问题，而是视图的结构