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