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)
}

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

注意：除非您不确定图像名称是否是Assets文件夹中的有效名称，否则显式展开的可选（!）应该不会成为问题。请参阅this post，以获取有关Swift可选项的全面概述。

Answer 2

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

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

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

Answer 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()
    }
}