What’s New In SwiftUI for iOS Cheat Sheet - WWDC22

By Big Mountain Studio

A list of everything new in SwiftUI after WWDC 2022.

Working with Data

Environment Values

• accessibilityQuickActionsEnabled - Shows quick action bar.
• renameAction - Activates standard rename action.
• menuOrder - The preferred order of items for menus.
• searchSuggestionsPlacement - The current placement of search suggestions.
• isScrollEnabled - Can or can’t scroll.
• horizontalScrollIndicatorVisibility - Can or can’t see horizontal scroll indicators.
• verticalScrollIndicatorVisibility - Can or can’t see vertical scroll indicators.
• scrollDismissesKeyboardMode - Dismiss keyboard when scrolling, never, automatically based on context or allow user to choose.
• supportsMultipleWindows - Check if platform allows multiple windows.
• displayStoreKitMessage - Tells StoreKit to display an App Store message
• requestReview - Ask user to review your app.
• autocorrectionDisabled - Allow auto-correct or not.
• backgroundStyle - Overrides the default system background style.
• contentTransition - Method of animating the contents of views.
• contentTransitionAddsDrawingGroup - Transition with GPU-acceleration or not.
• showsWidgetLabel - Tells you if you can or can’t display an accessory label.

SwiftUI Views

New Controls

• AnyLayout - A view that can represent a container view such as a VStack, HStack, grids, etc.
• Chart - A SwiftUI view that displays a chart.
• Gauge - A view that shows a value within a range. This can be circular or straight.
• Grid - A container view that arranges other views in a two dimensional layout with the use of the GridRow.
• LabeledContent - A container for attaching a label to a value-bearing view. This way it can layout appropriately depending on where it’s used. For example, if in a Form, the label will be leading and the content portion will be trailing and gray.
• Layout Protocol - A new protocol that you can conform to so you can create your own custom layout container control.
• MultiDatePicker - A control for picking multiple dates.
• NavigationStack - A view that displays a root view and enables you to present additional views over the root view. To navigate, use a NavigationLink in combination with the navigationDestination modifier. You can also specify a NavigationPath to create or manage your stack of views.
• NavigationSplitView - A container that presents 2 or 3 views in columns. (sidebar, content, detail)
• PhotosPicker - A view that displays a Photos picker for choosing assets from the photo library. A selected photo is represented by a PhotosPickerItem.
• RenameButton - A button that triggers a standard rename action. Used with the renameAction modifier.
• ShareLink - A view that controls a sharing presentation.
• Table - A container that presents rows of data arranged in one or more columns, optionally providing the ability to select one or more members, sort data, and style it.
• ViewThatFits - A container view that adapts to the available space by providing the first child view that fits.

Updated Controls

Color

• Has a new fixed gradient modifier that seems to lighten the color at the top in a linear gradient.
• You can apply a shadow directly to a color too.
• Shadows can now be drop or inner shadows.

NavigationLink

• You can still use a basic NavigationLink with a string and destination. (NavigationLink("Go here") { Text("Here") }
• Also works in combination with the navigationDestination modifier. NavigationLinks have values and if there is a navigationDestination modifier that matches the NavigationLink’s value type, then it is used and navigates to the view the navigationDestination specifies.

Stepper

• You can provide a format parameter to handle conversions for number, percent, dateTime, iso8601 date format and now URL format.

Toggle

• You can bind a Toggle to a collection of values.
• Multiple Text views within will be arranged hierarchically. (Second line less prominent than first line.)

Accessibility Modifiers

• accessibilityActions - Adds multiple accessibility actions to the view.
• accessibilityQuickAction - Adds a quick action to be shown by the system when active.
• AccessibilityQuickActionStyle - Presentation style of an accessibility quick action. (Outline, Prompt)

Appearance Modifiers

• backgroundStyle - Sets the specified style to render backgrounds within the view.
• tint(ShapeStyle) - Sets the tint within this view using a ShapeStyle (which can be a color, gradient, blur, etc).
• scrollDisabled - Disables or enables scrolling in scrollable views.
• menuOrder - The preferred order of items for menus. (Fixed, Priority)
• persistentSystemOverlays - Preferred visibility of the non-transient system views overlaying the app.
• scrollIndicators(:axes:) - Sets the visibility of scroll indicators within this view.
• widgetAccentable - Adds view and all subviews to the accented group.
• widgetLabel - Returns a text label that displays additional content outside the accessory family widget’s main SwiftUI view.

Text and Symbol Modifiers

Many of the modifiers that were just for Text can now be applied to any view and all Text within will adopt the modifier.

• bold(isActive:) - Applies bold to views when isActive is true.
• fontWeight - Can now be applied to views (not just Text).
• italic(isActive:) - Applies italics to views when isActive is true.
• strikethrough(:pattern:color:) - Can now be applied to views (not just Text).
• underline(:pattern:color:) - Can now be applied to views (not just Text).
• baselineOffset - Vertical offset that can now be applied to views (not just Text).
• kerning - Spacing between characters that can now be applied to views (not just Text).
• tracking - Spacing between all characters that can now be applied to views (not just Text).
• lineLimit - Line limit can now be applied to Text AND a vertical TextField.
• autocorrectionDisabled - Used to be disableAutoCorrection on TextField. Can be applied to any view now.
• scrollDismissesKeyboard - Dismiss keyboard when scrolling, never, automatically based on context or allow user to choose.
• findNavigator(isPresented:) - Presents the find and replace interface for TextEditor views.
• findDisabled - Prevents find and replace operations in a TextEditor.
• replaceDisabled - Prevents replace operations in a TextEditor.

Navigation Modifiers

• navigationTitle(title:Binding) - Allows navigation title editing.
• navigationDocument - Configures the view’s document for purposes of navigaiton.
• navigationDestination - Associates a destination view with a presented data type for use within a navigation stack.

Toolbar Modifiers

• toolbar(:for:) - Specifies the visibility of a bar managed by SwiftUI. (Place it automatically, bottom, navigation bar, tab bar or window toolbar.)
• toolbarBackground - Specify the visibility of the background for the specified bar.
• toolbarColorScheme - Specifies the preferred color scheme (light or dark) for the specified bar.
• toolbarRole - Configures the semantic role (automatic, browser, editor, navigationStack) for the content populating the toolbar.

Context Menu

• contextMenu(menuItems:preview:) - Adds a context menu with a preview to a view.

Style Modifiers

• gaugeStyle - Sets the style for gauges within this view. (New for iOS)
• tableStyle - Sets the style for tables within this view. (New for iOS)
• disclosureGroupStyle - Sets the style for disclosure groups within this view.
• navigationSplitViewStyle - Sets the style for navigation split views within this view.

Grid Modifiers

• gridCellColumns - Tells a view that acts as a cell in a grid to span the specified number of rows.
• gridCellAnchor - Custom alignment anchor for a view that acts as a grid cell. (top, topLeading, topTrailing, bottom, etc.)
• gridCellUnsizedAxes - Asks grid layouts not to offer the view extra size in the specified axes (horizontal or vertical).
• gridColumnAlignment - Overrides the default horizontal alignment of the grid column that the view appears in.

Input and Event Modifiers

• SpatialTapGesture - A gesture that recognizes one or more taps and reports their location.
• onTapGesture(count:coordinateSpace:perform:) - Adds a tap gesture within the specified coordinate space. The onTapGesture isn’t new. But specifying the coordinate space is.
• defersSystemGestures - Sets the screen edge from which you want your gesture to take precedence over the system gesture.
• defaultFocus - Default focus is evaluated by assigning a value to a given focus state binding.

Searchable

There are over a dozen new searchable initializers that can be used now. Rather than go through them all, I think it would be better to just list out some of the new parameters:

• scope: A binding for the active scope of the search field.
• scopes: A view builder representing the scopes of the search field which will be used to populate a Picker.
• token: A view builder that creates a view given an element in tokens.
• tokens: A collection of tokens to display and edit in the search field.
• suggestedTokens: A collection of tokens to display as suggestions.

SearchSuggestionsPlacement - A structure that defines ways in which search suggestions may be placed. (automatic, content, menu)

Presentation Modifiers

• presentationDetents - Sets the available detents for the enclosing sheet. (medium, large, custom, fraction, height)
• presentationDragIndicator - Sets the visibility of the drag indicator on top of a sheet.
• offerCodeRedemption - Sheet that enables users to redeem subscription offer codes.

State Modifiers

• backgroundPreferenceValue - Reads the specified preference value from the view, using it to produce a second view that is applied as the background of the original view.
• overlayPreferenceValue - Reads the specified preference value from the view, using it to produce a second view that is applied as an overlay to the original view.

Text Input & Output

TextField

• The TextField can now overflow horizontally or vertically by specifying an axis.
• A lineLimit modifier with one or a range of values can be added to specify how much the TextField can grow. Beyond that a scroll indicator will appear.

  TextEditor

• findNavigator - Programmatically presents the find and replace interface for text editor views.
• findDisabled - Prevents find and replace operations in a text editor.
• replaceDisabled - Prevents replace operations in a text editor.

Font

• system(size:weight:design:) - While the signature looks the same, the weight and design are now optional instead of required.

Images

The Image initializer now has a new parameter called variableValue that the rendered image can use to customize its appearance. If the symbols does not support it, this has no effect.

• ImageRenderer - An object that creates images from SwiftUI views. So you can compose a SwiftUI view and then generate an image or PDF from it.

Animations

• contentTransition - Modifies the view to use a given transition as its method of animating changes to the contents of its views.

Charts

• Chart - A SwiftUI view that displays a chart. You can customize many parts of the chart:
  • Background
  • Foreground
  • Style such as bar, point, area, rule, rectangle or line charts
  • Plot area
  • Legends
  • Overlays
  • Visibility of the X or Y axis
  • Scale of the X or Y axis
  • Scale and size of symbols used