1. SwiftUI: Display the text using the Text view

Text and UILabel views are similar and are mainly used to display information.

Knowledge points:

• Interface elements need to be placed in the body property of the ContentView structure.

• The type of the body property is the View protocol, and View is the basic type of all interface elements in SwiftUI. By following the View protocol and implementing the required body properties, you can provide views with custom content and behavior.

@available(iOS 13.0, macOS 10.15, tvOS 13.0, watchOS 6.0, *)
public protocol View {


    /// The type of view representing the body of this view.
    ///
    /// When you create a custom view, Swift infers this type from your
    /// implementation of the required ``View/body-swift.property`` property.
    associatedtype Body : View


    /// The content and behavior of the view.
    ///
    /// When you implement a custom view, you must implement a computed
    /// `body` property to provide the content for your view. Return a view
    /// that's composed of primitive views that SwiftUI provides, plus other
    /// composite views that you've already defined:
    ///
    ///     struct MyView: View {
    ///         var body: some View {
    ///             Text("Hello, World!")
    ///         }
    ///     }
    ///
    /// For more information about composing views and a view hierarchy,
    /// see <doc:Declaring-a-Custom-View>.
    @ViewBuilder var body: Self.Body { get }
}

• Add some Text views, where the text area is in the quotation marks.

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

• The body property can only return one View. If there are multiple Views, only the first View will be returned by default, unless specified with the keyword return.

struct ContentView: View {
    var body: some View {
        
        // Returns the first View by default
        Text("Hello World 1!")
        
        Text("Hello World 2!")
    }
}

• Use the keyword return to return the specified View

struct ContentView: View {
    var body: some View {
        
        Text("Hello World 1!")
        
        // Use the keyword 'return' to return the specified View
        return Text("Hello World 2!")
    }
}

• The VStack view can arrange multiple views inside it equally spaced in the vertical direction.

struct ContentView: View {
    var body: some View {
        VStack {
            // Bold
            Text("Hello World!")
                .bold()
            
            // Italic
            Text("Hello World!")
                .italic()
        }
    }
}

• Use the chaining feature of dot syntax to set the offset value of the text content in the vertical direction of the Text view.

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello World!")
                .baselineOffset(CGFloat(10.0))
                .background(.red)
        }
    }
}

• Bold

Text("Hello World!")
                .bold()

• Italic

Text("Hello World!")
                .italic()

• Underline

Text("Hello World!")
                .underline()

• Yellow underline

Text("Hello World!")
                .underline(true, color: .yellow)

• Strikethrough

Text("Hello World!")
                .strikethrough()

• Red strikethrough

Text("Hello World!")
                .strikethrough(true, color: .red)

• Red foreground

Text("Hello World!")
                .foregroundColor(.red)

• Yellow background

Text("www.podnu.com")
                .background(.yellow)

• Red URL

Text("www.podnu.com")
                .accentColor(.red)

Visual effects:

• A VStack can hold up to 10 subviews, if more than 10 subviews, Xcode will report an error.

• Solution: Add a VStack view inside the VStack view.

• Set offset value of the text content in the Text view.

Text("Hello World!")
                .baselineOffset(CGFloat(10.0))
                .background(.red)

• Set an image as the background of the Text view, and set the text content to be at the bottom of the Text view.

Text("Hello World!")
                .background(Image("podnu_cover").resizable(), alignment: .bottom)

• Add a Text view and set the font size of the text to the footnote style.

Text("www.podnu.com")
                .font(.footnote)

• Add a Text view and set the font size to 32

Text("www.podnu.com")
                .font(.system(size: 32))

• Add a Text view and set the font of the text to the title style, which can automatically adjust its size according to the size of the screen.

Text("www.podnu.com")
                .font(.system(.title, design: .monospaced))

• Add a Text view with a custom font and set the font size to 32

Text("www.podnu.com")
                .font(.custom("TheNautigal-Bold", size: 32))

• Add a Text view and give it a bold effect via the font-weight property.

Text("www.podnu.com")
                .fontWeight(Font.Weight.heavy)

Finally, add a Text view to display ultraLight text through the font weight.

Text("www.podnu.com")
                .fontWeight(Font.Weight.ultraLight)

Visual effects:

---

Follow me on:

(Foks) Hui Wang's LinkedIn