SwiftUI 中的图像全屏宽度

Question

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

在body,我return图片object:

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

图像出现了，但是它太大了：

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

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

Answer 1

你试过resizable修饰符吗？

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

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

Answer 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) 版本来访问图像的原始纵横比。

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

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

SwiftUI 中的图像全屏宽度

Image full screen width in SwiftUI

swift

swiftui