ios - 在 SwiftUI 中使用其内容填充图像

Question

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

我有一个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)
            
        }
    }

以及它的外观：

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

更新：

现在，由于@staticVoidMan 的回答，图像调整了大小，添加resizable()就可以了。现在的问题是，Text似乎也调整大小和填充比它的空间更多。

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

1. .resizable是一个Image视图修饰符，允许它占据所需的最大空间。

2. ZStack默认情况下可以无限拉伸以适应它的所有内部视图，因此您需要通过.frame修饰符定义框架，以便所有内部视图都保持在定义的范围内。

IE

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

1. 代码

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

2. 检查您的图像分辨率。我遇到了图像分辨率问题。分辨率值为72x72的图像无法满足 Widget 背景。使用144x144分辨率的图像