Tips

[sindresorhus]

Share some SwiftUI quick tips.

---

Addition guidelines:

• Use ### Title for the tip title.
• Check your grammar.
• Ensure your example code is runnable.

[sindresorhus]

I'll start.

---

Capture the previous value in View#onChange

someView.onChange(of: nameText) { [oldValue = nameText] newValue in 
	print("Old:", oldValue)
	print("New:", newValue)
}

[sindresorhus]

What’s the difference between a background view and a ZStack?

A background view (.background()) takes the size of the content, while ZStack will be as big as its biggest child.

[j-f1]

overlay is similar, and I believe both allow the overlaying/background view to extend past the edges of the main view without affecting the rest of the layout.

[sindresorhus]

Picker with optional value

You need to explicitly coerce the value given to .tag() to be optional.

private struct RefreshIntervalSetting: View {
	@State private var refreshInterval: TimeInterval?

	private let intervals = [
		1000,
		2000,
		3000
	]

	var body: some View {
		Picker(
			"Refresh Interval",
			selection: $refreshInterval
		) {
			Text("None")
				.tag(nil as TimeInterval?)
			ForEach(intervals, id: \.self) { interval in
				Text("\(interval)")
					.tag(interval as TimeInterval?)
			}
		}
	}
}

You could also just wrap it in Optional:

.tag(Optional(interval))

[sindresorhus]

macOS preferences window

@main
struct AppMain: App {
	var body: some Scene {
		Settings {
			TabView {
				Text("General Pane")
					.tabItem {
						Label("General", systemImage: "gearshape")
					}
				Text("Advanced Pane")
					.tabItem {
						Label("Advanced", systemImage: "gearshape.2")
					}
			}
			.frame(width: 400, height: 200)
		}
	}
}

[jgoldhammer]

Settings is only available in Big Sur. Is there anything for macos Catalina for SwiftUI?

[sindresorhus]

You can present a normal AppKit window or use Preferences.

[sindresorhus]

Optional is a View

Which means you can do stuff like:

view.background(isLoaded ? nil : ProgressView())

Even though the .background() modifier doesn’t accept nil explicitly.

[helje5]

Small clarification: Only an Optional which wraps a View is a View (that's why you can't use an untyped nil).
Another common variant of using the feature: locationDtails.flatMap { DetailView($0) }.

[sindresorhus]

Multiple sheet/popover/alert's attached to the same element

You cannot currently have multiple sheets, for example, attached to the same element (FB7367599).

We can work around this with some extensions:

extension View {
	/// This allows multiple sheets on a single view, which `.sheet()` doesn't.
	func sheet2<Content: View>(
		isPresented: Binding<Bool>,
		onDismiss: (() -> Void)? = nil,
		@ViewBuilder content: @escaping () -> Content
	) -> some View {
		background(
			EmptyView().sheet(
				isPresented: isPresented,
				onDismiss: onDismiss,
				content: content
			)
		)
	}

	/// This allows multiple alerts on a single view, which `.alert()` doesn't.
	func alert2(
		isPresented: Binding<Bool>,
		content: @escaping () -> Alert
	) -> some View {
		background(
			EmptyView().alert(
				isPresented: isPresented,
				content: content
			)
		)
	}

	/// This allows multiple popovers on a single view, which `.popover()` doesn't.
	func popover2<Content: View>(
		isPresented: Binding<Bool>,
		attachmentAnchor: PopoverAttachmentAnchor = .rect(.bounds),
		arrowEdge: Edge = .top,
		@ViewBuilder content: @escaping () -> Content
	) -> some View {
		background(
			EmptyView().popover(
				isPresented: isPresented,
				attachmentAnchor: attachmentAnchor,
				arrowEdge: arrowEdge,
				content: content
			)
		)
	}
}

[sindresorhus]

Only show loading indicator after 1 second

This can be useful to prevent flashing when content loads quickly.

if isLoading {
	LoadingView()
		.transition(.opacity)
		.animation(
			Animation
				.easeIn(duration: 0.5)
				.delay(1)
		)
}

[helje5]

Detect taps on Spacer

Sometimes you have a container like that:

HStack {
  Text("Title:")
  Spacer()
  Text("Blub")
}
.onTapGesture { print("Title tapped!") }

Even the though the tap surrounds the HStack, it is not invoked when tapping in the Spacer area. This is one option to fix it:

HStack {
  Text("Title:")
  Spacer()
  Text("Blub")
}
.contentShape(Rectangle())
.onTapGesture { print("Title tapped!") }

[helje5]

Show a fullscreen gradient background, but still position in the safe area

The ignoresSafeArea modifier can be used to stretch a View to the full size of the iDevice screen. However, one often only wants this for drawing a background (e.g. a nice gradient), with the content parts of the app still within the safe area.

Applying the ignoresSafeArea within a background makes it work:

ContentView()
  .background(
    LinearGradient(gradient: theGradient, startPoint: .top, endPoint: .bottom)
      .ignoresSafeArea()
  )

Example: app screenshot.

[equinusocio]

Pass a View as the content of another View

struct WrapperView<ContentView: View>: View {
  let content: ContentView

  init(@ViewBuilder content: () -> ContentView) {
    self.content = content()
  }
  
  var body: some View {
      
    // render here children View 
      content
  }
}

Usage:

WrapperView() {
   AnotherView()
}

[helje5]

You don't need the @escaping here, the closure is not actually escaping but evaluated as part of the init call. Sometimes it makes sense to store the closure instead of the resolved view (e.g. if you want to evaluate lazily or multiple times), in those cases you'd need the @escaping.

BTW: This might be a style preference, but you can leave out the () in the usage:

WrapperView {
   AnotherView()
}

[equinusocio]

Is it dangerous to keep the escape even if not needed, as a "best practice"?

[helje5]

No, it's not a "best practice", it is a "bad practice" :-) Which is why @escaping was removed as the default in Swift (it used to be the default).

Swift will show an error if you try to use a non-escaping closure in an escaping context. There is nothing dangerous about it.

The difference is that @escaping is significantly more expensive, it essentially turns each call into an own, allocated object. While a non-escaping closure call just uses the values on the stack for the things it captures. Remember that SwiftUI Views are regenerated all the time, so it's not a one time expense.

[equinusocio]

Got it. Thanks

[helje5]

Initialize dependent @StateObject's

Sometimes you may want to preconfigure a @StateObject within a child View when it is setup for the first time. Example:

struct RemoteImageView: View {

  @StateObject private var fetchState : ImageFetchState
  
  init(imageURL: URL) {
    _fetchState = .init(wrappedValue: ImageFetchState(url: imageURL))
  }
  
  var body: some View {
    fetchState.image.flatMap { Image(uiImage: $0)}
  }
}

struct MyImages: View {
  var body: some View {
    RemoteImageView(imageURL: URL("https://zeezide.de/images/logo.gif")!)
    RemoteImageView(imageURL: URL("https://zeezide.de/images/contact.gif")!)
  }
}

Remember that just like @State variables, the @StateObject will only be setup once and then get reused! I.e. invoking RemoteImageView with a different URL on a second run won't have any effect. Careful that you understand the lifetime of SwiftUI State when using this construct.

Why does this work, won't it resetup the ImageFetchState on each run? It works because the argument to StateObject.init(wrappedValue:) is an @autoclosure. I.e. it isn't evaluated immediatly, but only when the object isn't available already (it isn't free either, the closure will capture on each init, but at least it won't initialise the object).

[DivineDominion]

Related write-up with tips:
Jordan Morgan: "On Apple's Guidance for StateObject Initialization", 2023-04-20, https://www.swiftjectivec.com/dependency-injection-with-state-object-swiftui/

TLDR: to re-set the state, use .id(...)

[helje5]

Platform specific modifiers

Not all API is available on all platforms, for example navigationBarTitle (not on macOS). Unfortunately something like this doesn't work:

MyView()
  #if !os(macOS)
    .navigationBarTitle("xyz")
  #endif

@sindresorhus provided a nice example on how to approach this on StackOverflow. I modified that a little:

extension View {
  /**
   * Run a modifying closure on the View. This can be used for per OS
   * switches, like:
   *
   *     MyView()
   *       .modify {
   *         #if os(macOS)
   *           $0
   *         #else
   *           $0.navigationBarTitle("XYZ")
   *         #endif
   *       }
   */
  @inlinable
  func modify<T: View>(@ViewBuilder modifier: ( Self ) -> T) -> T {
    return modifier(self)
  }
}

Don't forget to return $0, otherwise you end up with an EmptyView.

Forum discussion: https://forums.swift.org/t/swiftui-extension-for-os-specific-view-modifiers-that-seems-too-arcane-to-implement/30897/11

[helje5]

I think the #ifs do work now as well, might have been a Swift 5.5 feature.