A Beginner’s Guide to SwiftUI: Layouts, User Input and Data Handling

Learn about the basics of SwiftUI framework, including how to create and layout views, how to handle user input, and how to work with data.

Photo by Yura Fresh on Unsplash

First introduced in WWDC 2019, SwiftUI helps you build great-looking apps across all Apple platforms with the power of Swift — and surprisingly little code. You can bring even better experiences to everyone, on any Apple device, using just one set of tools and APIs. In this article, we will cover the basics of SwiftUI and how to get started with it.

Let us begin.

Creating and laying out views

In SwiftUI, views are the building blocks of your user interface. You can think of them as the equivalent of UIKit’s UIView. To create a view, you define a struct that conforms to the View protocol. Here is an example of a view that displays a simple text label:

struct ContentView: View {
    var body: some View {
        Text("Hello, World!")
    }
}

To lay out views within a container, you can use the VStack, HStack, and ZStack containers. These containers allow you to stack views vertically, horizontally, or on top of each other, respectively. Here is an example…