More options:

In previous article, I have discussed about the basic of SwiftUI. In this article, I will discuss about how to customise our SwiftUI app by using the modifier. Let's get started.

Remember the shortcut to bring uo the editor at selectable mode? It is Command-Control-Click

Let's see more options:

For example, this Hello, world! is a little bit small when compare to the text at the right.So let's make it bigger.

Click show swiftUI inspector, and you will see this:

You can see that there are a lot of options for you to customise your app. For example, you can change the font, the size, the color, the alignment, etc.

Let's change the font to Title and colour to Yellow

You can see that the text is now bigger and yellow.And most interestingly, you can see the code is changed automatically.(I already using the red square to highlight the code that is changed)

//
//  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!")
                    .font(.title)
                    .foregroundColor(Color.yellow)
                VStack {
                    Text("--by Youtuber William Jiamin")
                    Text("@CodeWithWilliamJiamin")
                }
            }
        }
        .padding()
    }
}

#Preview {
    ContentView()
}


So basically, you can customise your Text by adding the . and then choose the options you want. For example, if you want to change the font, you can add .font and then choose the font you want.

And the modification options are different for different type of views. You don't have to remember all of them. You can just use the shortcut to bring up the editor and then choose the options you want.

And the code will be changed automatically. After you have changed the code multiple times, you will get used to it and you will remember the code.

Ok, it is playing time. Let's try to customise our app by using the modifier.

I got something like this:

How about doing it in reverse?

So , we already know that we can customise our app by using the modifier in the preview. But how about doing it in reverse? That is, we can customise our app by using the modifier in the code.

Say we want to change the font of the text to title and the color back, ofcourse we can do it in the preview.Or we can simply just delete the modifier in the code.

But what if we want to bring up the editor and then change the font to title and the color back or to another option which we know nothing about? Let's see how to do it.

You need to hover your mouse to the view you want to customise and then while holding the Ctrl key, click the view. You will see the options. Show the SwiftUI inspector . When you click it, you will see the options again and you can then change the font to title and the color back.

In conclusion

You don't need to remember all the options. You can just use the shortcut to bring up the editor and then choose the options you want. You can not only change in the preview, but also in the code.

In the next article, I will discuss about how to using embeded views to make our code more readable. Stay tuned.