iOS 14 Medium Widget Size Background Image Refuses to Fill

Question

For some reason I'm unable to get an image background to aspectFill correctly in XCode Version 12.0, but only on the .systemMedium widget size. It seems to work perfectly on the small and large sizes.

I've got a pretty simple View:

import SwiftUI

@available(iOS 13.0.0, *)
struct Banana: View {

    var body: some View {
        VStack(alignment: .leading){
            Spacer()
            Text("Aardvark Exactlywhat")
                .font(.largeTitle)
                .bold()
                .padding(.bottom, 20)
                .padding(.leading, 20)
                .padding(.trailing, 20)
                .minimumScaleFactor(0.5)
                .foregroundColor(.white)
                .shadow(
                    color: Color.black,
                    radius: 1.0,
                    x: CGFloat(4),
                    y: CGFloat(4))
        }
        .edgesIgnoringSafeArea(.all)
        .background(
            Image("bananas")
                .resizable()
                .scaledToFill()
        ).edgesIgnoringSafeArea(.all)
    }
}

@available(iOS 13.0.0, *)
struct Banana_Previews: PreviewProvider {
    static var previews: some View {
        Banana()
    }
}

And a pretty simple widget:

struct fruitWidgetEntryView : View {
    var entry: Provider.Entry

    var body: some View {
        Banana()
    }
}

@main
struct fruitWidget: Widget {
    let kind: String = "fruitWidget"
    
    var body: some WidgetConfiguration {
        StaticConfiguration(kind: kind, provider: Provider()) { entry in
            fruitWidgetEntryView(entry: entry)
        }
        .configurationDisplayName("fruit Widget")
        .description("Enhance your day with delicious fruit.")
        .supportedFamilies([.systemSmall, .systemMedium, .systemLarge])
    }
}

struct fruitWidget_Previews: PreviewProvider {
    static var previews: some View {
        Group{
            fruitWidgetEntryView(entry: SimpleEntry(date: Date()))
                .previewContext(
                    WidgetPreviewContext(family: .systemSmall))
            fruitWidgetEntryView(entry: SimpleEntry(date: Date()))
                .previewContext(
                    WidgetPreviewContext(family: .systemMedium))
            fruitWidgetEntryView(entry: SimpleEntry(date: Date()))
                .previewContext(
                    WidgetPreviewContext(family: .systemLarge))
        }
    }
}

我尝试使用 GeometryReader 和 frame() 以及其他十几种变体来更改纵横比。无论我尝试什么，我都会在中等小部件的左侧和右侧获得空白。它仅适用于大尺寸和小尺寸。见图片：

Answer 1

这是固定变体 - 作为背景中的图像，您必须扩展VStack到全屏。

注意：edgesIgnoringSafeArea当内容较宽时允许超出安全区域，但不允许内容较宽。

var body: some View {
    VStack(alignment: .leading){
        Spacer()
        Text("Aardvark Exactlywhat")
            .font(.largeTitle)
            .bold()
            .padding(.bottom, 20)
            .padding(.leading, 20)
            .padding(.trailing, 20)
            .minimumScaleFactor(0.5)
            .foregroundColor(.white)
            .shadow(
                color: Color.black,
                radius: 1.0,
                x: CGFloat(4),
                y: CGFloat(4))
    }
    .frame(maxWidth: .infinity, maxHeight: .infinity)   // << this one !!
    .edgesIgnoringSafeArea(.all)
    .background(
        Image("plant")
            .resizable()
            .scaledToFill()
    )
}