SwiftUI

SwiftUI provides three basic containers for arranging views: HStack, VStack, and ZStack. These stacks are used for creating simple and complex user interfaces. Let’s see how they work. VStack: Arranging Views Vertically A VStack (Vertical Stack) arranges its child views in a vertical line, one on top of the other. Example: VStack { Text("Top Item") Text("Middle Item") Text("Bottom Item") } This will display three text views stacked vertically. By default, views within a VStack are centered horizontally. You can control the alignment using the alignment parameter: ...

The role of Text view in SwiftUI is to display text (funny that). It can support simple labels, rich content or dynamic text. It is the SwiftUI equivalent to UILabel. Let’s get look at it in more detail. Creating Basic Text Simply pass a string to the Text initialiser: Text("Hello, SwiftUI!") You can also use string interpolation to create dynamic text: let userName = "Mike" Text("Welcome back, \(userName)!") ...

If you haven’t met OutlineGroup in SwiftUI yet, picture Finder’s sidebar rendered in SwiftUI: click a chevron, folder children appear. I recently tried to get this working with search. I wanted folders to open and close depending on whether the contained valid results… After much wrestling and many coffees I gave up on OutlineGroup in favour of a tiny Node model, a ExplorerStore viewmodel, and some recursion. The result? A searchable file‑browser that behaves at least as my mental model thinks it should. ...

SwiftUI’s contextMenu modifier is a simple API that does a lot for us. I wrote about building context menus in both UIKit and SwiftUI recently. I did not go into detail about support for the custom previews that landed in iOS 16, iPadOS 16 and macOS 13. Let us fill that gap. Recap: Context menus in SwiftUI A context menu is equivalent of a right-click on touch devices. Using long‑press (or Control‑click on the Mac) on a view reveals a menu of options exactly where the user needs it. In pure SwiftUI we use .contextMenu to create these menus: ...

The aim for this post to build a very simple List view. When you long-press a row you will see a classic iOS context menu. It will look a little like this: Why Context Menus? Context menus give users an easy way to discover secondary actions right where they’re looking. They: Keep the primary UI clean. Surface actions only when they’re relevant. Feel familiar thanks to the long-press gesture we already use across iOS. What We’ll Build We’ll create a simple list of fruit. A long-press on any row reveals three actions: ...

Debugging SwiftUI views can feel a little challenging due to its declarative nature. In this post, we’ll explore how to add print statements into your SwiftUI code to observe state changes, view updates, and data flow. Why use print in SwiftUI? SwiftUI’s declarative paradigm means you describe what your UI should look like, and the framework handles when to update it. This can make it easier to reason about but harder to debug lifecycle events and UI-related state changes. print statements give you: ...