swift - SwiftUI中的图片全屏宽度

Question

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

在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文件夹中的有效名称，否则显式展开的可选( !)应该不会成为问题。有关Swift可选组件的全面概述，请参见 this post。