在 SwiftUI 中用其内容填充图像

Question

我正在 SwiftUI 中创建一个 Widget，我发现我认为这是一个非常愚蠢的问题。

我有一个 Image 想用作背景。我已将它的宽高比设置为 .fill，但它似乎没有这样做。

代码如下：

var body: some View {
        ZStack {
            Image(affirmation.customImageName ?? "c_0")
                .edgesIgnoringSafeArea(.all)
                .aspectRatio(contentMode: .fill)
                .frame(width: 300, height: 300, alignment: .center)
                .background(Color.green)
            
            HStack {
                VStack {
                    Text(affirmation.title)
                        .font(.title)
                        .multilineTextAlignment(.leading)
                }
                Spacer()
            }
            .padding(.leading, 5)
            .padding(.top, 5)
            
        }
    }

它的外观：

此外，如果我删除 .frame(width: 300, height: 300, alignment: .center)，图像将不会使用整个区域。

已更新：

由于@staticVoidMan 的回答，现在图像可以调整大小，添加 resizable() 就可以了。现在的问题是 Text 似乎也比 space.

调整大小和填充更多

var body: some View {
        ZStack {
           Image(affirmation.customImageName ?? "c_0")
           .resizable()
           .aspectRatio(contentMode: .fill)
            
            HStack {
                Text(affirmation.title)
                    .font(.body)
                    .multilineTextAlignment(.leading)
                    .lineLimit(nil)
                Spacer()
            }
            .padding(.leading, 5)
            .padding(.top, 5)
            
        }

图片如下：

提前致谢

Answer 1

.resizable 是一个 Image 视图修饰符，允许它占用所需的最大 space 数量。
ZStack 默认情况下可以无限拉伸以适应其所有内部视图，因此您需要通过 .frame 修饰符定义框架，以便所有内部视图保持在定义范围内限制。

即

ZStack {
    //...
}
.frame(width: 300, height: 300)

解决方案：

ZStack(alignment: .leading) {
    Image("yourImageName")
        .resizable()
        .aspectRatio(contentMode: .fill)
        .background(Color.green)
    
    Text("Lorem ipsum dolor set amet")
        .font(.title)
        .padding(.leading, 5)
}
.frame(width: 300, height: 300)

ZStack(alignment: .leading) 将 HStack:Text|Spacer 的需求减少到 Text
.multilineTextAlignment(.leading) 是默认值，因此不需要
.lineLimit(nil) 是默认值，因此不需要

Answer 2

代码

V/Hstack({}).frame(maxWidth: .infinity, maxHeight: .infinity).background(
            Image("yourImageName")
                .resizable()
                .scaledToFill()
        )

检查你的图片 resolution.I 遇到了图片分辨率问题。分辨率值为 72x72 的图像无法实现 Widget 背景。使用 144x144 分辨率

在 SwiftUI 中用其内容填充图像

Fill Image with its content in SwiftUI

ios

swiftui

widgetkit

解决方案：