SwiftUI Widget Previews have a padding in iOS 17 / Xcode 15

101 Views Asked by At

After iOS 17 / Xcode 15 the previews for my widgets are inset and squeezed into the view.

SwiftUI preview issue

I added a .contentMarginsDisabled() modifier to the intent, which fixes this in the actual widgets on a device, but the previews still show it with the padding.

struct SmallWidgetView_Previews: PreviewProvider {
  static var previews: some View {
    ForEach(BasketballWidgetEntry.mockEntries) { entry in
      GeometryReader { geometry in
        SmallWidgetView(
          entry: entry,
          width: geometry.size.width,
          height: geometry.size.height,
          colorSet: .colorSetOrange
        )
      }
      .previewContext(
        WidgetPreviewContext(family: .systemSmall)
      )
    }
  }
}
@main
struct BasketballWidgetAppWidget: Widget {
  let kind: String = "BasketballWidgetAppWidget"

  var body: some WidgetConfiguration {
    IntentConfiguration(
      kind: kind,
      intent: ConfigurationIntent.self,
      provider: Provider()
    ) { entry in
      WidgetEntryView(entry: entry)
    }
    .configurationDisplayName("Basketball Team Scores")
    .description("You favorite team's basketball team scores")
    .supportedFamilies([
      .systemSmall,
      .systemMedium,
      .systemLarge,
      .accessoryCircular
    ])
    .contentMarginsDisabled()
  }
}

What am I possibly missing here? :)

// Update As requested here is also the implementation of SmallWidgetView

struct SmallWidgetView: View {
  let entry: BasketballWidgetEntry
  let width: CGFloat
  let height: CGFloat
  let colorSet: WidgetColorSet

  var body: some View {
    let index = entry.favoriteIndex

    VStack(spacing: 0) {
      StandingsListSmall(
        entry: entry,
        favoriteIndex: index,
        width: width,
        colorSet: colorSet
      )
      .padding(.bottom, 0)
    }
    .font(.caption)
    .frame(width: width, height: height, alignment: .center)
    .backgroundColor(colorSet.backgroundMain)
    .overlay(
      NextGameSmallWidgetView(
        width: width,
        match: MatchFunctions.getNextMatch(matches: entry.matches),
        favoriteId: entry.favoriteId,
        colorSet: colorSet
      ),
      alignment: .bottom
    )
    .overlay(
      FavoriteTeamHeader(
        entry: entry,
        index: index,
        width: width,
        colorSet: colorSet
      ),
      alignment: .topLeading
    )
    .widgetBackground(Color.black)
  }
}

1

There are 1 best solutions below

0
matthias_code On

Found a workaround! Apparently at the moment the GeometryReader, when used in WidgetPreviews, is not getting the full size of the widget.

Adding a negative padding of 16 fixes this for the previews.

GeometryReader { geometry in
  SmallWidgetView(
    entry: entry,
    width: geometry.size.width,
    height: geometry.size.height,
    colorSet: .colorSetOrange
  )
}
.padding(-16)
.previewContext(
  WidgetPreviewContext(family: .systemSmall)
)