skip to Main Content

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)
  }
}

2

Answers


  1. Chosen as BEST ANSWER

    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)
    )
    

  2. You need to use the new preview method. E.g.

    @available(iOS 17.0, *)
    #Preview("My iOS 17+ previews", as: .systemSmall) {
        MyWidget()
    } timeline: {
        MyWidgetEntry.sample0
        MyWidgetEntry.sample1
        MyWidgetEntry.sample2
    }
    

    But note that it works only for iOS 17+ preview devices.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search