swift - SwiftUI 中的图像全屏宽度

Question

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

在body中，我返回图像对象：

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

并且图像显示出来了，但是它太大了：

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

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

Answer 1

对布局没有影响的原因.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)
}

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

注意：!除非您不确定图像名称是否是 Assets 文件夹中的有效名称，否则显式展开的可选 ( ) 应该不是问题。有关 Swift 选项的全面概述，请参阅这篇文章。

Answer 2

这是在 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()
    }
}

Answer 3

您是否尝试过调整大小的修饰符？

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

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