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的大小和填充空间似乎也超过了其空间。

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的视图修改器，它可以占用所需的最大空间。
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()
        )

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

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

2 个答案:

解决方案：