Issue #1048
WWDC26 covers iOS 27, macOS 27, watchOS 27, tvOS 27, and visionOS 27. It brings new capabilities you can adopt and a couple of behavioral shifts that can break code that compiled fine before. This article starts with the two changes that …
Issue #1025
macOS windows look best when they blend with the desktop — the translucent, frosted-glass look that makes panels feel native rather than opaque blocks of UI. There are two ways to achieve this depending on your deployment target. …
Issue #1018
Visual hierarchy is what separates polished apps from cluttered ones. When elements compete for attention equally, users struggle to know where to focus. SwiftUI provides powerful tools for creating hierarchy—through layered backgrounds, …
Issue #1015
Building a container view that wraps child views and places dividers between them sounds simple. But until iOS 18, SwiftUI didn’t give us a clean way to iterate over child views. Let’s look at how this problem was solved …
Issue #997
An interesting feature in iOS 26 is the ability to create morph “Liquid Glass” effects, where views with the .glassEffect() modifier can fluidly morph into one another. This is achieved using GlassEffectContainer and the …
Issue #996
When creating widgets for iOS, especially those that need user input to be useful, one common challenge is guiding the user to configure them. Before iOS 18, a user would add a widget, but then would have to know to long-press it and …
Issue #995
With iOS 18, SwiftUI introduces matchedTransitionSource and navigationtransition as a powerful new way to create zoom animations between views. This allows you to smoothly transition from a small view to a larger, more detailed view, …
Issue #994
With iOS 18, Apple introduced a powerful new tool for creating beautiful, dynamic backgrounds: MeshGradient. Forget simple two-color gradients; mesh gradients let you blend a whole grid of colors together smoothly, creating stunning, …
Issue #992
In the past, making your screen update when data changed in UIKit meant writing extra code, either with didSet, Combine or some other callbacks. Now, it’s automatic.
With the latest iOS 26 updates, UIKit can automatically watch your …
Issue #988
When working with Core Data, there are times we have optional NSManagedObject to pass around. These objects conform to ObservableObject, and in SwiftUI we can’t @ObservedObject on optional ObservableObject
One way we can workaround …
Issue #986
When using TextField in SwiftUI List on Mac, it has unwanted background color when focused. We can turn it off using introspection or a custom TextField wrapper
TextField("Search", text: $searchText)
.introspect(.textField, on: …Issue #984
The WidgetBundle lets us expose multiple widgets from a single widget extension
It uses WidgetBundleBuilder to constructs a widget bundle’s body.
In iOS 18, if we include ControlWidget then we need to check iOSApplicationExtension iOS 18. …
Issue #983
In iOS 18, we can make Control Widget in Widget extension
import WidgetKit
import SwiftUI
@available(iOS 18.0, *)
struct BookControlWidget: ControlWidget {
var body: some ControlWidgetConfiguration {
StaticControlConfiguration …Issue #980
NSCollectionView, available since macOS 10.5+, is a good choice to present a list of content. Let’s make a SwiftUI wrapper for NSCollectionView with diffable data source and compositional layout
Issue #978
From iOS 17, SwiftUI Charts has chartGesture, together with SpatialTapGesture we can check tap location and convert that to Charts value
Chart {}
.chartGesture { chart in
SpatialTapGesture()
.onEnded { value in …Issue #956
import Foundation
import SwiftUI
import AppKit
struct AttributedTextView: NSViewRepresentable {
@Binding var attributedText: NSAttributedString
var isEditable: Bool = true
final class Coordinator: NSObject { …Issue #954
From iOS 15, there’s a handy safeAreaInset that allows us to place additional content extending the safe area.
Shows the specified content beside the modified view.
safeAreaInset allows us to customize which edge and alignment we …
Issue #951
Create a custom NSView that handles mouseDragged to beginDraggingSession
struct DraggingSourceViewWrapper: NSViewRepresentable {
let fileUrls: [URL]
let onEnd: () -> Void
func makeNSView(context: Context) -> …Issue #949
AppStorage and SceneStorage accepts RawRepresentable where value is Int or String.
Creates a property that can read and write to a string user default, transforming that to RawRepresentable data type.
init( …Issue #948
iOS 17 has a new Stand by mode so SwiftUI introduces containerBackground for the system to decide when to draw background. It also automatically applies margin to widget so we may need to disable that
To update existing widgets, we can …
Issue #944
SwiftUI in iOS 16 supports Layout protocol to arrange subviews
We need to implement 2 methods
Issue #943
In this tutorial, we’ll learn how to use Swift Charts to visualize ranking data.
We use default AxisMarks and AxisMarks to let Swift Charts interpolate x and y grid lines. For y axis, I want to have finer grain control over the …
Issue #939
Instead of letting the Image decide the size, we can put it as background or overlay. I use clipped and contentShape to avoid the fill image obscuring touch event
Color.clear
.frame(height: 100)
.overlay {
AsyncImage(url: …Issue #930
Declare AppShortcutsProvider, note that appShortcuts uses @AppShortcutsBuilder syntax
import AppIntents
struct OurShortcutsProvider: AppShortcutsProvider {
static var shortcutTileColor: ShortcutTileColor = .lightBlue …Issue #929
We can use ButtonStyleConfiguration to detect isPressed state
struct RecordButton: View {
var body: some View {
Button {
} label: {
Image(systemSymbol: .micFill)
}
.buttonStyle( …Issue #924
Note
the navigation split view coordinates with the List in its first …
Issue #923
NavigationLink on Mac applies the default button style. We can style it using ButtonStyle, here to use plain style we can just
NavigationLink(value: DetailRoute.books) {
BooksView()
}
.buttonStyle(.plain)
Issue #922
EnvironmentValues Views in SwiftUI can react to configuration information that they read from the environment using an Environment property wrapper
Updated for iOS 17
Issue #921
Use HStack with TextField and a little extension
extension Binding where Value == Int {
var toString: Binding<String> {
Binding<String>(
get: {
"\(wrappedValue)"
}, …Issue #920
For iOS 16 and macOS 13.0
TextEditor(text: $text)
.scrollContentBackground(.hidden)
For below, use [SwiftUI-Introspect](https://github.com/siteline/SwiftUI-Introspect)
TextEditor(text: $text)
.instrospectTextView {
$0. …Issue #919
WWDC23 introduces lots of new additions to SwiftUI, notably Metal shader support with these modifiers
Issue #899
Use NSTitlebarAccessoryViewController
var titleBarAccessoryVC: NSTitlebarAccessoryViewController {
let vc = NSTitlebarAccessoryViewController()
let view = HStack {
Spacer()
Button {
} label: { …Issue #898
Change element position using either offset or position, and use DragGesture
Use GestureState to store the updating startDragLocation to keep the start location when drag begins, so we can add translation
struct MoveModifier: ViewModifier …Issue #897
During continuous events like dragging or TextField typing, and we have a Picker onscreen with large data set, it will slow down main thread.
One option is to explicitly conform that view to Equatable
struct FontPicker: View, Equatable { …Issue #896
Use underscore _focus we get access to underlying FocusState object, but underscore _ is private to a View hence can’t be used in extension
If we want to pass FocusState to another View or in extension, we can pass its Binding
enum …Issue #895
Apply .move on reversed array
List(selection: $viewModel.selectedBook) {
ForEach(viewModel.books.reversed()) { book in
BookCell(book: book)
}
.onMove { source, dest in
var reversed = Array(viewModel.books. …Issue #894
Use a UIView as source view and set it in background
class ViewModel {
lazy var sourceView = UIView()
}
struct SourceView: UIViewRepresentable {
let viewModel: ViewModel
func makeUIView(context: Context) -> UIView { …Issue #891
Below are my favorite WWDC videos. My focus is to use SwiftUI to make useful apps with great UX. I don’t pay much attention to new frameworks as they come and go, but the underlying reasons and design principles are worth …
Issue #890
In WWDC21, WWDC22 Apple provide a Slack channel https://wwdc22.slack.com/ for people to interact with Apple engineers in digital lounges. Here I note down some interesting Q&As
Issue #890
Interesting SwiftUI Q&A during WWDC22
Q: What’s the difference between a custom ViewModifier (without DynamicProperty) that uses some built-in modifiers in …
Issue #889
See gist https://gist.github.com/onmyway133/fc08111964984ef544a176a6e9806c18
Section("Hashtags") { …Issue #882
In SwiftUI, .popover shows as popover on Mac and iPad, but as .sheet on iPhone (compact size class)
We can use minWidth, minHeight to specify sizes on Mac and iPad.
On iPhone, we can check and wrap it inside NavigationView. Setting …
Issue #881
Specify optional value for List(selection:).
This keeps selection on macOS, but not on iPad.
On iPad each row in the List needs to be NavigationLink, no need for .tag. The selection is not updated, need to manually update with onTapGesture …
Issue #878
Note that
id is needed, although Book already conforms to Identifiableselection needs a default valueclass BookViewModel: ObservableObject {
@Published var books: [Book] = []
@Published var selectedBooks: Set<Book …Issue #877
Over the course of making several SwiftUI apps, I’ve discovered quite a few hidden magic of SwiftUI that are quite fun.
Here are 6 interesting SwiftUI features in View Builder many don’t know are even possible 🤯
Issue #876
Make a dedicate DebounceObject to debounce (or throttle). Then we can even observe with onChange on the debouncedText or just use it directly to sort
import Combine
public final class DebounceObject: ObservableObject {
@Published var …Issue #858
isDetailLink(false).introspectNavigationController { nav in
self.nav = nav
}
Issue #855
Use CoreImage to generate QR image
import SwiftUI
import CoreImage.CIFilterBuiltins
struct QRView: View {
let qrCode: String
@State private var image: UIImage?
var body: some View {
ZStack {
if let image = …Issue #853
With ButtonStyle, the disabled modifier does not seem to work, we need to use allowsHitTesting.
import SwiftUI
struct ActionButtonStyle: ButtonStyle {
func makeBody(configuration: Configuration) -> some View {
HStack { …Issue #850
Erase with AnyShape
struct AnyShape: Shape {
init<S: Shape>(_ wrapped: S) {
innerPath = { rect in
let path = wrapped.path(in: rect)
return path
}
}
func path(in rect: CGRect) -> …Issue #849
We need to explicitly specify optional in tag
extension AVCaptureDevice: Identifiable {
public var id: String { uniqueID }
}
@State var device: AVCaptureDevice?
Picker("Camera", selection: $device) {
ForEach(manager. …Issue #847
We should use Dynamic Font Type as much as possible, as per Typography guide and https://www.iosfontsizes.com/
But in case we have to use a specific font, we can scale it with UIFontMetrics
import SwiftUI
import UIKit
extension Font { …Issue #846
We use UIBezierPath with addArc to draw specific corner with different rounding values.
import SwiftUI
extension View {
func clipCorners(
topLeft: CGFloat = 0,
bottomLeft: CGFloat = 0,
topRight: CGFloat = 0, …Issue #845
Suppose we have struct Payment as the state, we declare custom Binding<String> that derives from our state.
struct Payment {
var amount: Int = 0
}
To show our suffix view, we use .fixedSize(horizontal: true, vertical: false) to …
Issue #844
Use custom Binding and validate the text. In case of zero, return empty string to let TextField display placeholder
var textField: some View {
let text = Binding<String>(
get: {
state.amount > 0 ? "$\( …Issue #843
This can be used in message bar input or some popover form. We use sizeThatFits to calculate the height so that it grow under certain height limit
import SwiftUI
import UIKit
struct MessageTextField: View {
let placeholder: String …Issue #842
Declare EnvironmentKey and read safeAreaInsets from key window in connectedScenes
struct SafeAreaInsetsKey: EnvironmentKey {
static var defaultValue: EdgeInsets {
UIApplication.shared.keyWindow?.safeAreaInsets.swiftUIInsets ?? …Issue #841
Declare generic on RawRepresentable
import SwiftUI
struct TabStrip<T: RawRepresentable & Hashable>: View where T.RawValue == String {
let values: [T]
@Binding var selected: T
var body: some View {
ScrollView …Issue #838
We can write our custom Binding
import SwiftUI
extension Binding where Value == Date? {
func flatten(defaultValue: Date) -> Binding<Date> {
Binding<Date>(
get: { wrappedValue ?? defaultValue }, …Issue #837
I usually use GeometryReader in background to get size of view, and encapsulate it inside a ViewModifier
struct GetHeightModifier: ViewModifier {
@Binding var height: CGFloat
func body(content: Content) -> some View { …Issue #836
If we have a Picker inside a View that has DragGesture, chances are when we scroll the wheel, the DragGesture is detected too
To prevent this, we can attach a dummy DragGesture to our Picker
Picker("", selection: $number) { …Issue #835
I usually define ButtonStyle to encapsulate common styles related to buttons. Here we specify .frame(maxWidth: .infinity) to let this button take the whole width as possible
struct MyActionButtonStyle: ButtonStyle {
func makeBody( …Issue #834
In iOS 15, we can use UISheetPresentationController to show bottom sheet like native Maps app. But before that there’s no such built in bottom sheet in UIKit or SwiftUI.
We can start defining API for it. There are 3 ways to show …
Issue #831
We can normally listen to sub ObservableObject by either listen to its objectWillChange or its Publisher
class SubModel: ObservableObject {
@Published var count = 0
}
class AppModel: ObservableObject {
@Published var submodel: …Issue #830
Since iOS 16, it is possible to define programmatic routes with `NavigationStack
I usually start by defining enum Route for all possible routes in the app. Note if your app is complex, you can define multiple Route type, each for different …
Issue #829
Use PreferenceKey with a custom coordinateSpace to make our own TrackableScrollView. Note that the offset here is in reversed to contentOffset in normal UIScrollView
import SwiftUI
struct TrackableScrollView<Content: View>: View { …Issue #828
Use focused(_:) for single TextField, and focused(_:equals:) for multiple TextField
struct FormView: View {
@FocusState private var isFocused: Bool
@State private var name = ""
var body: some …Issue #826
Use isActive binding
@State private var goesToDetail: Bool = false
NavigationLink(
destination: DetailView(viewModel: viewModel),
isActive: $goesToDetail) {
Button(action: { goesToDetail = true }) {
Text("Next" …Issue #825
For many apps that require user authentication, a common practice is to define a shared UserManager with an optional User. This is convenient but it requires us to constantly unwrap and check that user
class UserManager {
static let …Issue #824
Use a custom NavigationLink with EmptyView as the background, this failable initializer accepts Binding of optional value. This works well as the destination are made lazily.
extension NavigationLink where Label == EmptyView {
init …Issue #823
Make atomic components and compose them. Firstly with NavigationBar that has custom leading and trailing content, there we can customize padding.
import SwiftUI
struct NavigationBar<Leading: View, Trailing: View>: View {
@ …Issue #822
Get active screen with mouse
func activeScreen() -> NSScreen? {
let mouseLocation = NSEvent.mouseLocation
let screens = NSScreen.screens
let screenWithMouse = (screens.first { NSMouseInRect(mouseLocation, $0.frame, false) }) …Issue #821
Suppose we have a 16:9 preview Image and we want the title Text to be the same width
First we need PreferenceKey to store and sync size
struct SizePreferenceKey: PreferenceKey {
typealias Value = CGSize
static var defaultValue: …Issue #820
Use NSDataDetector to detect links, and NSMutableAttributedString to mark link range. Then we enumerateAttributes and build our Text
func attribute(string: String) -> Text {
guard let detector = try? NSDataDetector(types: …Issue #818
There’s a lot to do to imitate iOS ContextMenu look and feel
For now here’s a rough implementation of a custom context menu where we …
Issue #817
Thanks to resultBuilder and container type in Swift, the following are possible in SwiftUI
struct ChartView {
var body: some View {
computation
}
@ViewBuilder
var computation: some View {
let …Issue #816
SwiftUI supports Menu but the menu items only appear after the menu button is touched. We can initiate the look and feel of Menu with a custom implementation
import SwiftUI
struct CustomMenu<Content: View>: View {
@ViewBuilder …Issue #815
When ever a property marked with @Published change, ObservableObject will emit objectWillChange.send hence telling the View that observes it to reinvalidate.
In WWDC 2021 session Discover concurrency in SwiftUI they mention how …
Issue #814
From iOS 14, TabView has the PageTabViewStyle that turns TabView into the equivalent UIPageViewController.
We can of course implement our own Pager but the simple DragGesture does not bring the true experience of a paging UIScrollView or …
Issue #812
Use GeometryReader to set width and a DragGesture on LazyVStack
CarouselView(
pageCount: images.count,
currentIndex: $selectedImageIndex
) {
ForEach(0 ..< images) { image in
// AsyncImage
}
}
struct CarouselView …Issue #809
Add a hidden overlay UIContextMenuInteraction. Provide preview in previewProvider and actions in actionProvider. Use @ViewBuilder to make declaring preview easy.
extension View {
func contextMenuWithPreview<Content: View>( …Issue #808
Wrap ASAuthorizationAppleIDButton inside UIViewRepresentable
import SwiftUI
import UIKit
import AuthenticationServices
struct SignInWithAppleButton: View {
@Environment(\.colorScheme)
private var …Issue #798
swiftgen.yml
strings:
inputs: PastePal/Resources/Localizable/en.lproj
outputs:
- templatePath: swiftgen-swiftui-template.stencil
output: PastePal/Resources/Strings.swift
Template from …
Issue #796
One seemingly obvious way to use ForEach on array with indices is using enumerated
struct Book: Hashable, Identifiable {
let id: UUID
let name: String
}
struct BooksView: View {
let books: [Book]
var body: some View { …Issue #794
I’ve been distributing my apps PastePal and Push Hero as a paid upfront apps on Appstore. I’ve quickly come to realize the importance of trials since many have requested a tryout before purchasing.
Manual sending out trials …
Issue #791
SwiftUI has View protocol which represents part of your app’s user interface and provides modifiers that you use to configure views.
You create custom views by declaring types that conform to the View protocol. Implement the required …
Issue #789
New in SwiftUI 2.0 for iOS 14 and macOS 11.0 is WindwGroup which is used in App protocol. WindowGroup is ideal for document based applications where you can open multiple windows for different content or files. For …
Issue #785
Calling mergeChanges on a managed object context will automatically refresh any managed objects that have changed. This ensures that your context always contains all the latest …
Issue #784
Every time I switch git branches, SPM packages seem to be invalidated and Xcode does not fetch again, no matter how many times I reopen. Running xcodebuild -resolvePackageDependencies does fetch but Xcode does not recognize the resolved …
Issue #782
Use $ to access Publisher
final class Store: ObservableObject {
@Published var showsSideWindow: Bool = false
}
var anyCancellables = Set<AnyCancellable>()
store.$showsSideWindow
.removeDuplicates()
.throttle(for: 0.2, …Issue #780
To make a container view that accepts child content, we use ViewBuilder
struct ContainerView<Content: View>: View {
let content: Content
init(@ViewBuilder content: () -> Content) {
self.content = content()
} …Issue #779
With Xcode 12.4, macOS 11.0 app. Every time we switch the system dark and light mode, the CPU goes up to 100%. Instruments show that there’s an increasing number of ButtonBehavior
Every cell has …
Issue #776
We need to use a custom Binding to trigger onChange as onEditingChanged is only called when the user selects the textField, and onCommit is only called when return or done button on keyboard is tapped.
import UIKit
import SwiftUI
import …Issue #774
Start by defining your quick actions. You can use UIApplicationShortcutIcon(type:) for predefined icons, or use UIApplicationShortcutIcon(systemImageName:) for SFSymbol
enum QuickAction: String {
case readPasteboard
case clear …Issue #773
From John Harper ’s tweet
SwiftUI assumes any Equatable.== is a true equality check, so for POD views it compares each field directly instead (via reflection). For non-POD views it prefers the view’s == but falls back to its own …
Issue #772
I use Codable structs in my apps for preferences, and bind them to SwiftUI views. If we add new properties to existing Codable, it can’t decode with old saved json as we require new properties. We can either do cutom decoding with …
Issue #770
Handle cancelOperation somewhere up in responder chain
class MyWindow: NSWindow {
let keyHandler = KeyHandler()
override func cancelOperation(_ sender: Any?) {
super.cancelOperation(sender)
keyHandler.onEvent(.esc) …Issue #769
If we place ScrollView inside HStack or VStack, it takes all remaining space. To fit ScrollView to its content, we need to get its content size and constrain ScrollView size.
Use a GeometryReader as Scrollview content background, and get …
Issue #765
In SwiftUI currently, it’s not possible to attach multiple .popover to the same View. But we can use condition to show different content
struct ClipboardCell: View {
enum PopoverStyle {
case raw
case preview
} …Issue #764
Use a custom KeyAwareView that uses an NSView that checks for keyDown method. In case we can’t handle certain keys, call super.keyDown(with: event)
import SwiftUI
import KeyboardShortcuts
struct KeyAwareView: NSViewRepresentable { …Issue #763
I usually break down a big struct into smaller views and extensions. For example I have a ClipboardCell that has a lot of onReceive so I want to move these to another component.
One way to do that is to extend ClipboardCell
struct …Issue #761
Explicitly specify id
ScrollView {
ScrollViewReader { proxy in
LazyVStack(spacing: 10) {
ForEach(items) { item in
Cell(item: item)
.id(item.id)
}
}
. …Issue #756
extension NavigationLink {
func fixOverlap() -> AnyView {
if UIDevice.current.userInterfaceIdiom == .phone {
return self.isDetailLink(false).erase()
} else {
return self.erase()
} …Issue #748
There is said to be PopUpButtonPickerStyle and MenuPickerStyle but these don’t seem to work.
There’s Menu button it shows a dropdown style. We fake it by fading this and overlay with a button. allowsHitTesting does not work, …
Issue #747
Need to use Coordinator conforming to UITextViewDelegate to apply changes back to Binding
import SwiftUI
import UIKit
struct MyTextView: UIViewRepresentable {
@Binding
var text: String
final class Coordinator: NSObject, …Issue #746
From iOS 13, the default is to support multiple scene, so the the old UIApplicationDelegate lifecycle does not work. Double check your Info.plist for UIApplicationSceneManifest key
<key>UIApplicationSceneManifest</key> …Issue #745
I used to use selection with Binding where wrappedValue is optional, together with tag in SwiftUI for macOS, and it shows current selection
@Binding
var selection: Tag? = .all
List(section: $selection) {
Text("All")
. …Issue #737
Use resizingMode of .tile with a tile image from https://www.transparenttextures.com/
Image("transparentTile")
.resizable(capInsets: .init(), resizingMode: .tile)
.scaleEffect(2)
.aspectRatio(contentMode: .fit)
. …Issue #736
struct MyWebView: NSViewRepresentable {
let url: URL
@Binding
var isLoading: Bool
func makeCoordinator() -> Coordinator {
Coordinator(parent: self)
}
func makeNSView(context: Context) -> WKWebView { …Issue #735
From my previous post How to use flexible frame in SwiftUI we know that certain views have different frame behaviors. 2 of them are .overlay and GeometryReader that takes up whole size proposed by parent.
By default GeometryReader takes up …
Issue #734
In SwiftUI there are fixed frame and flexible frame modifiers.
Use this method to specify a fixed size for a view’s width, height, or both. If you only …
Issue #731
Sometimes we don’t want to show progress view right away
HUDProgressView()
.transition(
AnyTransition.asymmetric(
insertion: AnyTransition.opacity.animation(Animation.default.delay(1)),
removal: …Issue #730
Use NSTextField with maximumNumberOfLines
import AppKit
import SwiftUI
struct AttributedText: NSViewRepresentable {
let attributedString: NSAttributedString
init(_ attributedString: NSAttributedString) {
self. …Issue #724
We can use .blur modifier, but with VisualEffectView gives us more options for material and blending mode.
public struct VisualEffectView: NSViewRepresentable {
let material: NSVisualEffectView.Material
let blendingMode: …Issue #723
Use @ViewBuilder to build dynamic content for our HUD. For blur effect, here I use NSVisualEffectView, but we can use .blur modifier also
struct HUD<Content>: View where Content: View {
let content: () -> Content
init(@ …Issue #722
With Xcode 12, we can fire up Instrument to profile our app. Select SwiftUI template
There are many profiles in that template, I find SwiftUI and Time Profile very useful. Here’s the profile I run for my app PastePal
Issue #719
From SwiftUI 2 for macOS 11.0, we have access to Menu for creating menu and submenu. Usually we use Button for interactive menu items and Text for disabled menu items.
The easy way to customize menu with image is to call Menu with content …
Issue #718
Use NSSharingService.sharingServices(forItems:) with an array of one empty string gives a list of sharing items. There we show image and title of each menu item.
We should cache sharing items as that can cause performance issue
import …Issue #717
Try to use predefined system colors in Human Interface Guidelines for macOS
Here we use this color unemphasizedSelectedTextBackgroundColor for button background
HStack(spacing: 1) {
makeUnderListButton(action: {}, icon: .plus) …Issue #716
I have an enum that conforms to CaseIterable that I want to show in Picker
enum Position: String, Codable, CaseIterable, Identifiable {
var id: String { rawValue }
case left
case right
case bottom
case top
}
Picker( …Issue #714
Below is an example of a parent ContentView with State and a child Sidebar with a Binding.
The didSet is only called for the property that is changed.
When we click Button in ContentView, that changes State property, so only the didSet in …
Issue #711
List has a selection parameter where we can pass selection binding. As we can see here selection is of type optional Binding<Set<SelectionValue>>? where SelectionValue is any thing conforming to Hasable
@available(iOS 13.0, …Issue #710
Starting from macOS 11, we can use List with SidebarListStyle inside NavigationView to declare master detail view. The SidebarListStyle makes list translucent. It automatically handles selection and marks selected row in list with accent …
Issue #702
The trick is to use an overlay
MessageTextView(text: $input.message)
.overlay(obscure)
var obscure: AnyView {
if store.pricingPlan.isPro {
return EmptyView().erase()
} else {
return Color.black.opacity(0.01). …Issue #694
I usually structure my app to have 1 main ObservableObject called Store with multiple properties in it.
final class Store: ObservableObject {
@Published var pricingPlan: PricingPlan()
@Published var preferences: Preferences()
} …Issue #692
Use colorScheme environment, for now it has 2 cases dark and light
struct MainView: View {
@Environment(\.colorScheme) var colorScheme
var body: some View {
Text(colorScheme == .dark ? "Dark Mode" : "Light …Issue #689
func applicationDidFinishLaunching(_ aNotification: Notification) {
// extend to title bar
let contentView = ContentView()
// .padding(.top, 24) // can padding to give some space
.edgesIgnoringSafeArea(.top)
// …Issue #688
In the app I’m working on Elegant Converter, I usually like preset theme with a custom background color and a matching foreground color.
Thanks to SwiftUI style cascading, I can just declare in root MainView and it will be inherited …
Issue #686
I now use Core Data more often now. Here is how I usually use it, for example in Push Hero
From iOS 10 and macOS 10.12, NSPersistentContainer that simplifies Core Data setup quite a lot. I usually use 1 NSPersistentContainer and its …
Issue #685
Since we have custom init in ChildView to manually set a State, we need to pass ObservedObject. In the ParentView, use underscore _ to access property wrapper type.
struct ChildView: View {
@ObservedObject
var store: Store
@ …Issue #684
In SwiftUI, specifying maxWidth as .infinity means taking the whole available width of the container.
If many children ask for max width, then they will be divided equally.
This is similar to weight in LinearLayout in Android or css …
Issue #681
Only need to specify fixedSize on text to preserve ideal height.
The maximum number of lines is 1 if the value is less than 1. If the value is nil, the text uses as many lines as required. The default is nil.
Text(longText)
.lineLimit …Issue #680
For List in SwiftUI for macOS, it has default background color because of the enclosing NSScrollView via NSTableView that List uses under the hood. Using listRowBackground also gives no effect
The solution is to use a library like …
Issue #679
While redesigning UI for my app Push Hero, I ended up with an accordion style to toggle section.
It worked great so far, but after 1 collapsing, all image and text views have reduced opacity. This does not happen for other elements like …
Issue #678
Use enumerated to get index so we can assign to item in list. Here is how I show list of device tokens in my app Push Hero
private var textViews: some View {
let withIndex = input.deviceTokens.enumerated().map({ $0 })
let binding: …Issue #677
The quick way to add new properties without breaking current saved Codable is to declare them as optional. For example if you use EasyStash library to save and load Codable models.
import SwiftUI
struct Input: Codable {
var bundleId: …Issue #676
I’ve used the default SwiftUI to achieve the 2 tab views in SwiftUI. It adds a default box around the content and also opinionated paddings. For now on light mode on macOS, the unselected tab has wrong colors.
The way to solve this …
Issue #675
Use wrappedValue to get the underlying value that Binding contains
extension View {
func addOverlay(shows: Binding<Bool>) -> some View {
HStack {
self
Spacer()
}
.overlay( …Issue #674
Specify minWidth to ensure miminum width, and use .layoutPriority(1) for the most important pane.
import SwiftUI
struct MainView: View {
@EnvironmentObject var store: Store
var body: some View {
HSplitView { …Issue #656
Lately I’ve been challenging myself to declare switch statement in SwiftUI, or in a more generalized way, execute any anonymous function that can return a View
Note that this approach does not work yet, as …
Issue #633
Use autoclosure and AnyView
@available(iOS 13.0, OSX 10.15, tvOS 13.0, watchOS 6.0, *)
public extension View {
func applyIf<T: View>(_ condition: @autoclosure () -> Bool, apply: (Self) -> T) -> AnyView {
if …Issue #632
Use Group
private func makeHeader() -> some View {
Group {
if showsSearch {
SearchView(
onSearch: onSearch
)
.transition(.move(edge: .leading))
} else { …Issue #630
For SwiftUI app using NSPopover, to show context popover menu, we can ask for windows array, get the _NSPopoverWindow and calculate the position. Note that origin of macOS screen is bottom left
(lldb) po NSApp.windows
▿ 2 elements
- 0 : …Issue #629
Use Picker with SegmentedPickerStyle.
Picker(selection: $preferenceManager.preference.display, label: EmptyView()) {
Image("grid")
.resizable()
.padding()
.tag(0)
Image("list")
.resizable …Issue #626
SwiftUI does not trigger onAppear and onDisappear like we expect. We can use NSView to trigger
import SwiftUI
struct AppearAware: NSViewRepresentable {
var onAppear: () -> Void
func makeNSView(context: …Issue #625
For some strange reasons, content inside ForEach does not update with changes in Core Data NSManagedObject. The workaround is to introduce salt, like UUID just to make state change
struct NoteRow: View {
let note: Note
let id: UUID …Issue #623
Listen to context changes notification and change SwiftUI View state
let changes = [NSDeletedObjectsKey: ids]
NSManagedObjectContext.mergeChanges(
fromRemoteContextSave: changes,
into: [context]
)
try context.save()
struct …Issue #622
Read Implementing Batch Deletes
If the entities that are being deleted are not loaded into memory, there is no need to update your application after the NSBatchDeleteRequest has been executed. However, if you are deleting objects in the …
Issue #621
Make subview that accepts FetchRequest. Trigger search by setting property
struct SideView: View {
@Environment(\.managedObjectContext)
var context
@State var search: Search?
var body: some View {
VStack(alignment …Issue #620
For NSWindow having levelother than .normal, need to override key and main property to allow TextField to be focusable
class FocusWindow: NSWindow {
override var canBecomeKey: Bool { true }
override var canBecomeMain: Bool { …Issue #618
Create custom Binding
List {
ForEach(self.items) { (item: item) in
ItemRowView(item: item)
.popover(isPresented: self.makeIsPresented(item: item)) {
ItemDetailView(item: item)
}
}
} …Issue #615
List {
ForEach(books) { (book: Book) in
BookRow(book: book)
}
}
.listStyle(SidebarListStyle())
Issue #614
struct MyTabView: View {
@EnvironmentObject
var preferenceManager: PreferenceManager
var body: some View {
VOrH(isVertical: preferenceManager.preference.position.isVertical) {
OneTabView(image: …Issue #613
struct VOrH<Content>: View where Content: View {
let isVertical: Bool
let content: () -> Content
init(isVertical: Bool, @ViewBuilder content: @escaping () -> Content) {
self.isVertical = isVertical …Issue #612
Use runModal
This method runs a modal event loop for the specified window synchronously. It displays the specified window, makes it key, starts the run loop, and processes events for that window. (You do not need to show the window …
Issue #610
Set NSVisualEffectView as contentView of NSWindow, and our main view as subview of it. Remember to set frame or autoresizing mask as non-direct content view does not get full size as the window
let mainView = MainView()
.environment(\. …Issue #605
I use custom TextView in a master detail application.
import SwiftUI
struct TextView: NSViewRepresentable {
@Binding var text: String
func makeCoordinator() -> Coordinator {
Coordinator(self)
}
func makeNSView …Issue #604
I see that the modifier needs to do something on the content, otherwise it is not getting called! This logs on the modifier, when the View is created. A View won’t be recreated unless necessary
struct LogModifier: ViewModifier { …Issue #602
ForEach(store.blogs.enumerated().map({ $0 }), id: \.element.id) { index, blog in
}
```
##
Issue #599
Specify tag
enum Authentication: Int, Codable {
case key
case certificate
}
TabView(selection: $authentication) {
KeyAuthenticationView()
.tabItem {
Text("🔑 Key")
}
.tag( …Issue #598
It’s hard to see any iOS app which don’t use UITableView or UICollectionView, as they are the basic and important foundation to represent data. UICollectionView is very basic to use, yet a bit tedious for common use cases, but …
Issue #597
TextView(font: R.font.text!, lineCount: nil, text: $text, isFocus: $isFocus)
.padding(8)
.background(R.color.inputBackground)
.cornerRadius(10)
.overlay(
RoundedRectangle(cornerRadius: 10)
.stroke(isFocus ? R.color. …Issue #595
SwiftUI uses ListCoreScrollView and ListCoreClipView under the hood. For now the workaround, is to avoid using List
List {
ForEach
}
use
VStack {
ForEach
}
Issue #594
In some case, we should not use base type like UTType.text but to be more specific like UTType.utf8PlainText
import UniformTypeIdentifiers
var dropTypes: [UTType] {
[
.fileURL,
.url,
.utf8PlainText,
. …Issue #592
Hard to customize
Picker(selection: Binding<Bool>.constant(true), label: EmptyView()) {
Text("Production").tag(0)
Text("Sandbox").tag(1)
}.pickerStyle(RadioGroupPickerStyle())
Issue #590
Use custom NSTextField as it is hard to customize TextFieldStyle
import SwiftUI
struct MaterialTextField: View {
let placeholder: String
@Binding var text: String
@State var isFocus: Bool = false
var body: some View { …Issue #533
struct ContentView: View {
@Environment(\.locale) var locale: Locale
var body: some View {
VStack {
Text(LocalizedStringKey("hello"))
.font(.largeTitle)
Text(flag(from: …Issue #517
Use ScrollView -> VStack -> ForEach -> Content
struct SearchScreen: View {
@State var searchObjects: [SearchObject] = [
SearchObject(name: "By name", search: { CountryManager.shared.search(byName: $0) }), …Issue #516
Suppose we have an array of SearchObject, and user can enter search query into text property.
class SearchObject: ObservableObject {
let name: String
let search: (String) -> [Country]
var text: String = ""
init( …Issue #515
Use enumerated and id: \.element.name
struct CountriesView: View {
let countries: [Country]
var body: some View {
let withIndex = countries.enumerated().map({ $0 })
return List(withIndex, id: \.element.name) { …Issue #513
A publisher that emits before the object has changed
Use workaround DispatchQueue to wait another run loop to access newValue
.onReceive(store.objectWillChange, perform: {
DispatchQueue.main.async {
self.reload()
}
}) …Issue #511
struct CountriesView: View {
let groups: [Group]
init(countries: [Country]) {
self.groups = CountryManager.shared.groups(countries: countries)
}
var body: some View {
List {
ForEach(groups) { …Issue #508
We need to use frame(minWidth: 0, maxWidth: .infinity, alignment: .leading). Note that order is important, and padding should be first, and background after frame to apply color to the entire frame
struct BooksScreen: View {
@ …Issue #507
View extends to the bottom, but not to the notch. We need to add .edgesIgnoringSafeArea(.top) to our TabView to tell TabView to extend all the way to the top.
Note that if we use edgesIgnoringSafeArea(.all) then TabView ’s bar will …
Issue #505
Make sure all String are passed into Text, not Optional<String>
VStack {
Text(data.title)
Text(data.description!)
Text(data.text!)
}
Issue #502
Mutation is used to mutate state synchronously. Action is like intent, either from app or from user action. Action maps to Mutation in form of Publisher to work with async action, similar to redux-observable
AnyReducer is a type erasure …
Issue #488
The dollar is not a prefix, it seems to be a generated code for property wrapper, and each kind of property wrapper can determine which value it return via this dollar sign
State and ObservedObject are popular property wrappers in SwiftUI …
Issue #487
In case we have to modify state when another state is known, we can encapsulate all those states in ObservableObject and use onReceive to check the state we want to act on.
See code Avengers
If we were to modify state from within body …
Issue #486
import SwiftUI
struct ActivityIndicator: UIViewRepresentable {
@Binding var isAnimating: Bool
let style: UIActivityIndicatorView.Style
func makeUIView(context: UIViewRepresentableContext<ActivityIndicator>) -> …Issue #485
The easiest way to show image picker in iOS is to use UIImagePickerController, and we can bridge that to SwiftUI via UIViewControllerRepresentable
We conform to UIViewControllerRepresentable and make a …
Issue #483
Every item in list must be uniquely identifiable
List {
ForEach(books, id: \.bookId) { book in
NavigationLink(destination:
BookView(book: book)
.navigationBarTitle(book.name)
) { …Issue #482
lineLimit does not seem to work, use fixedSize instead
Fixes this view at its ideal size.
A view that fixes this view at its ideal size in the dimensions given in fixedDimensions.
extension Text {
func styleText() -> some View { …Issue #468
From onAppeear
Adds an action to perform when the view appears.
In theory, this should be triggered every time this view appears. But in practice, it is only called when it is pushed on navigation stack, not when we return to it.
So if …
Issue #467
Declare top dependencies in ExtensionDelegate
class ExtensionDelegate: NSObject, WKExtensionDelegate {
let storeContainer = StoreContainer()
func applicationDidEnterBackground() {
storeContainer.save()
}
}
Reference …
Issue #450
Following the signatures of ScrollView and Group, we can create our own container
public struct ScrollView<Content> : View where Content : View {
/// The content of the scroll view.
public var content: Content
}
extension …Issue #449
WatchKit does not have Web component, despite the fact that we can view web content
A workaround is to show url as QR code
import SwiftUI
struct QRCodeView: View {
let …Issue #448
Use ObservableObject and onReceive to receive event. URLSession.dataTask reports in background queue, so need to .receive(on: RunLoop.main) to receive events on main queue.
For better dependency injection, need to use ImageLoader from …
Issue #447
NavigationView is not available on WatchKit, but we can just use NavigationLink
List(services.map({ AnyService($0) })) { anyService in
NavigationLink(destination:
ItemsView(service: anyService.service)
. …Issue #446
Suppose we have Service protocol, and want to use in List
protocol Service {
var name: String { get }
}
struct MainView: View {
let services = [
Car()
Plane()
]
var body: some View {
List(services) …