Intro

Hi, I am William Jiamin, the creator of youtube channel CodeWithWilliamJiamin and the creator of this website(learn-it-free.com). I am a self-taught iOS developer and I have been developing iOS apps for 10 years. I have been using SwiftUI since it was released in 2019. I have created many SwiftUI tutorials on my youtube channel . I am very excited to share my knowledge with you and I hope you will enjoy this article.

Let's Get our hands dirty

OK, let's get our hands dirty and try to do some of the customization.

First, let's change the Text part.

A more intuitive way to change the text (or any design)is to use not the code , but the preview (believe me, a lot of ios developer don't know they can do this).

What you need to do is to find this mouse icon on the button left corner of the preview.

And Click is ,Then you have changed the mode from Live to Selectable.

Which means that you can select any part of the preview and change it(Just like the previous storyboard, but better).

As you guys can see, I have selected the Text part and I can change the text to whatever I want by press Command-Control-click at the same time.

Let's choose embed in HStack and see what will happen.

Well , it seems that nothing happened. But just bear with me, we will see the difference later.

The code will be like this:

//
//  ContentView.swift
//  OurFirstSwiftUIApp
//
//  Created by WilliamJiamin on 2023/10/30.
//

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundStyle(.tint)
            HStack {
                Text("Hello, world!")
            }
        }
        .padding()
    }
}

#Preview {
    ContentView()
}

So inside of the VStack, we have an Image and a HStack.
Remember the Image is a View and the HStack is also a View.So They are separately as one row in the VSatck.

And inside of the HStack, we have a Text.Because there is nothing else in the HStack, so the Text will be in the center of the HStack. Thus you won't see any difference.

Let's add another Text in the HStack and see what will happen.

//
//  ContentView.swift
//  OurFirstSwiftUIApp
//
//  Created by WilliamJiamin on 2023/10/30.
//

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundStyle(.tint)
            HStack {
                Text("Hello, world!")
                Text("--by William Jiamin")
            }
        }
        .padding()
    }
}

#Preview {
    ContentView()
}

You should see something like this:

And to make things even more interesting, let's embed the second Text in a VStack and in that VStack, we add more Text, see what will happen.

The code as follows:

//
//  ContentView.swift
//  OurFirstSwiftUIApp
//
//  Created by WilliamJiamin on 2023/10/30.
//

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundStyle(.tint)
            HStack {
                Text("Hello, world!")
                VStack {
                    Text("--by Youtuber William Jiamin")
                    Text("@CodeWithWilliamJiamin")
                }
            }
        }
        .padding()
    }
}

#Preview {
    ContentView()
}

So, with multiple VStack and HStack, we can create a very complex UI.

OK, I think that's enough for this article. In the next article, we will talk about how to use Modifier to warp the View and make it more beautiful.