SwiftUI 中的图像全屏宽度答案

【问题标题】：Image full screen width in SwiftUISwiftUI 中的图像全屏宽度
【发布时间】：2019-10-20 11:26:57
【问题描述】：

我在 SwiftUI 应用程序中向我的身体添加了一张图片，并希望该图片覆盖设备的整个宽度，但不超过它。

在body，我返回图片对象：

var body: some View {
    Image("page-under-construction")
}

图片显示出来了，但是太大了：

我尝试设置框架：这会影响突出显示的边界，但图像不会调整大小。
结合使用.aspectRatio(contentMode:)，似乎对布局没有任何影响。

如何使图像有效地占屏幕宽度的 100%？

【问题讨论】：

标签： swift swiftui

【解决方案1】：

你试过调整大小的修饰符吗？

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

注意 - 有 2 种内容模式：.fit 和 .fill

【讨论】：

我做到了，是的。 .resizable() 修饰符确实修改了图像——它甚至具有平铺或拉伸图像的选项——但是图像不是其原始纵横比。我像你一样将它与.aspectRatio 修饰符结合起来，但这对我来说根本不影响图像......
我认为这应该是答案，只需使用内容模式，因为 .fit 会做的事情。

【解决方案2】：

.aspectRatio(contentMode:) 对布局没有影响的原因是您没有使用resizeable() 调整图像大小。

在做

var body: some View {
    Image("page-under-construction")
    .resizable()
    .aspectRatio(contentMode: .fill)
}

会导致图片是屏幕的宽度，但是不会保持图片的纵横比。要保持纵横比，请执行

var body: some View {
    Image("page-under-construction")
    .resizable()
    .aspectRatio(UIImage(named: "page-under-construction")!.size, contentMode: .fill)
}

这利用了您与虚拟 UIImage 讨论的原始问题的 .aspectRatio(aspectRatio: CGSize, contentMode: ContentMode) 版本的方法来访问图像的原始纵横比。

注意：除非您不确定图像名称是否是您的资产文件夹中的有效名称，否则显式展开的可选选项 (!) 应该不是问题。请参阅this post 以全面了解 Swift 选项。

【讨论】：

我确实找到并试用了.resizable，甚至与.aspectRatio 结合使用，但我没有提供aspectRatio: CGSize。感谢您的提示！
没问题！很高兴我能帮上忙！

【解决方案3】：

这是在 SwiftUI 中添加背景图像并使其填满全屏的方法

import SwiftUI

struct ContentView: View {
    var body: some View {
        ZStack {
            Image("background")
                .resizable()
                .aspectRatio(contentMode: .fill)
                .edgesIgnoringSafeArea(.top)
        }
    }
}

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

【讨论】：

感谢edgesIgnoringSafeArea