swift – Distinction in Spacer habits between systemSmall and systemMedium in iOS Widget growth

I’m growing an iOS widget and encountered a problem the place the format behaves in another way between systemSmall and systemMedium sizes.

As proven within the connected picture, the highest and backside components which might be seen within the systemSmall widget don’t seem within the systemMedium model. Nevertheless, the code is the just about similar for each sizes, and I can’t discover any layout-related situations that may have an effect on this habits.

Right here’s some context on the widget construction:

• The foundation format makes use of a ZStack to position a background behind the content material.
• The content material is constructed with a VStack, containing three sections: high, center, and backside.
• I take advantage of Spacer() between every part to distribute them vertically.
• There doesn’t appear to be any conditional logic affecting the format based mostly on the widget measurement.

Right here is the related code snippet:

import Basis
import SwiftUI
import WidgetKit

struct TodayQuestionProvider: TimelineProvider {
  func placeholder(in context: Context) -> TodayQuestionEntry {
    TodayQuestionEntry(date: Date(), query: "Right this moment Query")
  }

  func getSnapshot(in context: Context, completion: @escaping (TodayQuestionEntry) -> Void) {
    let entry: TodayQuestionEntry
    if context.isPreview {
      entry = placeholder(in: context)
    } else {
      let query = "Right this moment Query"
      entry = TodayQuestionEntry(date: Date(), query: query)
    }
    completion(entry)
  }

  func getTimeline(in context: Context, completion: @escaping (Timeline) -> Void) {
    getSnapshot(in: context) { (entry) in
      let timeline = Timeline(entries: [entry], coverage: .atEnd)
      completion(timeline)
    }
  }
}

struct TodayQuestionEntry: TimelineEntry {
  let date: Date
  let query: String
}

struct TodayQuestionWidgetEntryView: View {
  var entry: TodayQuestionProvider.Entry

  @Atmosphere(.colorScheme) var colorScheme
  @Atmosphere(.widgetFamily) var household

  non-public func formattedDate() -> String {
    let formatter = DateFormatter()
    formatter.locale = Locale(identifier: "ko_KR")
    formatter.dateFormat = "EEEE" 
    return formatter.string(from: entry.date)
  }

  var physique: some View {
    ZStack {
      Rectangle()
        .foregroundColor(.clear)
        .background(
          colorScheme == .darkish
            ? LinearGradient(
              stops: [
                Gradient.Stop(color: Color(red: 0.27, green: 0.27, blue: 0.27), location: 0.00),
                Gradient.Stop(color: .black, location: 0.67),
              ],
              startPoint: UnitPoint(x: 0.5, y: 0),
              endPoint: UnitPoint(x: 0.5, y: 1)
            )
            : LinearGradient(
              stops: [
                Gradient.Stop(color: .white, location: 0.20),
                Gradient.Stop(color: Color(red: 0.91, green: 0.91, blue: 0.91), location: 1.00),
              ],
              startPoint: UnitPoint(x: 0.5, y: 0),
              endPoint: UnitPoint(x: 0.5, y: 1)
            )
        )
        .scaledToFill()

      VStack(spacing: 0) {
        HStack {
          Textual content(formattedDate())
            .font(Font.customized("Pretendard", measurement: 13).weight(.medium))
            .foregroundColor(Colour(purple: 0.6, inexperienced: 0.6, blue: 0.6))
            .padding(.main, 16)

          Spacer()
        }
        .padding(.high, 12)
        .body(maxHeight: household == .systemMedium ? 24 : nil)

        Spacer(minLength: 2)

        // ISSUE: Proven solely this textual content when systemMedium
        Textual content(entry.query)
          .font(
            Font.customized(
              "Pretendard",
              measurement: household == .systemSmall ? 16 : 20
            ).weight(household == .systemSmall ? .semibold : .daring)
          )
          .foregroundColor(
            colorScheme == .darkish
              ? Colour(purple: 0.73, inexperienced: 0.73, blue: 0.73)
              : .black
          )
          .body(maxWidth: .infinity, alignment: .main)
          .padding(.horizontal, 16)
          .body(maxHeight: household == .systemMedium ? 79 : nil)

        Spacer(minLength: 2)

        HStack(spacing: 7) {
          ZStack {
            RoundedRectangle(cornerRadius: 30)
              .fill(colorScheme == .darkish ? .white : .black)

            HStack(spacing: 2) {
              Picture("Plus")
                .resizable()
                .body(width: 20, peak: 20)
              Textual content("Submit")
                .font(Font.customized("Pretendard", measurement: 14).weight(.semibold))
                .foregroundColor(colorScheme == .darkish ? .black : .white)
            }
          }
          .body(peak: 32)
          .body(maxWidth: .infinity)

          ZStack {
            RoundedRectangle(cornerRadius: 30)
              .fill(colorScheme == .darkish ? .white : .black)

            HStack(spacing: 2) {
              Picture("Refresh")
                .resizable()
                .body(width: 20, peak: 20)
              if household == .systemMedium {
                Textual content("Refresh")
                  .font(Font.customized("Pretendard", measurement: 14).weight(.semibold))
                  .foregroundColor(colorScheme == .darkish ? .black : .white)
              }
            }
          }
          .body(peak: 32)
          .body(width: household == .systemSmall ? 32 : nil)
          .body(maxWidth: household == .systemSmall ? nil : .infinity)
        }
        .padding(.horizontal, 8)
        .padding(.backside, 7)
        .body(maxHeight: household == .systemMedium ? 32 : nil)
      }
    }
  }
}

struct TodayQuestionWidget: Widget {
  let variety: String = "TodayQuestionWidget"

  var physique: some WidgetConfiguration {
    let configuration = StaticConfiguration(variety: variety, supplier: TodayQuestionProvider()) {
      entry in
      if #accessible(iOS 17.0, *) {
        TodayQuestionWidgetEntryView(entry: entry)
          .containerBackground(.fill.tertiary, for: .widget)
      } else {
        TodayQuestionWidgetEntryView(entry: entry)
      }
    }
    .configurationDisplayName("Right this moment Query")
    .description("Examine as we speak's query and write a log")
    .supportedFamilies([.systemSmall, .systemMedium])

    if #accessible(iOS 15.0, *) {
      return configuration.contentMarginsDisabled()
    }
    return configuration
  }
}

#Preview(as: .systemMedium) {
// #Preview(as: .systemSmall) {
  TodayQuestionWidget()
} timeline: {
  TodayQuestionEntry(date: .now, query: "Textual content on widget, textual content on widget, textual content on widget")
}

I’m questioning what is perhaps inflicting this discrepancy in format rendering.
Is there one thing about how Spacer behaves in another way in systemSmall vs. systemMedium?

Any assist can be appreciated!