In 2019, Apple introduced SwiftUI, a new declarative UI framework based on the Swift language. It makes writing an iOS native app easier than ever. Unfortunately, one year later, there is still no systematic SwiftUI Chinese tutorial online, and even the information on the Internet is scattered and confusing. So let’s start from the beginning and learn from wwDC2019 SwiftUI video series. Watch the official tutorials and follow the most positive path

Today we are going to introduce SwiftUI: Building Your First App, which is to use SwiftUI to make the First App. Students who visit the official video of Caton can also watch the version of station B up Handling.

Before we begin, since iOS development only works on macOS, you’ll need a MAC and please install Xcode (via the App Store). The interface and functionality provided by different Versions of Xcode may vary slightly. Mine is Xcode version 12.3, macOS 11.0 Big Sur.

Create a project

Before writing the code, create a new SwiftUI project in Xcode. To open Xcode, click Create a new Xcode Project to Create a new project.

Select iOS platform from Multiplatform, App from Application, and click Next.

Come up with a name for your project, this time because we are going to make an app to record meeting Room information, so we will call it Room. Note that the following Interface is SwiftUI. Click Next.

Select the location where you want to store the project and click Create to automatically Create our project.

After a few moments, Xcode will automatically create a SwiftUI project template for us and the interface will jump to something like this:

Click Resume on the top right and you can preview the initial screen on the right! A “Hello World” right in the middle.

At this point, our project is created!

At the beginning of SwiftUI experience

In the example above, SwiftUI adds a.padding() by default. We’ll explain what it does later. ) change to Text(“Rooms”). After you modify the code, you will notice that the preview screen on the right automatically changes.

The blue box outside the Room is because the cursor is hovering over the Text(“Rooms”) in the code, and the preview automatically tells you which part of the screen the Text corresponds to.

Next, we’ll start adding content to the page. Click the “+” in the upper right corner, select Text, click and drag it below the Rooms Text in the preview. Note that when dragged near Rooms, Xcode will prompt you below the preview based on the relative location. After the drag is complete, wait a moment, and the preview shows the Placeholder word just below the Rooms. With that, we easily added a text component to the page.

In addition to the changes in the preview on the right, you’ll notice that the code on the left has also changed to:

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Rooms")
            Text("Placeholder")}}}Copy the code

As you can probably guess by now, this struct ContentView is the code that generates the right-hand view. Every component in SwiftUI is a View, so we’ll call things like Text views later. In the above operation, Xcode automatically adds a Text view and places the two in a VStack view. The VStack, also known as vertical Stack, automatically places its subviews vertically. Similarly, we have HStack, which lays out the view horizontally.

And then we’re going to change the “Placeholder” to “20 people”, which means the room will hold 20 people. Then we want to insert a picture of the conference room to the left of these two lines. Insert an HStack outside the VStack by holding down Command and clicking on VStack and selecting Embed in HStack from the options bar that pops up. Then insert an Image view in front of the VStack. For the moment, we’ll use the system Image(systemName: “photo”). After a few moments, an icon appears to the left of the previous two lines of text.

Next, we want to tweak the look and feel of our view slightly. This can also be done directly in the preview on the right. Select VStack (either in the preview or through the code on the left), hold Command and click the blue box in the preview, and select Show SwiftUI Inspector from the options bar. The VStack Inspector pops up, and you can adjust the VStack style. Adjust the Alignment above to left-aligned (in SwiftUI, called leading Alignment, to better fit the right-to-left interface in Arabic), and you’ll notice that both the preview and the code on the left change as you choose.

Similarly, we can change the style of the text. This time we’ll change the size of 20 people to “subheadline”.

By comparing the code changes, you can also see how to change the view style in SwiftUI code. Let’s change the color of the line “20 people”. The method is to add a line “.foregroundcolor (.secondary)” under.fond(.subheadline).

At this point, our ControlView has become:

struct ContentView: View {
    var body: some View {
        HStack {
            Image(systemName: "photo")
            VStack(alignment: .leading) {          // VStack alignment style
                Text("Rooms")
                Text("20 people")
                    .font(.subheadline)           // Text Specifies the size of the Text
                    .foregroundColor(.secondary)  / / Text color}}}}Copy the code

So we have a view that represents a conference room. But obviously our building can’t have just one office, so what we need is a list of conference rooms. Xcode provides a great feature for this as well.

Click on the HStack while holding Command, and select Embed in List.

Xcode will automatically create a list of five of our views!

Have you got a taste of SwiftUI’s simplicity? Due to space constraints, we will look at how to convert the hard-coded values in here into our own custom data and insert beautiful images in the next article. Stay tuned!